《前端程序员面试笔试宝典》笔记

HTML基础

• HTML全称为HyperText Markup Language，它基于SGML的语法和规则，HTML5版本开始不再遵循这个规则。
• HTML的缺点有兼容性差和移植性差，为了解决这个问题，W3C发布了XHTML，可以看作更严格的HTML。
• HTML负责内容和结构，CSS负责样式呈现，JS负责动态交互。
• HTML基本结构包括四个元素DOCTYPE、html、head和body。
• H5和旧HTML的区别？
  1、H5原生支持多媒体，HTML依赖浏览器插件。
  2、H5不再基于SGML，文档声明类型只有一种（）。
  3、H5消除了过时的元素，如font、center等。
  4、H5新增语义化的元素（article、header等）和功能（video、canvas等），提供更好的跨平台支持。
  5、H5新增全局属性（draggable、contenteditable等）和元素属性（accept、placeholder等）。
• 旧HTML的DOCTYPE需要DTD，它分为三种：strict、transitional、frameset。其中，frameset包含所有的html元素，tansitional不包含框架相关元素，strict不包含弃用元素和框架相关元素。
• 浏览器渲染模式有三种：Quirks Mode、Almost Standard Mode、Standard Mode。
• XML全称为eXtensible Markup Language，XHTML全称为eXtensible HyperText Markup Language。
• XHTML和HTML的区别？
  1、合理嵌套、区分大小写、必须要有结束标签。
  2、XHTML里可混用XML应用，如MathML、SVG等。
  3、CDATA里的内容可以被执行，防止遇到非法字符中断。
  4、属性必须用引号包裹，并且禁止简化。
  5、特殊字符必须替换为实体引用
• 语义化的优点：代码结构优化（结构清晰布局合理主题突出可读性更强）、促进无障碍访问、SEO优化。
• Microformat通过添加属性（class或rel）和元数据（link元素）的方式来实现web的语义化。
• rel属性用来描述两个文档或文档与资源之间的关系，class属性微格式定义了五个前缀：h-（根元素，指定元素是微格式）、p-（一个纯文本元素）、u-（一个链接元素）、dt-（一个时间元素）以及e-（解析元素的内容）。
• 微格式可以解析成JSON格式，易于人类和计算机理解，如下：

  #解析前：
  <div class="h-card">
    <a class="u-url" href="pw.html">Pwstrick</a>
    <div class="e-description">
      <span class="p-name">Pwstrick</span>
      <time datetime="2013-05-02 12:00:00" class="dt-start"></time>
    </div>
  </div>
  
  #解析后：
  {
      "type":["h-card"],
      {
          "properties":{
              "start":["2013-05-02 12:00:00"],
              "url":["pw.html"],
              "name":["Pwstrick"],
              "description":[{
                  "value":"Pwstrick",
                  "html":"\r\n<span class=\"p-name\">Pwstrick</span>\r\n <time datetime=\"2013-05-02 12:00:00\" class=\"dt-start\"></time>\r\n"
              }]
          }
      }
  }

• ARIA属性为视觉障碍用户服务，有两类定义方式：role用于通用类型，以及aria-*用于特定信息。
• HTML实体三种方式：名称（以&开头）、十进制（以&#开通）、十六进制（以&#x开头），都是以分号作为结尾。
• “<”符号三种定义方式：”<”、”<”、”&#x0003C”
• 使用HTML实体还能预防XSS（跨站脚本攻击），可以让注入的脚本只打印不执行。

HTML元素和高级功能

• 元素的基本类型分五类：void element、raw text element、escapable raw text element、foreign element和normal element，每种类型举例标签。按盒类型分两类：block-level element和inline-level element。
• 元数据用于配置HTML文档的基本信息，包括DOCTYPE、html、head以及head内的元素等。
• 属性分两类：global arribute和local attribute。
• local attribute举例：form的action、textarea的rows等等。
• global atrribute分五种：
  1、H4 atrribute：accesskey、class、dir、hidden、id、lang、style、tabindex、title等等
  2、H5 atrribute：contenteditable、contextmenu、draggable、dropzone、spellcheck等等
  3、ARIA atrribute
  4、event atrribute：onclick、onmousedown等，通常以”on-“为前缀。
  5、custom atrribute，通常以”data-“为前缀。
