1. Doctype的作用？ 标准模式与兼容模式个有什么区别
Doctype放在html文档的第一行，告知浏览器以何种方式解析页面，规范路浏览器的行为,Doctype不存在或者格式不正确会导致页面以向后兼容的方式实现页面
标准模式下页面以浏览器的最高标准运行，兼容模式下浏览器以向后兼容的方式解析页面。
2. XML和HTML的区别
1.xml是可扩展标记语言，其前身为SGML(标准通用标记语言)。html是超文本标记语言，是www的描述语言
2.xml主要是用来处理和传输数据的，html主要是用来显示数据的
3.语法格式上xml比较严格(如标签的闭合，大小写)，html相对较为宽松。
3. HTML5为什么只需要写
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
4. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素： a,b,span,,i,img,input,strong,em,button
块级元素： 独占一行，div，p，h1-h6，ul，li，ol
常见的空元素：br,hr,img,input,meta
5. 页面导入样式时，使用link和@import有什么区别？
1.link属于xml标签，不仅仅可以加载样式文件，还可以定义ref属性链接，而@import是css提供的，只能用于加载样式
2.link支持通过js来更改样式，@import不支持
3.页面加载的时候link同时会被加载，而@import引入的样式只有在页面加载完成后才会被加载
4.@import是在css2.1里提出的，存在兼容问题，link是xml标签，不存在兼容问题
6. 介绍一下你对浏览器内核的理解？
主要分为两部分：渲染引擎和JS引擎
渲染引擎：负责获取网页的内容（html，xml，图像等），整理网页的讯息（加入css样式），以及计算页面的显示方式，然后输出显示屏上。
JS引擎：解析和执行javascript代码来实现网页的动态效果
在最初渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，浏览器内核就倾向于指向渲染引擎
7. 常见的浏览器内核有哪些？
Trident：IE，360，搜狗
Gecko： FireFox
Presto： Opera（现为blink）
webkit： chrome（现为blink），safari
blink： Opera和chrome在webkit基础上共同研发的内核
8. html5简单介绍一下，新特性，减少了那些特性
html5是html的第5次修订版本，该版本的发布极大的提高了浏览器的原生功能，减少了对浏览器对一些网络插件（如flash）的依赖，自身提供了很多新的特性。
新特性：
1.语义化标签： header，footer，nav，section
2.用于绘画的canvans和svg
3.媒介回放标签：audio，video
4.本地存储：localStorage sessionStorage
5.新的表单控件： calendar、date、time、email、url、search
6.新的技术： webworker, websocket, Geolocation
删除的元素（不常使用元素）：
纯表现的元素：basefont，big，center，font，u
对可用性产生负面影响的元素： frame，frameset，noframe
如何区分html5： Doctype声明/新增的结构元素/功能元素
9. html语义化的理解
1.用正确的标签做正确的事
2.html语义化让页面更加结构化，清晰化，便于对浏览器，搜索引擎解析
3.让页面以一种文档的形式显示（即使没有css样式的情况下），并且是容易阅读的
4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
10. html5的离线缓存，工作原理 （重点）
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
11. 浏览器是如何对html5的离线缓存资源进行管理
1.在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
2.离线的情况下，浏览器就直接使用离线存储的资源。
12. cookies，localStorage，sessionStorage
cookie：为了标记用户身份而存储在本地终端上的数据（通常都是经过加密），cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递
localStorage和sessionStorage： html5新增加的特性，只存储在本地的数据，不会自动把数据放松给服务器。
存储大小： cookie数据的大小不能超过4K localStorage每个域名的存储大小不超过5M，sessionStorage存储的更多
过期时间： cookie：cookie数据在设置的过期时间内一直有效，即使浏览器打开或关闭 localStorage： 持久性存储，页面关闭后数据不会消失 sessionStorage： 会话级别的存储，页面关闭后数据自动消失
13. label的作用？如何使用
label标签来定义表单控制间的关系，当用户点击该标签时，浏览器会自动将焦点聚焦到和标签相关的表单控件上。
使用方法：label的for属性值指向表单控件的id
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
14. html5的form如何关闭自动完成功能
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
15. 如何实现浏览器内多个标签页间的通信
1.webScoket，shareWorker
2.localStorage和sessionStorage等本地存储方式
3.localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；
16. webSocket是什么，如何兼容低版本浏览器
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
17. 在页面上实现一个圆形的可点击区域
1.map+area或者svg
2.border-radius
3.纯js实现 需要求一个点在不同圆上的简单算法，获取坐标等
18. 实现不使用border画出1px高的线，在不同浏览器下(标准模式和怪异模式)保持一致的效果
<div style='height: 1px;overflow: hidden;background: red;'></div>
19. 网页验证码的作用，解决的问题
区分用户是人还是计算机的公共全自动程序，可以防止恶意破解密码/刷票/论坛灌水
有效地防止了黑客对某一特定用户用特定的程序暴力破解方式进行的不断登陆尝试
20. title与h1的区别，b与strong的区别，i与em的区别
1.title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
2.strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而b是展示强调内容。
3.i内容展示为斜体，em表示强调的文本；
自然样式标签(Physical Style Elements): b, i, u, s, pre
语义样式标签(Semantic Style Elements): strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
