HTML5是前端开发人员必须掌握的技能之一，那么在面试时，面试官常问到的HTML5的问题有哪些呢？

青岛HTML5

1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

答：告知浏览器的解析器，用什么文档类型规范来解析这个文档。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

2、HTML5为什么只需要写？

答：这个标签是表明此网页是HTML5格式，让浏览器能以HTML5解析，否则就以兼容模式解析(HTML4以下)

3、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea。

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote。

空元素：br、meta、hr、link、input、img等。

4、页面导入样式时，使用link和@import有什么区别？

答：(1)link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS。

(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。

(3)import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

5、介绍一下你对浏览器内核的理解？

答：主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行JS来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

6、常见的浏览器内核有哪些？

答：1、Trident内核：IE最先开发或使用的， 360浏览器；

2、Webkit内核：谷歌chrome浏览器，枫树浏览器；

3、Gecko内核： Netscape6开始采用的内核，Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器；

4、Presto内核：目前只有Opera浏览器采用该内核

7、HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

答：HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

内容元素：article、footer、header、nav、section。

表单控件：calendar、date、time、email、url、search。

控件元素：webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

处理兼容问题有两种方式：

(1)IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

(2)使用是HTML5shim框架

8、如何区分HTML和HTML5？

答：DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，还可以根据新增的结构、功能元素来区分。

9、简述一下你对HTML语义化的理解？

答：根据内容的结构化(内容语义化)，选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化的优势：清晰的页面结构、支持更多的设备、有利于SEO、便于团队开发和维护。

10、HTML5的离线储存怎么使用，工作原理能不能解释一下？

答：(1)页面头部像下面一样加入一个manifest的属性；

(2)在cache.manifest文件的编写离线存储的资源；

(3)在离线状态时，操作window.applicationCache进行需求实现。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。