之前有尝试记录错题，花费时间长，效果不太好，后面发现牛客网自动生成了错题本。所以就开一篇专门记录一下易错知识点吧，刚好最近把HTML&CSS所有专项练习做完啦。大声BB：牛客网能不能不要把bootstrap的内容加到这个专项练习中鸭！你让我这种不学bootstrap的怎么办！

错题知识点整理

1. CSS3新增的特性：前端面试之 CSS3 新特性

2. a标签不跳转有三种方法：

   • onclick事件返回false
   • 用href=“Javascript: void(0)”这种伪协议
   • 使用（#）跳转到页面顶部

3. IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

   Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。

   url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。

   Session 是服务器端使用的一种记录客户端状态的机制 。

   post 是向服务器传送数据，数据量较大。

   local Storage 也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）。

4. CSS伪类用于向某些选择器添加特殊的效果。

   • :active 向被激活的元素添加样式。
   • :focus 向拥有键盘输入焦点的元素添加样式。
   • :hover 当鼠标悬浮在元素上方时，向元素添加样式。
   • :link 向未被访问的链接添加样式。
   • :visited 向已被访问的链接添加样式。

   触发顺序为link–>visited—>hover—>active即记为love and hate，然后单独记住focus在hover和active之间即可。hover -> focus -> active悬停 -> 聚焦 -> 响应。

5. 创建带有id属性的DOM元素有什么副作用：会创建同名的全局变量。

6. DOM树中总共分为如下几种节点格式：Element类型（元素节点）、Text类型（文本节点）、Comment类型（注释节点）、Document类型（document节点）。

   • document可以说是一种节点格式，但节点树的根节点也叫document。
   • 所有的HTML elements（元素节点，其实就是HTML标签）都是element。
   • comments属于注释节点

7. DOM事件流包括哪些阶段：

   • 事件捕获阶段
   • 处于目标阶段
   • 事件冒泡阶段

8. HTML5新增的表单元素有：

   autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、pattern、placeholder、required、step、width。

9. bootstrap中，一个元素需要在打印时隐藏，使用的类是hidden-print。

10. 关于Canvas和SVG的描述：

    • Canvas和SVG都可以使用JavaScript来绘制。

    • Canvas对象支持所有的JavaScript的鼠标事件，但绘制在其中的图形并不作为其子元素存在，所以需要通过获取Canvas对象上的鼠标坐标，来绑定事件。因此，并不能直接给canvas里面的图形绑定事件。

    • WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用。

    • SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景；Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。

11. 跨域：发起请求与指向资源域不相同（协议+域名+端口），也就是标签上的src属性不受同源策略影响。 常见有指向资源的部件：<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax。

12. 哪些元素在浏览器默认样式下会加粗文本：

    <h1> - <h6> 标签表示 HTML 标题，默认加粗。

    <caption> 标签表示表格标题，标题一般被居中表格之上，但不加粗文本。

    <em> 标签表示强调内容，显示为斜体，但不加粗文本。

    <th> 标签表示表格的表头，默认加粗文本。

13. 能够用于边距的单位：em, px, pt。

14. 层级显示优先级： frameset > 表单元素 > 非表单元素

    • 在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
    • 表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；
    • 非表单元素包括：链接（a）, div, table, span等。

    所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

    • 有窗口元素包括：select元素，object元素，以及frames元素等等。
    • 无窗口元素：大部分html元素都是无窗口元素。

15. BFC 块级格式化上下文：

    • BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
    • 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
    • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box叠加。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
    • 计算BFC的高度时，浮动元素也参与计算。

16. 浮动元素

    • 如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

    • 浮动元素会尽可能地向顶端对齐、向左或向右对齐。

    • 如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素。

    • 浮动元素重叠：

      • 行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上

      • 块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

17. CSS中可以继承的属性：

    继承：html元素可以从父元素那里继承一部分css属性，即使当前元素没有定义该属性。

    • css不可继承的属性：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
    • 所有元素可继承：visibility和cursor。
    • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    • 终端块状元素可继承：text-indent和text-align。
    • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
    • 表格元素可继承：border-collapse。

