前端面试题集锦（html篇）

请画出一个盒子模型图，并标出各项属性。

盒模型

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

块级元素：
div，section，ul，dl，ol，li，dt，dd，p，h1-h6, nav……
行内元素（又叫内联、内嵌元素）：
span, em, time, mark, strong, a……
常见的空元素：

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

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

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

请分别列举 5 个 HTML5 新增的元素和 5 个 CSS3 新增属性?

HTML5 新增的元素：
section，nav，time，mark，header, footer…
CSS3 新增属性：
box-shadow， text-shadow，background-size，background-clip，mask， transform，filter……

data-属性的作用是什么？

data 自定义属性，本质就是给元素添加了个自定义属性，本来没有什么特殊的，只是一个官方化的自定义属性的添加方式，在 js 中可以通过 dataset 统一管理；

通常的作用，一般我们会在 data 中存储一些和当前元素关联度比较大的数据；

一般也会用来做元素关联，比如给元素加索引。

H5哪些新API？

画布，视频，本地储存，离线储存，音频，拖放，表单，地理定位，套接字，web工作线程。

H5为什么只需要写？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

什么是H5的语义化？

使用正确的标签做正确的事情，便于团队开发和维护，结构清晰，利于SEO，加深权重特征。

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

首先来讲解下离线存储的使用方法，说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

...

//cache.manifest`文件
CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

离线存储的manifest一般由三个部分组成:

CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

**localStorage ** 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
离线存储局势将一些源代码文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法(更新相关文件或者使用相关 API)，可以更新、删除离线存储等操作。
利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减少重要信息在传输过程中被泄露，增量传输修改内容。

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

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

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

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

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

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

低版本兼容H5新标签？

html5shim.js框架，用的是document.creatElement创建标签方法

title与h1的区别、b与strong的区别、i与em的区别？

一个是物理元素:title, b, i
一个是逻辑元素: h1,strong,em

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。

i内容展示为斜体，em表示强调的文本；

Physical Style Elements -- 自然样式标签
b, i, u, s, pre

Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。

持续更新........................

部分摘录自妙味课堂