前端面经 之html5相关面经收集与总结

HTML面经

1. src和href的区别

src和href都是⽤来引⽤外部的资源，它们的区别如下：

• src： 表示对资源的引⽤，它指向的内容会嵌⼊到当前标签所在的位置。src会将其指向的资源下载 并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将 该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在⻚⾯底部。
• href： 表示超⽂本引⽤，它指向⼀些⽹络资源，建⽴和当前元素或本⽂档的链接关系。当浏览器识 别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常⽤在a、link等标签 上。

2. 对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是⽤正确的 标签做正确的事情。

语义化的优点如下：

• 对机器友好，带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，有利于SEO。除此 之外，语义类还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录；
• 对开发者友好，使⽤语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出⽹⻚的结构，便于团队的开发与维护。

常⻅的语义化标签：

<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块（有语义化的div）
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部

3. DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中⼀种标准通⽤标记语⾔的⽂档类型声明，它的⽬的是告诉浏览器（解析器）应该以什 么样（html或xhtml）的⽂档类型定义来解析⽂档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染⻚⾯的两种模式（可通过document.compatMode获取，⽐如，语雀官⽹的⽂档类型 是CSS1Compat）：

• CSS1Compat：标准模式（Strick mode），默认模式，浏览器使⽤W3C的标准解析渲染⻚⾯。在标 准模式中，浏览器以其⽀持的最⾼标准呈现⻚⾯。
• BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。在 怪异模式中，⻚⾯以⼀种⽐较宽松的向后兼容的⽅式显示。

4. script标签中defer和async的区别

如果没有defer或async属性，浏览器会⽴即加载并执⾏相应的脚本。它不会等待后续加载的⽂档元素， 读取到就会开始加载和执⾏，这样就阻塞了后续⽂档的加载。

下图可以直观的看出三者之间的区别:

其中蓝⾊代表js脚本⽹络加载时间，红⾊代表js脚本执⾏时间，绿⾊代表html解析。

defer 和 async属性都是去异步加载外部的JS脚本⽂件，它们都不会阻塞⻚⾯的解析，其区别如下：

• 执⾏顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载 顺序执⾏；
• 脚本是否并⾏执⾏：async属性，表示 后续⽂档的加载和执⾏与js脚本的加载和执⾏是并⾏进⾏ 的，即异步执⾏；defer属性，加载后续⽂档的过程和js脚本的加载(此时仅加载不执⾏)是并⾏进 ⾏的(异步)，js脚本需要等到⽂档所有元素解析完成之后才执⾏，DOMContentLoaded事件触发执⾏之前。

5. 常⽤的meta标签有哪些

meta 标签由 name 和 content 属性定义，⽤来描述⽹⻚⽂档的属性，⽐如⽹⻚的作者，⽹⻚描 述，关键词等，除了HTTP标准固定了⼀些name作为⼤家使⽤的共识，开发者还可以⾃定义name。

常⽤的meta标签：

（1）charset，⽤来描述HTML⽂档的编码类型：

<meta charset="UTF-8" >

（2） keywords，⻚⾯关键词：

<meta name="keywords" content="关键词" />

（3）description，⻚⾯描述：

<meta name="description" content="⻚⾯描述内容" />

（4）refresh，⻚⾯重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视⼝的⼤⼩和⽐例：

<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">

其中，content 参数有以下⼏种：

