HTML 属性（无论是全局属性还是特有属性）根据功能或者使用方式又可以细分为：

1. 内容属性。
2. IDL 属性。即 Interface Description language，接口描述语言属性。
3. 布尔值属性。

3-1.布尔值属性

为了更好的理解例子，我们先来叙述一下布尔值属性。

布尔值属性指的是一些值为布尔值的内容属性。

譬如 checked、required、readonly、disabled 等。

值得声明的是，虽然布尔值属性的值是布尔值，但并不推荐以 true 或 false 来设置，譬如：

<!-- 选中 -->
<input type="checkbox" checked="true"/>
<!-- 选中 -->
<input type="checkbox" checked="false"/>

会发现，其实上面的 checkbox 都会呈选中状态。

因为控制布尔值属性的方式应该是有无该属性，譬如

<!-- 选中 -->
<input type="checkbox" checked />
<!-- 取消选中 -->
<input type="checkbox"/>

另外在 HTML5 定义了布尔值属性允许的取值：

如果属性存在，其值必须是一个空字符串（即该属性的值未分配），或者是一个大小写无关的 ASCII 字符串，该字符串与属性名严格相同，前后都没有空格。

最后总结下，布尔值属性的设置方式：

<!-- 1.❎ This is valid HTML but invalid XML. -->
<input type="checkbox" checked />

<!-- 2.❎ This maybe is valid HTML and XML, but is not recommended. It is misleading. -->
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />

<!-- 3.✅ This is valid HTML and also valid XML. -->
<input type="checkbox" checked="" />

<!-- 4.✅ This is also valid HTML and XML, but perhaps a bit verbose. -->
<input type="checkbox" checked="checked" />

3-2.内容属性

内容属性指的是需要在 HTML 元素上直接设置的属性。

以 checkbox 为例：

<input id="checkbox" type="checkbox" checked/> 中的 id 和 checked 都是内容属性。因为它们都声明在了 HTML 结构中。

在 JavaScript 中操作内容属性的方式如下：

<input id="checkbox" type="checkbox" />

// id 为 checkbox
var checkbox = document.querySelector('#checkbox')
// 由于 checked 也是布尔值属性，所以无论是true还是空字符串还是其他等等，都会生效，都会转化为字符串。
checkbox.setAttribute('checked', true)

这样执行完后，checkbox 会被选中，HTML 结构会变为:

<input id="checkbox" type="checkbox" checked="true"/>

如果想要取消选中，同样由于 checked 是布尔值属性，只能采用 removeAttribute 移除属性：

// 删除内容属性 取消选中
checkbox.removeAttribute('checked')

TIP

内容属性对应的值是一个字符串，即使其值是 boolean、number、null、undefined 等类型。

统统都会转化为字符串。

3-2.IDL属性

接口描述语言属性，顾名思义，能猜到是跟 JavaScript 相关的属性。

实际上 IDL 属性就是一个 JavaScript 属性。

同样的以 checkbox 为例：

<input type="checkbox" id="checkbox" />

var checkbox = document.querySelector('#checkbox')
// checkbox其实是一个dom对象
console.dir(checkbox)
// 其下挂载着IDL属性
console.log(checkbox.checked) // false

相对于内容属性的设置，IDL 要方便很多：

// 选中
checkbox.checked = true
// 取消选中
checkbox.checked = false

/* these can work, but not recommended */
// 选中
checkbox.checked = 1
// 取消选中
checkbox.checked = 0

TIP

内容属性能够影响到 IDL 属性的值。

IDL 属性相对于内容属性的优势有：

1. 在 IDL 属性中，布尔值属性能够使用布尔值或者隐式转换的布尔值。

2. IDL 属性能够根据用户的交互而对应改变。而内容属性并不能。（当用户手动选中或者取消选中 checkbox 时，其 checked 的 IDL 属性会随之改变，而内容属性则不。）

总而言之，在实际开发中，

• 涉及到 DOM 初始化读取的操作，推荐使用内容属性。
• 涉及到 DOM 变化的操作，推荐使用 IDL 属性。

在学习 Vue 的过程中，我认知到：

内容属性也可以称作 HTML attribute。

IDL 属性也可以称作 DOM property。

关于二者，Vue 上也提供了相关链接stackoverflow