全网前端面试题汇总（2）HTML
1. H5新特性
（1）语义化标签，增强可读性 <hrader></header> <footer></footer> <nav></nav>等
（2）增强型表单
拥有多个新的input输入类型 date、color、search等
新的表单元素 <datalist>（输入域选项列表）<keygen>（密钥）<output>（输出）
新的表单属性 placehoder（提示）min/max height/width autofocus multiple required（非空） pattern（表单验证）
（3）视频和音频 <audio>
（4）Canvas绘图
（5）SVG绘图（可伸缩的矢量图形）
（6）地理定位 window.navigator.geolocation ，navigator.geolocation.getCurrentPosition
（7）拖放API
拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置
e.dataTransfer.setData( k, v ) ，e.dataTransfer.getData( k )
（8）Web Worker 运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能，监听、接收/发送消息
（9）Web Storage 新增localStorage和sessionStorage
（10）WebSocket通讯
2. label标签
<label> 标签为 input 元素定义标注（标记）
<label> 的for属性绑定相关元素的id，点击<label>可触发绑定元素的点击事件;
<label> 嵌套元素，点击<label>可触发绑定元素的点击事件;
3. localStorage、sessionStorage 和 cookie的区别
（1）结构上，cookie内容：name value domain（域） path expires/max-age（过期时间）,localStorage和sessionStorage的内容都是key value;
（2）cookie的内容会带在http请求中；
（3）大小：cookie限制4k，localStorage和sessionStorage不同浏览器不同，最大5M，具体可以通过for in + hasOwnProperty遍历得到；
（4）有效期：cookie由expires/max-age决定，sessionStorage浏览器窗口关闭之前有效，localStorage持久有效，除非主动清除缓存；
（5）作用域：sessionStorage直在当前窗口生效，localStorage和cookie在同源窗口共享；
4. HTML、XHTML、HTML
HTML是最早期指定的语言，没用严格的标准，存在很多问题；
XHTML是W3C为了规范HTML而提出的，但向下兼容存在问题（强错误检查）；
HTML5新增特性的同时实现向下兼容；
5. title和h1，strong和b，em和i的区别
title是窗口标签，h1是页面标题；
b是为了加粗文本而加粗，strong是为了标记重点而加粗，
i是为了斜体文本而斜体，em是为了标记重点而斜体，
对于搜索引擎来说，strong和em更受重视；
6. HTML5文档类型和字符集
文档类型：<!DOCTYPE HTML>
字符集： <meta charset="UTF-8">
7. 严格模式、混杂模式
不声明或声明错误会产生混杂模式；（1）严格模式，浏览器按照W3C规范解析代码，混杂模式，浏览器按照自己的规范解析代码；
（2）严格模式盒子模型是W3C标准，混杂模式不是；
（3）混杂模式下可以设置内联元素高度；
（4）混杂模式无法使用margin:0 auto;来居中，图片padding失效，table中的字体属性无法继承，white-space:pre会失效；
8. 前端页面的结构，哪三层
结构层：HTML，表示层：CSS，行为层：JS和DOM
9. DOM是什么（浏览器如何渲染页面）
HTML DOM：文档对象模型，是HTML文档的编程接口，定义了访问和操作HTML文档的标准方法；
DOM以树的结构表达HTML文档；
浏览器接收到服务器的代码后进行解析，经过三大步骤：DOM构造、布局、绘制页面；
DOM构造：浏览器通过HTML解析器将代码解析为一颗DOM树；
布局：浏览器从上到下、从左到右读取DOM节点，读取完成后计算节点的CSS属性，作为节点的“说明”；
绘制页面：将所有节点按照“说明”绘制出来，完成整个页面的渲染；
10. 概述W3C 对于HTML 的标准
标签小写
标签闭合
合理嵌套
声明文档类型
属性双引号
特殊字符用编码表示
图片尽量添加合理的alt
form中增加label
结构层、行为层、表现层分离（使用外链CSS和JS）
11. Canvas和SVG区别
Canvas:
通过JS来绘制图形；
逐像素渲染；
位置发生改变时会重新绘制；
SVG：
使用XML描述图形；
SVG的DOM中每个元素都是可用的，可用附加事件；
绘制的图形都被是为对象，对象属性改变时，浏览器自动重现图形；
区别
（1）Canvas依赖分辨率，SVG不依赖分辨率；
（2）Canvas无法添加事件，SVG可以；
（3）Canvas文本渲染能力弱，SVG可支持大型区域的渲染，如地图，但SVG复杂度高会减慢渲染速度；
（4）Canvas能以.png或.jpg保存图片；
浙公网安备 33010602011771号