• width viewport ：宽度(数值/device-width)
• height viewport ：⾼度(数值/device-height)
• initial-scale ：初始缩放⽐例
• maximum-scale ：最⼤缩放⽐例
• minimum-scale ：最⼩缩放⽐例
• user-scalable ：是否允许⽤户缩放(yes/no）

（6）搜索引擎索引⽅式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下⼏种：

• all：⽂件将被检索，且⻚⾯上的链接可以被查询；
• none：⽂件将不被检索，且⻚⾯上的链接不可以被查询；
• index：⽂件将被检索；
• follow：⻚⾯上的链接可以被查询；
• noindex：⽂件将不被检索；
• nofollow：⻚⾯上的链接不可以被查询。

6. HTML5有哪些更新

6.1 语义化标签

• header：定义⽂档的⻚眉（头部）；
• nav：定义导航链接的部分；
• footer：定义⽂档或节的⻚脚（底部）；
• article：定义⽂章内容；
• section：定义⽂档中的节（section、区段）；
• aside：定义其所处内容之外的内容（侧边）；

6.2 媒体标签

（1） audio：⾳频

<audio src='' controls autoplay loop='true'></audio>

属性：

• controls 控制⾯板
• autoplay ⾃动播放
• loop=‘true’ 循环播放

（2）video视频

<video src='' poster='imgs/aa.jpg' controls></video>

属性：

• poster：指定视频还没有完全下载完毕，或者⽤户还没有点击播放前显示的封⾯。默认显示当前视 频⽂件的第⼀针画⾯，当然通过poster也可以⾃⼰指定。
• controls 控制⾯板
• width
• height

（3）source标签 因为浏览器对视频格式⽀持程度不⼀样，为了能够兼容不同的浏览器，可以通过 source来指定视频源。

<video>
    <source src='aa.flv' type='video/flv'></source>
	<source src='aa.mp4' type='video/mp4'></source>
</video>

6.3 表单

表单类型：

• email ：能够验证当前输⼊的邮箱地址是否合法 url ： 验证URL
• number ： 只能输⼊数字，其他输⼊不了，⽽且⾃带上下增⼤减⼩箭头，max属性可以设置为最⼤ 值，min可以设置为最⼩值，value为默认值。
• search ： 输⼊框后⾯会给提供⼀个⼩叉，可以删除输⼊的内容，更加⼈性化。
• range ： 可以提供给⼀个范围，其中可以设置max和min以及value，其中value属性可以设置为 默认值
• color ： 提供了⼀个颜⾊拾取器 time ： 时分秒
• data ： ⽇期选择年⽉⽇
• datatime ： 时间和⽇期(⽬前只有Safari⽀持)
• datatime-local ：⽇期时间控件
• week ：周控件
• month：⽉控件

表单属性：

• placeholder ：提示信息
• autofocus ：⾃动获取焦点
• autocomplete=“on” 或者 autocomplete=“off” 使⽤这个属性需要有两个前提：
  • 表单必须提交过
  • 必须有name属性。
• required：要求输⼊框不能为空，必须有值才能够提交。
• pattern=" " ⾥⾯写⼊想要的正则模式，例如⼿机号patte=“^(+86)?\d{10}$”
• multiple：可以选择多个⽂件或者多个邮箱
• form=" form表单的ID"

表单事件：

• oninput 每当input⾥的输⼊框内容发⽣变化都会触发此事件。
• oninvalid 当验证不通过时触发此事件。

6.4 进度条、度量器

• progress标签：⽤来表示任务的进度（IE、Safari不⽀持），max⽤来表示任务的进度，value表 示已完成多少
• meter属性：⽤来显示剩余容量或剩余库存（IE、Safari不⽀持）
• high/low：规定被视作⾼/低的范围
• max/min：规定最⼤/⼩值
• value：规定当前度量值
• 设置规则：min < low < high < max

6.5 DOM查询操作 ^

• document.querySelector()
• document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6.6 Web存储

HTML5 提供了两种在客户端存储数据的新⽅法：

• localStorage: 本地存储 - 没有时间限制的数据存储
• sessionStorage ：会话存储 - 针对⼀个 session 的数据存储

7. img的srcset属性的作⽤？

响应式⻚⾯中经常⽤到根据屏幕密度设置不同的图⽚。这时就⽤到了 img 标签的srcset属性。srcset 属性⽤于设置不同屏幕密度下，img 会⾃动加载不同的图⽚。⽤法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使⽤上⾯的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载 image-256.png。

按照上⾯的实现，不同的屏幕密度都要设置图⽚地址，⽬前的屏幕密度有1x,2x,3x,4x四种，如果每⼀ 个图⽚都设置4张图⽚，加载就会很慢。所以就有了新的srcset标准。代码如下：

<img src="image-128.png"
 srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
 sizes="(max-width: 360px) 340px, 128px" />

其中**srcset指定图⽚的地址和对应的图⽚质量**。**sizes⽤来设置图⽚的尺⼨零界点。**对于 srcset 中 的 w 单位，可以理解成图⽚质量。如果可视区域⼩于这个质量的值，就可以使⽤。浏览器会⾃动选择⼀ 个最⼩的可⽤图⽚。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px, 如果视区宽度⼤于360px, 则显示340px。

8. ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• ⾏内元素有：a b span img input select strong；
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

• 常⻅的有：
  、

  ---

  、、、、；

9. 说⼀下 web worker

在 HTML ⻚⾯中，如果在执⾏脚本时，⻚⾯的状态是不可响应的，直到脚本执⾏完成后，⻚⾯才变成可响应。web worker 是运⾏在后台的 js，独⽴于其他脚本，不会影响⻚⾯的性能。 并且通过 postMessage 将结果回传到主线程。这样在进⾏复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

1. 检测浏览器对于 web worker 的⽀持性
2. 创建 web worker ⽂件（js，回传函数等）
3. 创建 web worker 对象

10. HTML5的离线储存怎么使⽤，它的⼯作原理是什么

离线存储指的是：在⽤户没有与因特⽹连接时，可以正常访问站点或应⽤，在⽤户与因特⽹连接时，更新 ⽤户机器上的缓存⽂件。

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

使⽤⽅法：

(1）创建⼀个和 html 同名的 manifest ⽂件，然后在⻚⾯头部加⼊ manifest 属 性

<html lang="en" manifest="index.manifest">

（2）在 cache.manifest ⽂件中编写需要离线存储的资源：

CACHE MANIFEST
 #v0.11
 CACHE:
 js/app.js
 css/style.css
 NETWORK:
 resourse/logo.png
 FALLBACK:
 / /offline.html

• CACHE: 表示需要离线存储的资源列表，由于包含 manifest ⽂件的⻚⾯将被⾃动离线存储，所以 不需要把⻚⾯⾃身也列出来。
• NETWORK: 表示在它下⾯列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以 在离线情况下⽆法使⽤这些资源。不过，如果在 CACHE 和 NETWORK 中有⼀个相同的资源，那么 这个资源还是会被离线存储，也就是说 CACHE 的优先级更⾼。
• FALLBACK: 表示如果访问第⼀个资源失败，那么就使⽤第⼆个资源来替换他，⽐如上⾯这个⽂件表 示的就是如果访问根⽬录下任何⼀个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进⾏离线缓存的操作。

如何更新缓存：

（1）更新 manifest ⽂件

（2）通过 javascript 操作

（3）清除浏览器缓存

注意事项：

（1）浏览器对缓存数据的容量限制可能不太⼀样（某些浏览器设置的限制是每个站点 5MB）。

（2）如果 manifest ⽂件，或者内部列举的某⼀个⽂件不能正常下载，整个更新过程都将失败，浏览 器继续全部使⽤⽼的缓存。

（3）引⽤ manifest 的 html 必须与 manifest ⽂件同源，在同⼀个域下。

（4）FALLBACK 中的资源必须和 manifest ⽂件同源。

（5）当⼀个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

（6）站点中的其他⻚⾯即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

（7）当 manifest ⽂件发⽣改变时，资源请求本身也会触发更新。

11. 浏览器是如何对 HTML5 的离线储存资源进⾏管理和加载？

• **在线的情况下，**浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是 第⼀次访问⻚⾯ ，那么浏览器就会根据 manifest ⽂件的内容下载相应的资源并且进⾏离线存 储。如果已经访问过⻚⾯并且资源已经进⾏离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯， 然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做 任何操作，如果⽂件改变了，就会重新下载⽂件中的资源并进⾏离线存储。
• 离线的情况下，浏览器会直接使⽤离线存储的资源。

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

• strong标签有语义，是起到加重语⽓的效果，⽽b标签是没有的，b标签只是⼀个简单加粗标签。b 标签之间的字符都设为粗体，strong标签加强字符的语⽓都是通过粗体来实现的，⽽搜索引擎更侧 重strong标签。
• title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对⻚⾯信息的抓取有很⼤的影 响
• i内容展示为斜体，em表示强调的⽂本

13. iframe 有那些优点和缺点？

iframe 元素会创建包含另外⼀个⽂档的内联框架（即⾏内框架）。

优点：

• ⽤来加载速度较慢的内容（如⼴告）

• 可以使脚本可以并⾏下载

• 可以实现跨⼦域通信

缺点：

• iframe 会阻塞主⻚⾯的 onload 事件
• ⽆法被⼀些搜索引擎索识别
• 会产⽣很多⻚⾯，不容易管理

14 label 的作⽤是什么？如何使⽤？

label标签来定义表单控件的关系：当⽤户选择label标签时，浏览器会⾃动将焦点转到和label标签相 关的表单控件上。

• 使⽤⽅法1：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

• **使⽤⽅法2：**推荐

<label>Date:<input type="text"/></label>

15 head 标签有什么作⽤，其中什么标签必不可少？

标签⽤于定义⽂档的头部，它是所有头部元素的容器。 中的元素可以引⽤脚本、指示浏览器在哪⾥找 到样式表、提供元信息等。

⽂档的头部描述了⽂档的各种属性和信息，包括⽂档的标题、在 Web 中的位置以及和其他⽂档的关系 等。绝⼤多数⽂档头部包含的数据都不会真正作为内容显示给读者。

下⾯这些标签可⽤在 head 部分：, , ,

其中 title定义⽂档的标题，它是 head 部分中唯⼀必需的元素。

16. ⽂档声明（Doctype）和有何作⽤? 严格模式 与混杂模式如何区分？它们有何意义?

⽂档声明的作⽤： ⽂档声明是为了告诉浏览器，当前 HTML⽂档使⽤什么版本的HTML来写的，这样浏览 器才能按照声明的版本来正确的解析。

作⽤： <!doctype html>的作⽤就是让浏览器进⼊标准模式，使⽤最新的 HTML5 标准来解析渲 染⻚⾯；如果不写，浏览器就会进⼊混杂模式，我们需要避免此类情况发⽣。

严格模式与混杂模式的区分：

• 严格模式： ⼜称为标准模式，指浏览器按照W3C标准解析代码；
• 混杂模式： ⼜称怪异模式、兼容模式，是指浏览器⽤⾃⼰的⽅式解析代码。混杂模式通常模拟⽼式 浏览器的⾏为，以防⽌⽼站点⽆法⼯作；

区分：⽹⻚中的DTD，直接影响到使⽤的是严格模式还是浏览模式，可以说DTD的使⽤与这两种⽅式的区 别息息相关。

• 如果⽂档包含严格的DOCTYPE ，那么它⼀般以严格模式呈现（严格DTD——严格模式）； 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD ⽽没有 URI （统 ⼀资源标识符，就是声明最后的地址）会导致⻚⾯以混杂模式呈现（有 URI 的过渡 DTD ——严格模 式；没有 URI 的过渡 DTD ——混杂模式）；
• DOCTYPE 不存在或形式不正确会导致⽂档以混杂模式呈现（DTD不存在或者格式不正确——混杂模 式）；
• HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的 法，实现 时，已经尽可能⼤的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统⼀执⾏⼀套规范兼容模式保证了旧⽹站的正常运⾏。

17. 浏览器乱码的原因是什么？如何解决？

产⽣乱码的原因：

• ⽹⻚源代码是gbk的编码，⽽内容中的中⽂字是utf-8编码的，这样浏览器打开即会出现html乱 码，反之也会出现乱码；
• html⽹⻚编码是gbk，⽽程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
• 浏览器不能⾃动检测⽹⻚编码，造成⽹⻚乱码。

解决办法：

• 使⽤软件编辑HTML⽹⻚内容；
• 如果⽹⻚设置编码是gbk，⽽数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显 示数据前进程序转码；
• 如果浏览器浏览时候出现⽹⻚乱码，在浏览器中找到转换编码的菜单进⾏转换。

18. 渐进增强和优雅降级之间的区别

（1）渐进增强（progressive enhancement）：主要是针对低版本的浏览器进⾏⻚⾯重构，保证基 本的功能情况下，再针对⾼级浏览器进⾏效果、交互等⽅⾯的改进和追加功能，以达到更好的⽤户体验。

（2）优雅降级 graceful degradation： ⼀开始就构建完整的功能，然后再针对低版本的浏览器进 ⾏兼容。

Vue2的源码中，nextTick中用到了优雅降级。可以参考我的vue源码的博客

两者区别：

• 优雅降级是从复杂的现状开始的，并试图减少⽤户体验的供给；⽽渐进增强是从⼀个⾮常基础的，能 够起作⽤的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
• 降级（功能衰竭）意味着往回看，⽽渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最⾼级、最完善的浏览器来设计⽹站。⽽将那些被认为“过时”或有功 能缺失的浏览器下的测试⼯作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、 Mozilla等）的前⼀个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却⽆妨 (poor, but passable)” 的浏览体验。可以做⼀些⼩的调整来适应某个特定的浏览器。但由于它们并 ⾮我们所关注的焦点，因此除了修复较⼤的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建⽴⽹站的诱因，有的⽹站展示它，有的则收集它， 有的寻求，有的操作，还有的⽹站甚⾄会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐 进增强”成为⼀种更为合理的设计范例。这也是它⽴即被 Yahoo 所采纳并⽤以构建其“分级式浏览器⽀ 持 (Graded Browser Support)”策略的原因所在

说⼀下 HTML5 drag API

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
• dragenter：事件主体是⽬标元素，在被拖放元素进⼊某元素时触发。
• dragover：事件主体是⽬标元素，在被拖放在某元素内移动时触发。
• dragleave：事件主体是⽬标元素，在被拖放元素移出⽬标元素是触发。
• drop：事件主体是⽬标元素，在⽬标元素完全接受被拖放元素时触发。
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发