Html相关笔记记录

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

   1. 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档

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

   1. HTML超文本标记语言：

   2. XML可扩展标记语言：主要用于存储数据和结构（可自定义标签，有且只有一个根标签，大小写敏感，必须闭合标签）

   3. XHTML 可扩展超文本标记语言

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

   1. data-开头的属性作用：往标签上存储一些数据（Dom操作的思想）

   2. dataset读取语法：mydiv.dataset.name 读取mydiv标签的name属性。

   3. eg:

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

   1. 利于seo优化：机器阅读

   2. 可阅读性好：可读性性明显增强，开发者可以比较明显和清晰地看出网页结构，利于开发工作

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

   1. 不同点：

      1. ①html5统一标准，语法更标准，

      2. ②增加新的标签元素（功能【canvas，vidao，progress】，语义化【header，footer】），

      3. ③input支持新的类型值，

      4. ④新增一些新的标签属性（charset【meta设置字符集】，async【页面异步加载】），

      5. ⑤新增api（本地存储），地理定位，canvas绘图

      6. ⑥新增的全局属性（contenteditable让内容可编辑，draggable可拖拽，draggable必须=true）

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

   1. 设置网页关键词SEO：

   2. 设置网页视口viewport：

   3. 设置http相应头：

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

   1. 考点：处理响应式图片的方式。

   2. img通过srcset属性，可定义一组额外的图片集合

   3. eg:

   4. css层面通过媒体查询设置不同屏幕的背景

8. 响应式图片处理优化：Picture 标签

   1. 考察点：响应式图片处理

   2. 图像的容器，最终会将匹配到图片的路径，使用显示（在什么范围内显示什么图片，没有缩放）

   3. < picture > < /picture >

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

   1. 考察：对于网页提升性能的方法

   2. script标签存在两个属性，defer/async

   3. 理解：当script标签写在dom上面，会阻塞后面的dom结构的加载和解析

   4. defer：添加async页面直接加载，defer是等dom加载完且等上面的defer先执行，它在执行

   5. async：添加async页面直接加载，不阻塞（适用于不依赖于其他js脚本加载）

   6. eg:

   7. 区别：在脚本加载完成之后，async是立刻执行，defer是等dom加载完且等上面的defer先执行，它在执行

   8. 相同：defer和async在网络加载的过程是一致的，都是异步执行（放在页面顶部，也不会阻塞页面的加载，与页面同时加载）

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

    1. localStorage：（同步）

    2. sessionStorage：（同步）

    3. cookie：设置过期时间，太小，操作不便。js-cookie

    4. web sql： 废弃

    5. IndexedDB：使用与存储大量的数据 > 250M 无上限（异步）

11. 以上几种前端存储的区别是什么？

    1. 略