• boolean attribute可以不设置值，常见的有：checked、defer、disabled、readonly、selected等等，它的形式有三种，例如：checked、checked=”checked”和checked=””，这三种写法表达一个意思。如果要去掉这个属性，只能从标签里移除这个属性，设控制或false都是没有用的。
• 流量器自动添加子元素的功能叫Shadow DOM，例如audio、、、、等标签。
• href和src的区别：两者功能不同。href全称为hypertext reference，功能为链接；src全称为source，功能为嵌入。举例几个固定搭配：link配href、script配src、等等。
• title和alt区别：应用形式不同。title为全局元素；alt为局部元素，仅可用在img、input[type=image]等元素中，作为加载失败时的替代文本。
• 样式应用的三种方式：inline style、embedded style和external style。
• 内联样式以属性的形式存在，它的specficity最高，不能定义Pseudo-Class和Pseudo-Element。
• MIME全称为Multiperpose Internet Mail Extensions，可以定义style的内容赋予类型，默认为text/css。
• 样式常用属性有type、media、title，简单了解这三个属性的用法。
• 内嵌样式以元素的形式存在，该元素有一个只有Firefox支持的特殊属性，名为scoped，它再只在当前父元素生效，不影响子元素。
• 外部样式由link元素引入
• 三种样式应用的区别从五个方面来分析：特殊性、HTTP请求、重用范围、当前文档大小影响、伪类和伪元素。
• JavaScript应用的三种方式：inline script、external script和element script。
• 如果script元素放在外部样式表之后，会延迟资源下载，只有当样式表下载完成并且内联脚背执行完毕时，后续资源才能开始下载。
• script有两个布尔属性解决阻塞问题，分别是defer和asynx，它们的共同点是：下载时间（并详细说明），它们的不同点是：执行时间和执行顺序（并详细说明）。
• 元素属性脚本有两种形式：事件属性和特殊协议，分别举例。
• a元素模拟按钮，要去掉重定向功能，可以去掉href属性，或者这么写：href=”javascript:void(0);”，后者会保留a元素的一些默认效果（如鼠标形状）。
• 特殊协议可以制作成浏览器书签使用。
• 三种脚本的嵌入方式的区别从五个方面来分析：内容和行为、、HTTP请求、重用范围、文档大小和特点。
• 元数据信息使用meta标签描述，它有四个属性charset、name、http-equiv和content。
• H5推荐的字符编码描述是charset=”UTF-8”，旧html会用http-equiv和content声明。
• name属性可以用来描述文档和SEO信息，其中viewport关键字可以定义页面是否缩放和宽度，适配移动设备，使页面在各种尺寸的屏幕中正确显示。
• http-equiv可以提供一些程序指令，模拟HTTP首部，可以设置首选样式表、重载、重定向、缓存、cookies到期等等。
• 设置所有超链接都在新窗口打开，可以通过base元素设置，属性写法和a元素一样。
• H5中a元素新增了download和hreflang属性，前者可以定义文件名（IE不支持safari部分支持）。
• a元素除了导航，还有拨打电话、发送短信、发送邮件、下载等功能，分别描述格式。
• img元素，alt属性用于图片不能正常显示时候的文字提示，usemap用于分区响应图，H5新增的crossorigin属性，用于帮助canvas元素使用第三方站点的图像，并且不会污染画布。
• 分区响应图关联的map元素下的area元素定义单个热区，它的shape属性可以定义热区形状，包括矩形rect、circle、poly和default，配合coords属性定位其坐标和大小，其中多边形形状每一组坐标代表一个点。

  <img src="planets.gif" alt="Planets" usemap="#planetmap" />
  <map name="planetmap">
    <area href="sun.htm" shape="rect" coords="0,0,110,260" />
    <area href="mercur.htm" shape="circle" coords="129,161,10" />
    <area href="venus.htm" shape="circle" coords="180,139,14" />
  </map>

• 常用图像格式有gif、png、jpg、apng、webp特点，从透明、压缩、动画、颜色数、兼容性和特点方面来描述。
• input元素的type属性的关键字众多，可分为以下几类：
  1、文本类：text、password、hidden、search、tel、url、email等。
  2、数值类：number、range、date等。
  3、按钮类：button、radio、checkbox、submit、reset、image、color、file等。
