1. HTML 文件中的 DOCTYPE 是什么作用？

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。主要作用是告诉浏览器的解析器要使用哪种 HTML规范或 XHTML规范来解析页面。 DOCTYPE 需要放置在 HTML 文件的标签之前，如：

<!DOCTYPE html>

<html>

...

</html> (目前主流)
-----------------------------------------------------------早起和现在的DOCTYPE对比
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

...

</html> (早期)

2. HTML、XML、XHTML 之间有什么区别？

他们的共同点

XHTML 和 HTML5 的历史延展: www.cnblogs.com/my-freedom/…

有时候会听到H5工程师: 所以 HTML5 是HTML的新一代标准, 所谓的 H5 工程师这一词, 其实是国产词, 泛指新一代的web开发工程师, 具体H5工程师, 做什么工作方向, 还是要看需求 (比如: 移动端开发, PC端网页开发, H5小游戏开发....)

3. 前缀为 data- 开头的元素属性是什么？

这是一种为 HTML 元素添加额外数据信息的方式，被称为自定义属性。我们可以直接在元素标签上声明这样的数据属性：

<button id="btn" data-id="101" data-name="张三">删除</button>

自定义属性的出现，早期没有框架的时候，需要获取一些自己定义的参数时，就通过data-这种方式来获取。

  // data-开头的属性作用: 往html标签上存储一些数据 (dom操作的思想)
    let btn = document.querySelector('#btn')
    btn.addEventListener('click', function() {
      console.log('触发删除')
      console.log(this.dataset.id)
      console.log(this.dataset.name)
    })

不过现在各种框架中就直接可以进进行传参了

例如在Vue 中，直接在点击事件中传参拿到自己想要的参数

<button @click="del(item.id)">删除</button>
 methods：{
 del(id){
 }
 }

4. 谈谈你对 HTML 语义化的理解？

什么是语义化：

其实就是我在写HTML的时候，例如我要写一个button按钮，我可以用div标签来实现，也可以使用span标签来实现...方法很多，但是这样就不利于机器的对代码的解析和程序员的阅读，不能一样看出来的这是什么功能，这就是语义化

语义化的的好处

什么是HTML5 规范提倡语义化标签

p 标签就代表段落 a代表链接 article 代表正⽂内容 button 代表按钮 header 代表头部...

语义化最大的好处

1：利于SEO, 2：可阅读性更好

语义化适合内容型的网站来使用（如简书、知乎），对其⽹站内容的传播有很⼤帮助

5.HTML5 对比 HTML4 有哪些不同之处？

其实总的来说HTML增加了很多新的特性

记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API...

6. meta 标签有哪些常用用法？

标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、关键词）如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）

meta标签应用场景一般主要应用在这几个地方

设置网页关键词 (SEO)

<meta name="keywords" content="电商,好货,便宜">

设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)

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

设置 http 响应头：Content-Type 网页内容类型 (字符集)

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 设置字符集可简写为 -->

<meta charset="utf-8">

7. img 标签的 srcset 的作用是什么？

1、什么是secset

img 标签的 srcset 属性，可定义一组额外的图片集他让浏览器根据不同的屏幕状况选取合适的图片来显示

2、他能干什么

处理响应式图片的方式 (css媒体查询换的是背景图片, 而不是 img 标签的 src)，他是用来处理响应式图片，在不同的设备中，图片的大小的显示（大屏用大图，小屏用小图），从而图片不会失帧，不会导致图片的模糊

简单写法

如果你的响应式需求比较简单，只需要针对屏幕的不同来决定图片的显示的话，dpr 设备像素比, 越高, 能够显示的越清晰 (dpr: 2, dpr: 3)

那么就只要这么写：

<img srcset="320.png 1x, 640.png 2x, 960.png 3x" />

综合写法

1、srcset搭配w描述符以及sizes属性**

2、sizes 属性有两个值：

