1、src和href的区别

src和href都是用来引用外部的资源

• src
  • 表示对资源的引用，指向的内容会嵌入到当前标签所在的位置
  • 指向的资源下载并应⽤到⽂档内，如请求js脚本
  • 堵塞解析，所以⼀般js脚本会放在页面底部
• href
  • 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系
  • 不会堵塞，停⽌对当前⽂档的处理

2、对HTML语义化的理解

• 有利于SEO
• 可读性更强，结构更清晰
• 方便视障人群使用阅读

3、(文档类型) 的作用

• 告诉浏览器（解析器）应该以什么样（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：

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

10、HTML5的离线储存怎么使用，它的工作原理是什么（了解即可）

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

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

• 总结：

  这东西固然能再一定程度上让页面加速渲染，但所有缓存技术带来的问题也不言而喻，对开发者相当不友好，比如你改了css或者js，无法及时看到更新效果。并且缓存网站资源的话原本浏览器的缓存机制（304）已经很好了，没必要再使用 manifest 做缓存；实际上因为使用反响并不好，W3C正在废弃manifest。

END

编辑 | sishen

来源 | 前端兔

审核 | @前端兔 

公众号 | 前端兔