一、HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、 HTML5 为什么只需要写 !DOCTYPE HTML？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、 iframe框架有那些优缺点？
07、 HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
08、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
11、 title与h1的区别、b与strong的区别、i与em的区别？12、 元素的alt和title有什么异同？01、Doctype作用？标准模式与兼容模式各有什么区别?
01、Doctype作用？标准模式与兼容模式各有什么区别?
* !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
* 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
02、HTML5 为什么只需要写 !DOCTYPE HTML？
* HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
* 行内元素：a span img input select
* 块级元素：div ul ol li dl dt dd h1 p
* 空元素：<br> <hr> <link> <meta>
04、页面导入样式时，使用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使用时候需要<style type="text/css">标签
05、介绍一下你对浏览器内核的理解？ 常见的浏览器内核有哪些？
* 主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
* 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
* JS引擎：解析和执行javascript来实现网页的动态效果。
* Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)
06、 iframe框架有那些优缺点？
* 优点：
* iframe能够原封不动的把嵌入的网页展现出来。
* 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
* 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
* 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
* 缺点：
* 搜索引擎的爬虫程序无法解读这种页面
* 框架结构中出现各种滚动条
* 使用框架结构时，保证设置正确的导航链接。
* iframe页面会增加服务器的http请求
* *iframe会阻塞主页面的Onload事件；
* *搜索引擎的检索程序无法解读这种页面，不利于SEO;
* *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
* 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
* 动态给iframe添加src属性值，这样可以绕开以上两个问题。
07、 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声明的方式是区分重要因素
* 根据新增加的结构、功能来区分
08、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
* 共同点：都是保存在浏览器端，且是同源的。
* 区别:
1. cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
2. 存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
3. 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
4. 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享
09、简述一下你对HTML语义化的理解？
* 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
* 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
* 方便其它设备解析。
* 便于团队开发和维护，语义化根据可读性
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
* 在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，
* 在页面头部加入manifest属性
* <html manifest='cache.manifest'>
* 在cache.manifest文件中编写离线存储的资源
* CACHE MANIFEST#v0.11CACHE:
js/app.jscss/style.cssNETWORK:
Resourse/logo.pngFALLBACK:
//offline.html
- title与h1的区别、b与strong的区别、i与em的区别？
- title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
- strong标明重点内容，语气加强含义；b是无意义的视觉表示
- em表示强调文本；i是斜体，是无意义的视觉表示
- 视觉样式标签：b i u s
- 语义样式标签：strong em ins del code
- 元素的alt和title有什么异同？
- 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
![Javascript构建Bingo卡片游戏[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)