关于H5的20道⾯试题及答案
1 DOCTYPE有什么作⽤？标准模式与混杂模式如何区分？它们有何意义?
告诉浏览器使⽤哪个版本的HTML规范来渲染⽂档。DOCTYPE不存在或形式不正确会导致HTML⽂档以混杂模式呈现。
标准模式（Standards mode）以浏览器⽀持的最⾼标准运⾏；混杂模式（Quirks mode）中页⾯是⼀种⽐较宽松的向后兼容的⽅式显⽰。
2 HTML5为什么只需要写？
HTML5不基于SGML（Standard Generalized Markup Language 标准通⽤标记语⾔），因此不需要对DTD（DTD ⽂档类型定义）进⾏引⽤，但是需要DOCTYPE来规范浏览器⾏为。
HTML4.01基于SGML，所以需要引⽤DTD。才能告知浏览器⽂档所使⽤的⽂档类型，如下：
3 ⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？
⾏内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素：
4 页⾯导⼊样式时，使⽤link和@import有什么区别？
相同的地⽅，都是外部引⽤CSS⽅式，区别：
link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引⽤CSS时候，页⾯载⼊时同时加载；@import需要在页⾯完全加载以后加载，⽽且@import被引⽤的CSS会等到引⽤它的CSS⽂件被加载完才加载
link是xhtml标签，⽆兼容问题；@import是在css2.1提出来的，低版本的浏览器不⽀持
link⽀持使⽤javascript控制去改变样式，⽽@import不⽀持
link⽅式的样式的权重⾼于@import的权重
import在html使⽤时候需要标签
5 ⽆样式内容闪烁（FOUC）Flash of Unstyle Content
@import导⼊CSS⽂件会等到⽂档加载完后再加载CSS样式表。因此，在页⾯DOM加载完成到CSS导⼊完成之间会有⼀段时间页⾯上的内容是没有样式的。
解决⽅法：使⽤link标签加载CSS样式⽂件。因为link是顺序加载的，这样页⾯会等到CSS下载完之后再下载HTML⽂件，这样先布局好，就不会出现FOUC问题。
6 介绍⼀下你对浏览器内核的理解？
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎：负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊CSS等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执⾏javascript来实现⽹页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎。
7 常见的浏览器内核有哪些？
Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
Webkit：Safari Chrome
8 HTML5有哪些新特性，移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5
新增加了图像、位置、存储、多任务等功能。
新增元素：
canvas
⽤于媒介回放的video和audio元素
本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后⾃动删除
语意化更好的内容元素，⽐如 article footer header nav section
位置API：Geolocation
表单控件，calendar date time email url search
新的技术：web worker(web worker是运⾏在后台的 JavaScript，独⽴于其他脚本，不会影响页⾯的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，⽽此时 web worker 在后台运⾏) web socket
拖放API：drag、drop
移除的元素：
纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes
区分：
DOCTYPE声明的⽅式是区分重要因素
根据新增加的结构、功能来区分
9 简述⼀下你对HTML语义化的理解？
去掉或丢失样式的时候能够让页⾯呈现出清晰的结构。
有利于SEO和搜索引擎建⽴良好沟通，有助于爬⾍抓取更多的信息，爬⾍依赖于标签来确定上下⽂和各个关键字的权重。
⽅便其它设备解析。
便于团队开发和维护，语义化根据可读性。
10 HTML5的⽂件离线储存怎么使⽤，⼯作原理是什么？
在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest⽂件，如果是第⼀次访问，那么浏览器就会根据manifest⽂件的内容下载相应的资源，并进⾏离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载页⾯。然后浏览器会对⽐新的manifest⽂件与旧的manifest⽂件，如果⽂件没有发⽣改变，就不会做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源，并且进⾏离线存储。例如，
在页⾯头部加⼊manifest属性
在cache.manifest⽂件中编写离线存储的资源
CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:Resourse/logo.pngFALLBACK://offline.html
11 cookies，sessionStorage和localStorage的区别？
共同点：都是保存在浏览器端，且是同源的。
区别：
cookies是为了标识⽤户⾝份⽽存储在⽤户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，⽽sessionstorage和localstorage不会⾃动把数据发给服务器，仅在本地保存。
存储⼤⼩的限制不同。cookie保存的数据很⼩，不能超过4k，⽽sessionstorage和localstorage保存的数据⼤，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前⼀直有效，即使窗⼝或者浏览器关闭。sessionstorage仅在浏览器窗⼝关闭之前有效。localstorage始终有效，窗⼝和浏览器关闭也⼀直保存，⽤作长久数据保存。
作⽤域不同。cookie在所有的同源窗⼝都是共享；sessionstorage不在不同的浏览器共享，即使同⼀页⾯；localstorage在所有同源窗⼝都是共享
12 iframe框架有那些优缺点？
优点：
iframe能够原封不动的把嵌⼊的⽹页展现出来。
如果有多个⽹页引⽤iframe，那么你只需要修改iframe的内容，就可以实现调⽤的每⼀个页⾯内容的更改，⽅便快捷。
⽹页如果为了统⼀风格，头部和版本都是⼀样的，就可以写成⼀个页⾯，⽤iframe来嵌套，可以增加代码的可重⽤。
如果遇到加载缓慢的第三⽅内容如图标和⼴告，这些问题可以由iframe来解决。
缺点：
搜索引擎的爬⾍程序⽆法解读这种页⾯
框架结构中出现各种滚动条
使⽤框架结构时，保证设置正确的导航链接。
iframe页⾯会增加服务器的http请求
13 label的作⽤是什么? 是怎么⽤的?
label标签⽤来定义表单控件间的关系，当⽤户选择该标签时，浏览器会⾃动将焦点转到和标签相关的表单控件上。label 中有两个属性是⾮常有⽤的, FOR和ACCESSKEY。网页自动关闭
FOR属性功能：表⽰label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，
姓名
ACCESSKEY属性功能：表⽰访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，
姓名
14 HTML5的form如何关闭⾃动完成功能？
HTML的输⼊框可以拥有⾃动完成的功能，当你往输⼊框输⼊内容的时候，浏览器会从你以前的同名输⼊框的历史记录中查出类似的内容并列在输⼊框下⾯，这样就不⽤全部输⼊进去了，直接选择列表中的项⽬就可以了。但有时候我们希望关闭输⼊框的⾃动完成功能，例如当⽤户输⼊内容的时候，我们希望使⽤AJAX技术从数据库搜索并列举⽽不是在⽤户的历史记录中搜索。
⽅法：
在IE的internet选项菜单中⾥的⾃动完成⾥⾯设置
设置form输⼊框的autocomplete为on或者off来来开启输⼊框的⾃动完成功能
15 如何实现浏览器内多个标签页之间的通信?
WebSocket SharedWorker
也可以调⽤ localstorge、cookies 等本地存储⽅式。 localstorge 在另⼀个浏览上下⽂⾥被添加、修改或删除时，它都会触发⼀个事件，我们通过监听事件，控制它的值来进⾏页⾯信息通信。
注意：Safari 在⽆痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常
16 webSocket如何兼容低浏览器？
Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR
引⽤WebSocket.js这个⽂件来兼容低版本浏览器。
16 页⾯可见性（Page Visibility）API 可以有哪些⽤途？
通过visibility state的值得检测页⾯当前是否可见，以及打开⽹页的时间。
在页⾯被切换到其他后台进程时，⾃动暂停⾳乐或视频的播放。
17 如何在页⾯上实现⼀个圆形的可点击区域？
map+area或者svg
border-radius
纯js实现，⼀个点不在圆上的算法
18 实现不使⽤ border 画出1px⾼的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同⼀效果
19 ⽹页验证码是⼲嘛的，是为了解决什么安全问题？
区分⽤户是计算机还是⼈的程序;
可以防⽌恶意破解密码、刷票、论坛灌⽔；
20 title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表⽰标题；h1表⽰层次明确的标题，对页⾯信息的抓取也有很⼤的影响strong标明重点内容，语⽓加强含义；b是⽆意义的视觉表⽰
em表⽰强调⽂本；i是斜体，是⽆意义的视觉表⽰
视觉样式标签：b i u s
语义样式标签：strong em ins del code
21 元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图⽚的替代⽂字出现，title是图⽚的解释⽂字。