18. CSS的font-style用于设置字体的风格，font-weight设置字体的粗细。

    • normal：默认正常情况
    • italic：显示字体为斜体
    • oblique：显示字体为斜体
    • inherit：从父亲那里继承一个样式

19. 浏览器支持的锚伪类（锚代表超链接）：

    • 未访问状态（a:link）
    • 鼠标悬停状态（a:hover）
    • 活动状态（a:active）
    • 已访问状态（a:visited）

    📌分清楚锚伪类和伪类。

20. 置换元素与不可置换元素：

    • 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。

      html中的<img>、<input>、<textarea>、<select>、<object> 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

      置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

    • 不可置换元素：html 的大多数元素是不可置换元素，即其内容直接表现给用户端（如浏览器）。

      例如：<label>label中的内容</label>：标签<label>是一个非置换元素，label中的内容将全被显示。

21. <input>元素的type属性的取值可以是：

    

22. 块级元素、内联元素（行内元素）和内联块级元素：

    

23. HTML5中，自关闭的斜线(/)对 ：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效，言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。

24. a链接标签没有设置href属性时是不能获取到焦点的。

    能够获得焦点的几种情况：

    • <div contenteditable="true">我可以</div>
    • <p tabindex="1">我可以</p>
    • <input type="text" value="我可以" />
    • <a id="yes" href="#">我可以</a>

25. 页面导入样式文件时，对于使用link和@import区别和用法：

    两者的区别：

    1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

    2）link可以加载CSS，Javascript；@import只能加载CSS。

    3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。

    用法：

    1）link的写法： <link rel="stylesheet" href="index.css">

    2）import的写法：

    <style type="text/css">
      @import url（“index.css”）；
    </style>
    

26. HTML<body>元素中，vlink属性用于定义超链接被鼠标点击后所显示的颜色。

27. 回流与重绘：

    在讨论回流与重绘之前，我们要知道：

    1. 浏览器使用流式布局模型 (Flow Based Layout)。
    2. 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
    3. 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
    4. 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

    一句话：回流必将引起重绘，重绘不一定会引起回流。

    回流 (Reflow)：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

    会导致回流的操作：

    • 调整窗口大小，浏览器窗口尺寸改变——resize事件发生时
    • 元素尺寸改变——边距、填充、边框、宽度和高度；改变字体大小
    • 页面渲染初始化
    • 元素位置改变
    • 样式表变动
    • 元素内容变化，尤其是输入控件
    • CSS伪类激活
    • DOM操作，添加或者删除可见的DOM元素
    • offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算， 会使浏览器将渐进回流队列Flush，立即执行回流。内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变。

28. MVC是一种常见的架构，任何系统都可以使用MVC的设计理念：

    • Model（模型）是应用程序中用于处理应用程序数据逻辑的部分，而不是保存数据实体。 通常模型对象负责在数据库中存取数据。

    • View（视图）是应用程序中处理数据显示的部分。视图有多种形式，不止是HTML。 通常视图是依据模型数据创建的。

    • Controller（控制器）是应用程序中处理用户交互的部分。 通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

29. HTML5 是作为Flash的替代技术出现。

30. 关于背景定位属性background-position的说法：

    用处：配合background-image属性一起使用，用于设置背景图片在盒子中的位置

    参数：xpos ypos

    x% y%

    x y三种,

    如果只写第一个水平方向的参数，第二个垂直方向的参数会默认为：center

    50%

    容器高度的一半px

    Xpos：规定水平方向的对齐方式,值有left,right,center

    Ypos：规定垂直方向的对齐方式,值有top,bottom,center

    x%:规定图片水平方向的距离。

    你会不会以为这个x%就是父级容器宽度的x%？那你就想错了哦，这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。

    举个栗子：background-position：50%，20%；

    图片的宽度为 imgwidth：100px；高度为 imgheight：100px；

    容器的宽度为 conwidth：200px；高度为 conheight：200px；

    那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)50%=50px,而不是conwidth50%=100px；(很好理解的吧，不然盒子宽度200px，图片宽度100px，又距离左边100px，岂不是50%没实现水平居中而紧靠右了吗？)

    y%:对应x%

    x:图片距离容器水平方向距离

    y:图片距离容器垂直方向距离

