前端面试题之html
1.简述<!DOCTYPE> 的作用，标准模式和兼容模式各有什么区别？
<!DOCTYPE> 位于文档的第一行，告知浏览器使用哪种规范。
如果不写DOCTYPE，浏览器会进入混杂模式。
标准模式和兼容模式的区别：
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防站点无法工作。
2.HTML5 为什么只需要写< !DOCTYPE HTML>？
html5不急于SMGL，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
3.从seo角度，给出至少2条html书写注意要点
a标签一定要有title属性；
img标签一定要有title属性和alt属性；
页面上有且只能有一个h1；
stong标签内定义重要的文本；
选用语义化的html标签
4.列出html5中新增的表单控件
输入类型：email、url、number、range、Date pickers(date/month/time/datetime/datetime-local)、search、color
表单元素：datalist、keygen、output
5.盒模型
标准盒模型：content（内容）、padding（内边距）、border（边框）、margin（外边距）
IE盒模型的content包含border和padding
6.data-*属性的作用
html5规范里新增了一个自定义data属性。
为前端开发者提供自定义属性，这些属性可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。
7.如果把html5看作一个开放平台，那它的构建模块有哪些？
Web Storage API
基于位置服务的LBS
无插件播放音频、视频
调用相机和GPU图像树立单元等硬件设备
拖拽和Form API
8.请描述cookies、sessionStorage、localStorage的区别
描述：
cookies数据始终在同源的http请求中携带，在浏览器和服务器间来回传递。多用于网站标示用户是否登录等。
sessionStorage和localStorage不会把缓存的数据自动发给服务器，仅在本地保存。
存储大小：
cookies数据大小不能超过4k。
sessionStorage和localStorage缓存也有存储大小限制，但比cookies大得多，可以达到5M或更大。
缓存有效时间：
cookies在设置cookie过期时间之前一直有效，即使窗口关闭或浏览器关闭。
sessionStorage缓存的数据在窗口关闭或浏览器关闭时自动清除。
localStorage永久存储数据，除非主动删除。
作用域：
cookies在所有同源窗口内都是共享的。
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。
localStorage在所有同源窗口内共享。
9.src和href的区别
src指向外部资源的位置，用户替换当前元素，比如js脚本，图片等元素
href指向网络资源所在位置，用户当前薇恩当和引用资源间确定关系，加载css
10.HTML和XHTML的区别？
XHTML元素必须被正确的关闭
XHTML元素必须被关闭
标签名必须用小写字母（XHTML规范定义：标签名和属性对大小写敏感）
XHTML文档必须拥有根元素（所有的 XHTML 元素必须被嵌套于 <html> 根元素中）
11.页面导入样式时，使用link和@import有什么区别？
link：属于html标签，除了加载css外，还能用于定义RSS，定义rel连接属性等作用。无兼容性问题。在页面被加载时，link会同时被加载。
@import：css提供的，只能用于加载css样式。兼容IE5以上。@import引用的css样式会等到页面被加载完再加载。
12.介绍一下对浏览器内核的理解
主要分成两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
