✔：代表经常提问
❌：代表基本不会提问，了解即可
1、src和href的区别✔
src和href都是用来引用外部的资源
-
src
- 表示对资源的引用，指向的内容会嵌入到当前标签所在的位置
- 指向的资源下载并应⽤到⽂档内，如请求js脚本
- 堵塞解析，所以⼀般js脚本会放在页面底部
-
href
-
表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系
-
不会堵塞，停⽌对当前⽂档的处理
-
2、对HTML语义化的理解✔
- 有利于SEO
- 可读性更强，结构更清晰
- 方便视障人群使用阅读
3、<!DOCTYPE html>(⽂档类型) 的作⽤✔
-
告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档
-
标准模式、兼容模式两种模式
-
加了是按标准模式解析
4、script标签中defer和async的区别✔
解析到脚本时，都是异步执行，它们都不会阻塞页面的解析
- defe
- 异步加载脚本，等到文档所有元素解析完成之后才执行，DOMContentLoaded事件执行之前
- 如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
- async
- 使得script脚本异步的加载并在允许的情况下执行
- async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。
5、常⽤的meta标签有哪些❌
charset，用来描述HTML文档的编码类型keywords，页面关键词description，页面描述refresh，页面重定向和刷新viewport，适配移动端，可以控制视口的大小和比例
6、HTML5有哪些更新❌
-
语义化标签
-
媒体标签
-
表单
-
progress标签
-
DOM查询操作
- document.querySelector()
- document.querySelectorAll()
-
Web存储
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。
8、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？✔
- 行内元素有：
a b span img input select strong； - 块级元素有：
div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p； - 空元素(没有内容的HTML元素)有：
br、meta、hr、link、input、img
9、说一下 web worker✔
web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。
并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建 web worker：
- 检测浏览器对于 web worker 的支持性
- 创建 web worker 文件（js，回传函数等）
- 创建 web worker 对象
10、HTML5的离线储存怎么使用，它的工作原理是什么❌
-
离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
-
原理：HTML5的离线存储是基于一个新建的
.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示 -
总结：
这东西固然能再一定程度上让页面加速渲染，但所有缓存技术带来的问题也不言而喻，对开发者相当不友好，比如你改了css或者js，无法及时看到更新效果。并且缓存网站资源的话原本浏览器的缓存机制（304）已经很好了，没必要再使用 manifest 做缓存；实际上因为使用反响并不好，W3C正在废弃manifest。
编辑 | sishen
来源 | 前端兔
审核 | @前端兔
公众号 | 前端兔（关注公众号查看更多前端知识分享~~）