• input元素在H5中新增了form属性和list属性，描述下这个两个属性的用法。
• 可使用fieldset元素给表单分组，整个分组使用 legend元素提供说明，单个控件用label元素说明，使用 for属性与控件进行关联。
• 表单元素的disabled和readonly的区别，从外观、操作、焦点、tab、提交、支持方面分析。
• table要控制列的样式使用colgroup和col元素。
• table中合并单元格的属性是colspan、rowspan。
• 列举表格布局的弊端。
• iframe元素可以在文档中嵌入另一个文档，两个文档互不影响，H5增加了两个属性，seamless用于控制内嵌文件CSS，sandbox属性用于限制内嵌文件。
• iframe的五个用途。
• iframe的四个缺点。
• H5支持多媒体元素，不再依赖flash这样的第三方插件，多媒体元素的四个优势。
• video元素用于视频播放，它的属性有src、width、height、autoplay、preload、controls、loopposter、muted等等，兼容性较好的文件格式是mp4。
• audio元素用于音频播放，属性和视频元素相同。
• 视频和音频元素都使用子元素source元素导入文件，按兼容性和顺序优先选择文件播放，配合track元素可添加同步字幕。
• canvas和svg两种技术可用于创建图形，前者基于位图，后者基于矢量图形。
• 画布是H5新增元素，只能通过JavaScript脚本来绘制图形，可以实现图像的裁剪和合成功能，甚至可以实现滤镜效果，使用toDataURL()方法可以将画布内容编码成字符串形式。
• SVG的全称为Scalable Vector Graphics，是一种用XML描述图形的标记语言，不止可以用JS控制，还可以用CSS控制样式（部分可用）。SVG提供各种类型的元素，如形状、文本、渐变、动画和滤镜等，可以为每个元素附加DOM事件（canvas不行），也可插入img元素。
• cookie的三种缺陷：
  1、每个HTTP请求都会带上cookie信息，访问量大的时候，影响网速。
  2、不适合存储保密信息，容易被劫持，CSRF跨站点请求伪造技术就是通过劫持cookie来进行攻击。
  3、容量限制在4kb左右，不能处理缓存表单信息、数据同步等复杂的存储需求。
• web存储容量在2.5~10M之间，大部分是5M，不会将额外信息传递给服务器，容易实现离线功能，可以简单地把它们看作改进版的cookie，IE8以上都支持。
• web存储分为local storage和session storage，前者不会过期，同源本地存储可以共享（同源指网址一毛一样），后者在会话结束后就过期清除。
• userData寄存在HTML元素中，容量在1M左右，可以设置过期时间。
• 给cookie设置HttpOnly属性，可以禁止JS访问它，从而防止被盗取。

CSS基础

• CSS的全称是Cascading Style Sheets，用于控制页面表现，是HTML的补充，W3C开始大力废弃有样式的元素，因为同样的效果CSS可以做到。
• 每个CSS规则由选择器和声明块两个部分构成。
• CSS2是整体规范，CSS3则是模块化的规范。
• CSS3的新特性：
  1、完善了选择器，书写方式与jQuery相似，避免增加多余的HTML元素属性。
  2、新增阴影、圆角、web字体、渐变等以往要用图片实现的效果，提升页面加载速度。
  3、新增背景功能，可以多张、控制尺寸、剪裁等。
  4、新增过渡和动画，减少大量对Flash的依赖和JS脚本。
  5、新增多列和流动布局。
  6、新增元素2D或3D变形。
• 各大浏览器对具体的CSS3模块支持度有差异，有些要使用浏览器特有的前缀才能间接支持，例如，firefox前缀-moz-、chrome/safari前缀-webkit-、IE前缀-ms-、opera前缀-o-。
• 为了保持核心内容和基本功能的不受浏览器兼容性影响，要保持渐进增强的思想。
• CSS预处理器的英文为CSS Preprocessor，解决CSS难以复用、代码冗余、可维护性低的问题。
• CSS预处理器的优点和缺点？
  优点：嵌套、变量、混合、函数、运算、模块化。
  缺点：学习成本
• 盒模型由四部分组成margin、border、padding和content。摆放方式分为文档流和脱离文档流，后者常用的实现方法为浮动和绝对定位。
• 使用CSS的box-sizing属性可改变盒模型类型，IE6以下这个属性的值为content-box。
• display用来指定盒类型，HTML默认只有两种，分别为块级元素和行内元素。
• 行内元素有两种形式，分别为替换元素和非替换元素，前者类似行内块效果，常见的有引用外部资源的元素和表单元素。
• 外边距塌陷的情况和计算方式。
• table盒类型布局的优点和缺点。
• 会根据上下文作为块级元素或内联元素显示的盒类型是run-in。
• inline-block盒类型之间会有间隙，简述解决间隙的三个方法。
• 伸缩盒有main axis和cross axis两个轴
• display:none和visibelity:hidden的区别。
• BFC的英文为Block Formatting Context，中文为格式化上下文，它的特点是内部元素不影响外部元素。
• BFC的用途清除浮动、防止塌陷和自适应两栏布局。
• 创建BFC的条件（任一）：
  1、html元素
  2、脱离文档流的元素
  3、行内块、单元格、伸缩盒元素
  4、overflow不为默认值的元素（overflow:hidden是创建BFC最常用的办法）
