分享一次前端面试题及其详细答案剖析
答 ： 1、语义化标签，比如<header></header>、<section></section>、<footer></footer>等等；
2、增强型表单，input输入类型增强，提供了更好的输入控制和验证，比如number（只能输入数字）、email（包含 e-mail 地址的输入域及简单验证）、range（一定范围内数字值的输入域）、month（选择一个月份）等等；新增表单元素，<datalist>、<keygen>、<output>；新增表单属性：placehoder （输入框提示）、required （值为boolean，用于非空验证）、pattern（设置正则表达式用于验证输入值）等等。
3、音频和视频，音频： <audio> 标签，视频：<video>标签。
4、Canvas绘图，使用标签<canvas>，通过 JavaScript 来绘制 2D 图形。是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象，且canvas不能实现DOM操作。
5、SVG绘图，SVG是指可伸缩的矢量图形，使用 XML 描述 2D 图形的语言，放大不失真，DOM 中的每个元素都是可操作的，每个被绘制的图形均被视为对象，如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
6、地理定位，Geolocation（地理定位）用于定位用户的位置。
7、拖放API，即抓取对象以后拖到另一个位置，拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
源对象的触发事件：dragstart：拖动开始、drag：拖动中、dragend：拖动结束。整个拖动过程的组成： dragstart*1 + drag*n + dragend*1；
目标对象触发的事件：dragenter：拖动着进入、dragover：拖动着悬停、dragleave：拖动着离开、drop：释放。
整个拖动过程的组成1： dragenter*1 + dragover*n + dragleave*1；
整个拖动过程的组成2： dragenter*1 + dragover*n + drop*1。
8、Web Worker，web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行，详情请见W3C。
9、Web Storage，使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。分为：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。
10、WebSocket，WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
如何处理新标签的浏览器兼容问题：HTML5规范毕竟是刚刚才定义完成的规范，还有一些浏览器并不能支持其中的新标签和新属性，尤其是IE8及以下版本浏览器。IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。或者使用html5shim框架，在浏览器头部引用就可以，
（1）创建新节点3种： createDocumentFragment() （创建一个DOM片段）、 createElement()（创建一个元素）、 createTextNode()（创建一个文本节点）
（2）添加： appendChild()
（3）移除：removeChild() 额外补充：替换replaceChild()
（4）查找：getElementsByTagName() （通过标签名）、getElementsByName() （通过name属性名）、getElementById()（通过ID值）、getElementByClass(通过class值)
（5）复制：cloneNode() 用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
（6）移动：获取DOM元素，用使用css3 transform:translate(X,Y)来偏移元素
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
一般我们都建议使用link标签，慎用@import方式。是因为避免产生资源文件下载顺序混乱和http请求过多的烦恼。
区别：
1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
4、@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。（当然现在可能已经不存在IE5以下的浏览器了）
1、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
1、使用空标签清除浮动clear:both。（不推荐）
2、父级div定义overflow:hidden（必须定义width或zoom:1，同时不能定义height）（不推荐）
3、父级div定义伪类:after（*zoom：1(IE转有属性)可解决ie6,ie7浮动问题，，定义在父元素上）（推荐）
4、父级div定义height（只适合高度固定的布局）（不推荐）
5、父级div定义overflow:auto（内部宽高超过父级div时，会出现滚动条。）（不推荐）
所以比较好的是第三种！
box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。例如，假如需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
常用属性：
1、content-box（宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框）
2、border-box（为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度）
3、inherit（规定应从父元素继承 box-sizing 属性的值）
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的，而HTML5不是的。
主要分成两个部分：渲染引擎和JS引擎。
1、行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
2、行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
3、行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
4、块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
就分享这么多啦，如有不足之处，请大家多多指教！
