分享⼀次前端⾯试题及其详细答案剖析
答： 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⽀持通过ate
Element⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持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引擎。
渲染引擎：负责取得⽹页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算⽹页的显⽰⽅式，然后输出到显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不同。所有⽹页浏览器、电⼦邮件客户端以及它需要编辑、显⽰⽹络内容的应⽤程序都需要内核。
JS引擎：解析和执⾏JavaScript来实现⽹页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向与只指渲染引擎。
常见的浏览器内核：
Trident内核：IE，360，搜狐浏览器；
Gecko内核：Netscape6及以上版本，
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chromesvg和canvas的区别
1、⾏内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和⾏内元素，⾏内元素display：inline，块级元素display：block。
2、⾏内元素和其他⾏内元素都会在⼀条⽔平线上排列，都是在同⼀⾏的；块级元素却总是会在新的⼀⾏开始排列，各个块级元素独占⼀⾏，垂直向下排列，若想使其⽔平⽅向排序，可使⽤左右浮动（float：left/right）让其⽔平⽅向排列。
3、⾏内元素不可以设置宽⾼，宽度⾼度随⽂本内容的变化⽽变化，但是可以设置⾏⾼（line-height），同时在设置外边距margin上下⽆效，左右有效，内填充padding上下⽆效，左右有效；块级元素可以设置宽⾼，并且宽度⾼度以及外边距，内填充都可随意控制。
4、块级元素可以包含⾏内元素和块级元素，还可以容纳内联元素和其他元素；⾏内元素不能包含块级元素，只能容纳⽂本或者其他⾏内元素。
就分享这么多啦，如有不⾜之处，请⼤家多多指教！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。