• 什么是hasLayout，被触发后会带来什么样的后果？
• 选择器的匹配顺序是从右至左，可以分为基本选择器、关系选择器和伪选择器三大类。
• 属性选择器的匹配条件：开头^、包含*、结尾$、等于（多个属性值的情况）~、等于（前缀）|。
• 伪元素选择器按功能分过滤内容和添加内容两种类型。前者有::first-letter、::first-line、::placeholder和::selection，后者有::before和::after。
• 伪元素区别于伪类选择器，在CSS3中使用两个冒号，只能出现在选择器的最后位置，并且不能同时定义多个伪元素。
• content属性可以生成内容，它可以使用的值有：计数器、属性值、图像和文本，最后者包含普通字符串、16进制字符和自定义引号。
• 处理样式表的过程叫层叠，英文为Cascade，它依赖五个方面来源、重要性、特殊性、继承和次序。
• 样式来源有三：用户代理、用户样式和作者，简单描述这三个来源。
• 使用!important来强调重要性，标记为重要的用户样式权重比作者的高。
• 每个选择器都有特殊性：
  1、ID选择器特殊性为100
  2、类选择器、属性选择器和伪类选择器的特殊性为10。
  3、类型选择器和伪元素选择器的特殊性为1。
  4、关系选择器和通配选择器的特殊性为0。
• 与外观相关的属性能被继承，与布局相关的属性不能被继承，css声明使用inherit值可以显式继承，非显式继承的声明没有特殊性，能被特殊性为0的声明覆盖。
• 链接的伪类选择器的声明顺序？
• 长度单位分绝对长度和相对长度，分别举例，并列出px、em、rem的计算公式，了解视口单位的用法。
• 推荐的手机端rem设置方法是html元素声明font-size:100px。
• CSS3增加了角度和时间单位。
• CSS中用于计算的函数是calc()，简单了解用法。
• 百分数必须要有参照值，不同属性的参照值各不相同，参照值有包含块、视口和元素自身三种情况，分别举例。
• 内外边距的参照值是包含块的宽度。
• 位移的参照值还要加上padding和border的值。
• 简述web安全色的规则。

CSS属性

• 清除浮动的方法有创建BFC和clear属性（推荐伪元素设置clear:both）。
• clear属性会让元素设置的上外边距失效，元素的上外边距实际等于前面浮动元素的高度。
• 相对定位的元素发生位移，原先所占的空间还会保留。
• 绝对定位自动成为块级元素，不设置长宽高的情况下，长宽等于包含块减去位移值。
• 设置为hidden的border和设置为none的border有什么区别。
• border-radius的简写规则。
• 阴影可设置多条，用逗号隔开，受border-radius影响可以呈现圆角，并且不占据空间。
• ouline和border的区别。
• text-decoration可设置overline、underline和line-through，还有配有style和color的设置。
• 默认的white-space合并了空白符和制表符，忽略了换行符，允许自动换行，可以更改关键字改变属性。
• word-wrap被W3C更名为overflow-wrap，它两个属性break-word和break-all的区别，禁止文本断开用keep-all。
• 超过容器的文字使用符号替代，可用text-overflow属性。
• 声明字体时，若字体名称中没有空格，可不用加引号。
• font-style的italic和oblique的区别。
• line-height是指两行文本基线之间的垂直距离，它对行内替换元素没有效果，当替换和非替换元素并排，替换元素的底部会与非替换元素的基线对齐，这就是表单和图片经常没有和文字对齐的原因。
• vertical-align只对行内元素和单元格元素生效，子元素设置vertical-align的值会影响父元素的基线。
• boackground-origin和background-clip的关键字和box-sizing一样，它们可以设置背景的起绘点和剪裁点。
• background-size的两个属性cover和contain的不同。
• background-attachment可以设置背景附着在内容local或视口fixed上。
• background-position的两个关键字在简写的时候必须写在一起，不能分开。
• CSS3增加了三个特殊效果属性：变形transform、过渡transition、动画animation。
• 变形函数有translate()、scale()、skew()、rotate()和matrix()，应用到三维空间每个函数后面加3D即可。
• 过渡效果的属性有property、duration、delay和timing-function。
• 触发过渡效果有伪类触发、媒体查询触发和JS触发三种情况。
• 动画使用@keyframes创建关键帧，过渡的属性动画都有（property变为name），除此之外还有iteration-count、direction、play-state、fill-mode，另外可以自行触发。
• 动画和过渡的timing-function属性都可以使用分段函数steps()函数，用来指定动作的帧数，它有两个参数steps(帧数,start/end)，后者设置start会跳过首帧，设置end会跳过末帧，这个参数可以不设置，默认是end。其中过渡的timing-function还可以 指定为三次贝塞尔曲线。
• 媒体查询有link元素和@media两种使用方法。
• 媒体查询的类型有screen、print、speech和all。
• 媒体查询的操作符有逗号、and、only和not。