2.1. 第一个是媒体查询条件；
3.1第二个是图片对应的尺寸值，在特定媒体条件下，此值决定了图片的宽度。需要注意是，源图尺寸值不能使用百分比，如果要用100%, vw 是唯一可用的CSS单位

 <img alt="img元素srcset属性浅析"
    srcset="
      320.png 320w, 
      480.png 480w, 
      640.png 640w"
    sizes="
      (max-width: 320px) 100vw, 
      (max-width: 360px) 320px,
      (max-width: 480px) 360px,
      (max-width: 640px) 480px,
      640px"
    src="640.png"
  />

为 img 定义以上属性后，浏览器的工作流程如下：

检查设备的实际宽度
检查 img 标签的 sizes 属性中定义的媒体查询条件列表，并计算哪个条件最先匹配到
得到图片此时的响应式宽度
加载 srcset 中最接近, 最适合媒体查询匹配到的宽度的图片注意: 测试时, 清除缓存测试, 因为一旦加载了高清图, 就不会也没有必要, 回过去再用小图替换了且我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。 (译者注：srcset和size列表是对浏览器的一个建议(hint)，而非指令。由浏览器根据其能力、网络等因素来决定。)

10. 响应式图片处理优化: Picture 标签

一、什么是Picture标签

picture 元素就像是图像和其源的容器。浏览器仍然需要 img 元素，用来表明需要加载的图片在下可放置零个或多个标签、以及一个标签，为不同的屏幕设备和场景显示不同的图片。如果source匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找使用 picture 元素选择图像，不会有歧义。

二、浏览器的工作流程如下：

浏览器会先根据当前的情况，去匹配和使用提供的图片如果未匹配到合适的，就使用标签提供的图片

<!-- 图像的容器, 最终会将匹配到的图片路径, 使用显示 -->
  <!-- picture设置, 在什么范围内使用什么图 (图片响应式处理, 小屏幕使用小图, 大屏幕使用大图)-->
  <picture>
    <!-- >= 640 生效 -->
    <source srcset="640.png" media="(min-width: 640px)">
    <!-- >= 480 生效 -->
    <source srcset="480.png" media="(min-width: 480px)">
    <!-- 默认 -->
    <img src="320.png" alt="">
  </picture>

9. 在 script 标签上使用 defer 和 async 的区别是什么？

一、什么是defer和async

defer 和 async 的使用, 可以用于提升网页性能

1. <script src="example.js"></script> //没有defer或者async的情况

没有defer或async属性，浏览器会立即加载并执行相应的脚本。不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载

2. <script async src="example.js"></script>//有aysnc的情况

有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

3. <script defer src="example.js"></script>//有defer的情况

有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的(异步)，此时的js脚本仅加载不执行, js脚本的执行需要等到文档所有元素解析完成之后DOMContentLoaded事件触发执行之前。

一、defer和async的区别

1.defer和async在网络加载过程是一致的，都是异步执行的；(放在页面顶部, 也不会阻塞页面的加载, 与页面加载同时进行)

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.js"></script>
//他们是有依赖关系的element-ui依赖于vue文件，所以必须要等Vue先执行完，在加载element-ui

2.两者的区别, 脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行, 等dom的加载)

async 异步加载文件, 不会阻塞, 脚本加载完, async立刻执行 async 使用场景: 适合于不依赖于其他js文件的脚本加载
defer 异步加载文件, 不会阻塞, 脚本加载完, 不会立刻执行, 会等一等, 等dom结构的加载, 且等上面的defer的脚本先执行, 它再执行 (保证顺序) 如果有依赖关系, 用defer

11 前端做本地数据存储的方式有哪些？

一般来说常见的有五种

  1. localStorage 5M (用户不删, 一直都在,硬盘存储)
  2. sessionStorage 5M  (关闭浏览器, 会自动销毁，内存存储)
  3. cookie 4k (可以设置过期时间) 缺点: 太小, 操作不方便  插件: js-cookie
  4. web sql (废弃)  sql语句 select * from ...
  5. IndexedDB 适合于存储大量的数据 (大小 >= 250M, 且甚至没有上限)
     异步操作 (性能好)

HTML知识点理解