前端开发面试题——HTML篇（你想要的，都在这里）

HTML

DOCTYPE作用？标准模式与兼容模式各有什么区别？

1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2 标准模式中，排版和JS运作模式都是以该浏览器支持的最高标准运行；
　兼容模式中，页面以宽松的向后兼容的方式呈现，模拟老式浏览器的行为以防止站点无法工作。

HTML5为什么只要写<!DOCTYPE HTML>？

HTML5不基于SGML，因此不需要对DTD进行引用，但需要DOCTYPE来规范浏览器的行为；
而HTML4.01基于SGML，需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：a b i em span input select strong等
块级元素：h1~h6 p div ul ol dl li等
空元素：meta link br hr img input area等

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

1 link除了加载CSS之外，还能定义RSS，定义rel连接属性等作用；而@import只能加载CSS。
2 link在页面加载时同时加载；而@import引用的CSS会等到页面加载完后再加载。
3 link是XHTML标签，无兼容问题；@import是CSS提出的，IE5以上才能识别。

介绍一下你对浏览器内核的认识？

主要分成两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页内容，整理讯息，以及计算网页的显示方式，然后输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有不同，所以渲染的效果也不同。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎没有很明确的区分，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

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

1 Trident内核：IE
2 Gecko 内核：Firefox
3 Presto 内核：Opera（现为Blink）
4 Webkit 内核：Safari,Chrome (Chrome现为Blink)

HTML5有哪些新特性、移除了哪些元素？

HTML5现在已不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　绘画：canvas;
　媒体播放：video和audio元素；
　本地离线存储：localStorage和sessionStorage;
　语义化更好的元素，如article、footer、header、nav、section;
　表单控件，如calendar、date、time、email、url、search;
　新的技术，webworker,websockert,Geolocation;
移除的元素：
　纯表现的元素：big，center,font,basefont,strike,s,u;
　对可用性产生负面影响的元素：frame,frameset,noframes;

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?

IE6/7/8支持通过document.createElement方法产生的标签，可以使用这种方法来兼容，还要添加上标签默认的样式。
识别HTML5：通过DOCTYPE声明，新增的结构元素，功能元素

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

如何使用：只要在在页面头部加入mainfest的属性就行了。

<!DOCTYPE HTML>
<html manifest="cache.manifest">
……
</html>

工作原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就像cookie一样被存储下来。当无网时，浏览器会通过被离线存储的数据进行展示。

浏览器是怎么对HTML5的离线存储资源进行管理和加载的？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件。如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app，浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件和旧的manifest文件，如果发生改变就更新资源。

请描述一下cookies,sessionStorage,localStorage的区别？

cookie是网站为了标识用户身份而储存在用户本地终端的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带，即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
　cookie数据大小不能超过4k。
　sessionStorage和localStorage虽然也有存储大小限制，但比cookie大得多，有5M或更大。
有效时间：
　cookie　　　　　在cookie设置的过期时间之前一直有效，即使浏览器关闭
　sessionStorage　数据在当前浏览器窗口关闭之后自动删除
　localStorage　　存储持久数据，浏览器关闭之后数据不丢失除非主动删除数据

iframe有哪些缺点？

1 iframe会阻塞主页面的Onload事件；
2 搜索引擎的检索程序无法解读这种页面，不利于SEO;
3 iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

如果要使用iframe，最好通过javascript动态给ifarme添加src属性值，这样可以避免以上问题。

label的作用是什么？是怎么用的？

label标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="name">输入：</label>
<input type="text" name="name" id="name" />

<label>输入：<input type="text" name="name" /></label>

HTML5的from如何关闭自动完成功能？

给不想要提示的 from 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信？

WebSocket,SharedWorker;
也可以调用localStorage,cookies等本地存储方式；

localStorage在另一个浏览器上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

页面可见性（Page Visibility API）可以有哪些用途？

通过visibilityState的值检测页面当前是否可见，以及打开网页的时间等；
在页面被切换到其他后台进程的时候，自动暂停音乐或视频播放

网页验证码是干嘛的，是为了解决什么安全问题？

区分用户是人还是计算机的自动程序，可以防止恶意破解密码，刷票，论坛灌水；
有效防止黑客对某个特定用户用程序来进行暴利破解登陆。

b与strong的区别？i与em的区别？

strong是表明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong会重读，而b是展示强调内容。
i内容显示为斜体，em表示强调文本。