CSS应用

### 计算机网络
### JavaScript语言
- JavaScript是是一种脚本语言，脚本语言以文本保存的同时也可直接调用。
- JavaScript是解释脚本语言，而不是需要机器编译的编译脚本语言，简述两者区别。
- 完整的JavaScript由三部分组成：ECMAScript、DOM、BOM，并写出它们的全称。
- Javascript的五个优点：
1、在客户端分担服务器工作，降低服务器压力。
2、容易上手，语法简单。
3、在客户端给用户即时反馈。
4、跨平台，不依赖操作系统。
5、丰富界面，增强交互。
（三个方面分析：用户角度、服务器角度、编程角度）
- Javascript的四个缺点：
1、兼容性低，不同浏览器支持程度不同。
2、安全性低，用户可查看源码，容易被修改。
3、中断运行，只要一条出错，就会直接停止运行。
4、权限限制，不能与操作系统交互。
- JavaScript区分大小写，标识符命名可以由数字、字母、下划线和美元符号组成，但是不能以数字开头。
- 关键字和保留字不能作为标识符使用。
- ECMAScrip有六种内置类型：undefined、null、boolean、number、string和object，使用typeof运算符可以检测出变量的数据类型（空值例外）。
- object类型是由方法和属性组成的集合，常用的包括数组、函数 和全局对象。
- 运算符有五种：算术运算符、关系运算符、逻辑运算符、赋值运算符和其他运算符。
- 语句类型有三种：条件语句、循环语句和跳转语句。
- 常量又称字面量。
- 严格模式的限制。
- 数字类型的支持进制有十进制、八进制和十六进制，其中被严格模式禁止使用的是八进制。
- 极大或极小的浮点数可用科学计数法表示，比如，125000可表示为1.25e5，0.0000125可表示为1.25e-5。
- 浮点数的计算精度不如整数，0.1+0.2=0.30000000000000004。
- 全局属性Infinity和NaN都是只读，不能被赋值，无法用delete运算符进行删除。
- 字符串一经创建不再改变。
- 转义字符以反斜线</invisible>开头，用于表示非打印字符和特殊字符，举例常用转义字符。
- 将“abcdef”反转为“fedcba”：“abcdef”.split(“”).reverse().join(“”);。
- 截取字符串有三个方法：slice()、substring()和substr()，简单了解其区别
- Number()参数为false、null、空字符串和非打印转义字符串的时候，返回0；参数为undefined和其他字符串，返回NaN；当参数为对象时，返回对象的ToPrimitive抽象操作的值，否则返回字符串[object Object]。
- 对象的ToPrimitive抽象操作可以让对象返回一个值，先检查是否有valueOf()方法并返回它的值，若无，则检查toString()方法并返回它的值。
- 10（十进制）=1010（二进制）=012（八进制）=0xA（十六进制）
- 转换整数的函数是parseInt()，转换浮点数的函数是parseFloat()。
- 按位非运算符公式：~x=-(x+1)，非数字全部返回-1，经常用于判断语句。
- 加号运算符也可以改变数字类型，如果加的是字符串会转变成字符串类型，如果加的是其他，会按照Number()函数的转换规则进行转换。
- 除了null和undefined每个值都有toString()方法可以转换成字符串；String()方法可以将任何类型的值转换为字符串；任何值加空字符效果等同String()。
- 转换布尔值的函数为，能返回假值的只有7个值，列举它们。
- 布尔值进行加法，若加数为字符串则拼接字符串，若加数不是字符串，则按Number()函数转换规则进行转换。
- 相等运算符为==，全等运算符为===，它们的区别是全等运算符禁止类型转换。
- 全局对象，了解一下。
- 对象的创建方式有两种构造函数Object()和字面量，其中后者属于简写形式，只需将属性或方法放入一对花括号中。
- 让对象与对象之间产生关联的属性叫prototype，读取对象属性时会沿着原型链向上查找属性。
- 对象的属性名只能是字符串类型，可以用点号和方括号调用，后者更灵活可以使用表达式。
- 对象的属性，了解一下。
- JSON是一种轻量级、不依赖语言的数据交换格式，与XML相比的四个优势：语法格式更简单、层次结构更清晰、所用字符数更少和数据解析更直接。
- JSON的序列化，了解一下。
- 日期对象，了解一下。

客户端中的JavaScript

我的想法