HTML 小知识

写在前面的，该系列题目解析，我是整合各类网上资源，做出的回答。每道题我都尽量贴图，贴 code ，以我认为的最好理解的方式展现出来。
持续更新...

doctype 有什么作用？HTML5 为什么只需要写

---

• 作用：
  概念 DOCTYPE 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 声明必须是HTML 文档的第一行，位于标签之前。
• HTML5 不基于 SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为；
  HTML4.01 基于 SGML，所以需要引用 DTD。才能告知浏览器文档所使用的文档类型，如下：
  

data- 属性有什么好处？

---

允许在标准内于HTML元素中存储额外的信息；用法很简单：
HTML语法：所有在元素上以data-开头的属性为数据属性。

      ...

JS访问语法: 获取对应元素，再使用dataset对象去获取到数据属性（是指 data- 后面部分，需要将 - 转为驼峰法）

var article = document.querySelector('#electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

注意：每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为5。
CSS访问:
可以通过 generated content 使用函数 attr() 来显示 data-parent 的内容：

article::before {
  content: attr(data-parent);
}

也同样可以在CSS中使用 属性选择器 根据data来改变样式

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

---

	cookies	sessionStorage	localStorage
存储生命周期	一般由服务器生成，可设置生效时间。如果在浏览器生成，默认关闭浏览器失效。	仅在当前会话下有效，关闭页面或者浏览器后被清除。	除非用户手动清除，否则永久保存。
存放数据大小	4k 左右	一般为 5M 左右	同←
与服务器端通信	每次都会携带在 HTTP 头部，如果过大会有性能问题	仅在浏览器中保存，不参与服务器通信	同←
易用性	源生 cookie 接口不友好，需封装在使用	源生接口可接受，也可再次封装对 Object 和 Array 有更好的兼容	同←

storage 类相关成员

成员名	方法参数	描述
length	属性	获取 storage 数量
key(n)	n：索引值	根据索引值，返回 key
getItem(key)	key：键名	根据 key，返回 value
setItem(key, value)	key：键名，value：键值	根据 key 和 value 设置数据项，如果 key 存在，则覆盖相应 value。
removeItem(key)	key：键名	删除对应的 key 的 数据项
clear()	无	清空当前 storage 对象

请描述一下