1. HTML 基本常识

卷首语

不要温和地走进那个良夜 ── 狄兰 托马斯 (英)

Do not go gentle into that good night

1. html简介

HTML（HyperText Markup Language，超文本标记语言） 是一种描述语言，用来定义网页结构。 ── MDN

HTML文档是一个树形结构（除开DOCTYPE元素），由HTML元素组成。

2. HTML 元素

元素由以下部分组成:

• 开始标签
• 结束标签
• 内容
• 属性

<p class="nice">Hello world</p>

3. HTML 属性

HTML 属性用于提供一些附加信息，这些信息用于控制浏览器对元素的解析。

属性分为两类:

• 标准属性
  • HTML规范定义的属性
• 自定义属性
  • 由开发者自定义的属性，规范推荐自定义的属性以 data- 开头

a. attribute

在HTML中，attribute 包含了 标准属性和自定义属性 。在 DOM API 中，HTML元素所有的属性会放在对应元素对象的 attributes 属性中 (这是一个 Map , 其中保存了该元素所有的属性节点)。

b. property

JavaScript原生对象的属性称为 property 。每个标准属性都会在对应元素对象中有一个 property 与之对应。换句话说，标准属性在对应元素对象中有两个副本。

注：

1. 对于非布尔属性来说，通过 DOM API 无论是操作 attributes 还是 property ，其二者值都会同步改变。
2. 对于布尔属性来说，有两种情况:
   • 操作 property ， attributes 不会进行同步
   • 如果该属性初始值为 false , 操作 attributes ， property 会与之同步。但是如果初始值为 true , 则操作 attributes ，property 不会同步

浏览器渲染时，以 property 的值为依据。用户操作表单时，属性值的改变也体现在 property 上。所以对于非布尔值属性来说，无论是操作 attributes 还是 property 都是可以的，因为它们会被同步。但是对于布尔值属性来说，只能通过 DOM API 操作 property ，因为 attributes 不会与 property 同步。

c. class 属性

在HTML中，每个元素都可以有 class 属性，用以标识元素。在 DOM API 中，class 属性对应的 property 有两个。 一个是 className - 一个以空格分割的字符串 ，一个是 classList - 一个类数组，其中保存了每个class值。可以方便的使用数组方法操作class 。

classList 中常用的方法有三个:

• add(className: string)
• remove(className: string)
• toggle(className: string)
  • 如果当前类名存在，删除该类名。如果不存在，添加该类名

d. 自定义属性

如果自定义属性不以 data- 开头，那么在 DOM API 中只能通过 setAttribute 系列来操作该自定义属性。

如果自定义属性以 data- 开头， DOM API 中提供了一个 property ── dataset(一个map，用于保存以 data- 开头的自定义属性，其key不包含 data-)

4. DOCTYPE

DOCTYPE 是文档类型声明，它位于HTML文档的最前面的位置，位于根元素 html 的起始标签前面。浏览器依据 DOCTYPE 来决定当前文档的类型，以决定其采取的渲染模式。

a. 渲染模式

获取当前渲染模式的 API: document.compatMode - 取值有两种(CSS1Compat - 标准模式， BackCompat - 怪异模式)。在 IE 9 以上的现代浏览器中，不同渲染模式之间的差异极小。在 IE7 8 9 中，理论上存在怪异模式，实际只有标准模式。在 IE 6 中，标准模式和怪异模式的渲染区别最大（不会兼容了，了解一下）。IE 6 以下的浏览器只有怪异模式。