这是我参与8月更文挑战的第7天，活动详情查看： 8月更文挑战
1.src和href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系
src
指向外部资源的位置，指向的内容会嵌入到文档当前标签所在的位置；在请求src资源时会将其指向的资源下载并且应用到文档中，例如js脚本，img图片等
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直至将该资源加载、编译、执行完毕，图片等元素也是如此。这也是为什么js脚本放在底部而不是头部。
href
指向网络资源的位置，建立和当前元素或者当前文档之间的链接。
如果我们使用link标签来引入一个css样式。浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理（不阻塞解析，阻塞渲染）。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
2.对HTML语义化的理解
语义化就是顾名思义的意思，对应的标签去做对应的事。
语义化的优点有以下优点：
- 在没有css的情况下，页面也可以呈现出很好的内容结构、代码结构
- 有利于搜索引擎的优化，利于爬虫抓取更多有效的信息：爬虫依赖于标签来确定上下文和各个关键字的权重
- 便于开发与维护，更具有可读性，减少差异化。
常见的语义化标签：
<header></header>头部
<nav></nav>导航栏
<section></section>区块（由语义化的div）
<main></main>主要区域
<article></article>主要内容
<aside></aside>侧边栏
<footer></footer>底部
3.DOCTYPE（文档类型）的作用
告诉浏览器应该用什么样的文档类型定义(html/xhtml)来解析文档，不同的渲染模式会影响浏览器对CSS代码甚至是JavaScript代码的解析，它必须声明在HTML文档的第一行。
浏览器渲染页面有两种模式：
- CSS1Compat：标准模式，也是默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面
- BackCompat：怪异模式（混杂模式），浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示
4.script标签中defer和async的区别
用于处理script标签的延迟加载。如果不加这个属性，浏览器会直接加载并且执行脚本。阻塞后续DOM的解析与渲染。所以我们通常也将script标签放在最后。
defer和async属性都是去异步的加载外部的js脚本文件
我们看出以下几点：
- defer和async都是异步读取js的
- defer是等浏览器解析完文档以后再去执行js文件的，而async是等脚本加载完成以后就去直接执行的
- 多个js带defer时，js文件的执行顺序时按照顺序执行的；多个js带async时是乱序的，不能保证执行的顺序
5.常用的meta标签
meta标签是用来描述网页文档的属性，比如网页的作者、网页描述，关键字等。
常用的meta标签：
1.charset，用来描述HTML文档的编码类型：
<meta charset="UTF-8">
2.keywords，页面的关键字
<meta name="keywords" content="关键词" />
3.description，页面的描述
<meta name="description" content="页面描述内容" />
4.viewpoint，适配移动端，可以控制视口的大小和比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6.HTML5有哪些更新
- 语义化标签
- 媒体标签
- Web存储：webstorage
- DOM查询操作
document.querySelector()等 - 拖放属性，设置元素可拖放
- 进度条、度量器
- 新增的表单的属性、类型、事件
- 画布canvas、SVG矢量图
- 地理定位
7.img的srcset属性有什么作用
这个属性通常是用来在开发响应式页面时遇到不同的屏幕类型来展示不同类型的图片的。
使用方法如下：
<img src="image-128.png" srcset="image-256.png 2x" />
以上就是实现在屏幕密度为1x的时候加载image-128.png，屏幕密度为2x时加载image-256.png
注意：也可以与sizes属性搭配使用，sizes属性用来设置图片的尺寸零界点
8.行内元素、块级元素、空元素有哪些？
行内标签：span、a、img、input、strong
块级标签：div、p、li、ul、ol、h1-h6
空元素：没有内容的html元素，并且空元素没有闭合标签。br、hr、link、meta
9.说一下web worker
为JavaScript的单线程特性创造了一个多线程的环境，允许主线程创建一个worker线程，将一些任务分配给后者运行。在主线程运行的同时，worker线程在后台运行，两者互不干扰。
所以我们可以使用web worker来处理一些比较耗时的操作，再通过postmessage将结果发送给我们的主线程。这样一来在我们处理复杂逻辑时就不会阻塞主线程了。
10.HTML5的离线缓存以及工作原理
没有网络时可以正常访问站点，在用户连接网络时，更新用户及其上的缓存文件。
原理：.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。当网络处理离线状态时，浏览器会通过被离线存储的数据进行页面展示。
11.浏览器如何对HTML5的离线存储资源进行管理和加载
有网络时：如果是第一次加载页面，浏览器会根据manifest文件的内容去下载响应的资源并且进行离线存储。如果资源已经访问过，并且缓存中有记录，那么浏览器就使用离线的资源加载页面，然后浏览器会对比当前manifest中的内容与之前缓存的内容是否一致，如果一致，就不做任何操作，如果不一致，我们就重新加载文件中的资源并进行离线存储
**无网络时：**浏览器直接使用离线缓存的资源
12.head标签有什么作用？必不可少的有什么
定义文档的头部，元素可以引用脚本、引入样式表等。
头部还包含了我们网页的属性和基本信息
可以在head使用的标签：
其中定义文档的标题，是不可获取的部分
13.渐进增强和优雅降级之间的区别（多益常考）
实际上就是两种设计理念或者说是前期调研后确定开发的流程
**渐进增强：**主要针对低版本浏览器进行页面重构，保证基本功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验
优雅降级：一开始就达到极致，然后再去根据低版本的浏览器进行兼容
14.canvas和svg的区别
SVG：矢量图，基于XML描述的2D图形，有以下特点：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序
- 复杂度高会减慢渲染速度
- 不适合游戏应用
Canvas：画布，通过Javascript来绘制，是逐像素进行渲染的，其位置发生改变，就会重新进行绘制
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
15.title和h1的区别、b和strong的区别、i和em的区别？
title和h1的区别：
title是一个属性，只是用来修饰元素；title标签是在head标签里面用来表示文档的名称的；H1表示文档内层次明确的标题，三者不是一个范畴
b和strong的区别：
strong标签有语义化。有加重语气的效果，而b标签没有，只是单纯的加粗标签。strong标签更加利于搜索引擎的抓取
i和em的区别：
i内容表示为斜体，em表示情调的文本，两者虽然形式一样，当时和b与strong的区别相同
16. label 的作用是什么？如何使用？
与表单控件关联，当用户选择label标签时，浏览器会自动将焦点转到label标签相关的控件上。
使用方式：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
17.iframe有哪些优点和缺点
iframe元素会创建一个包含另外一个文档的内联框架(即行内框架)
优点：
- 用来加载速度较慢的内容
- 使脚本并行加载
- 实现跨子域通信
缺点：
- iframe 会阻塞主页面的 onload 事件
- 无法被一些搜索引擎索识别
- 会产生很多页面，不容易管理