31. track标签：

    <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。<track> 标签是 HTML 5 中的新标签。目前所有主流浏览器都不支持 <track> 标签。

32. DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。

33. HTML5新增元素：

    📍viewport不是新增元素！

    

34. 在不考虑H5的情况下，text、submit、button是可以作为标签的type属性的属性值。考虑html5的话，date也可以作为标签的type属性的属性值。

35. iframe可用在以下几个场景中：

    • 典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
    • ajax上传文件。
    • 加载别的网站内容，例如google广告，网站流量分析。
    • 在上传图片时，不用flash实现无刷新。
    • 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

36. 嵌入在HTML文档中的图像格式可以是*.gif、*.png、*.bmp、 *.jpg。

37. 在class中可以定义:hover伪类，在id中也可以定义。一个元素只能有一个id属性值，却可以拥有多个class属性值。

38. 关于表单的说法：

    • multiple: 用于select的多选或者上传多个文件
    • textarea: 表单多行输入
    • placeholder: 可以用来提示用户输入什么内容
    • disabled：用户无法直接修改包含disabled属性的文本框的内容

39. Animation-timing-fuction：

    默认的是ease，不是linear。

    属性	描述
    linear	动画从头到尾的速度是相同的。
    ease 默认	动画以低速开始，然后加快，在结束前变慢。
    ease-in	动画以低速开始。
    ease-out	动画以低速结束。
    ease-in-out	动画以低速开始和结束。
    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

40. :before不是css3才定义的。

41. 屏幕大小：

    • .col-xs- 超小屏幕 手机 <768px

    • .col-sm- 小屏幕 平板 >=768px

    • .col-md- 中等屏幕 >=992px

    • .col-lg- 大屏幕 >1200px

42. 可以作为table元素的子元素：

    • caption
    • tr
    • tbody

43. 可用于优化 CSS 图片加载的技术：

    • CSSSprite
    • SVGSprite
    • Iconfont
    • Base64

44. 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
    • height：和 width 相对应，指定高度。
    • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
    • maximum-scale：允许用户缩放到的最大比例。
    • minimum-scale：允许用户缩放到的最小比例。
    • user-scalable：用户是否可以手动缩放。

45. 以下两种情况都是用来创建一个多选框，且和文本关联起来（单击文本就像单击核选框一样）:

    • <label><input type="checkbox" />记住我</label>
    • <input type="checkbox" id="c1" /><label for="c1">记住我</label>

46. id和class的使用说明：

    • 一个class可以在一个网页中多次使用
    • ID和class都能和javascript及CSS一起使用
    • 同一个id或class，都可以在一个网页中出现多次

47. 块级元素、行内元素、行块级元素：

    • 常见的块级元素(自动换行， 可设置高宽 )有：div,h1-h6,p,pre,ul,ol,li,form,table,label等

    • 常见的行内元素（无法自动换行，无法设置宽高）有： a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。

    • 常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有： (button,input，textarea,select), img等。

    • label元素不会是浏览器默认的行块级元素：input默认情况下可以设置可设置高宽，不会自动换行。但是label并没有变化

48. 总结那些有默认margin,padding值的html标签：

    • h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。
    • dl标签：有默认margin（top,bottom且相同）值，没有默认padding值。
    • ol,ul标签：有默认margin-（top,bottom且相同）值，有默认padding-left值
    • table标签没有默认的margin,padding值；th,td标签没有默认的margin值，有默认的padding值。
    • form标签在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中没有默认的margin,padding值，但在IE6.0,7.0中有默认的margin：19px 0px;
    • p标签有默认margin(top,bottom)值,没有默认padding值。
    • textarea标签在上述所有浏览器中：margin:2px；padding:2px；
    • select标签在Chrome,Safari,Maxthon中有默认的margin：2px；在Opera,Firefox,IE6.0,7.0,8.0没有默认的margin值。