在HTML 概览中简要讨论了属性；现在是深入研究的时候了。
属性是使 HTML 如此强大的原因。属性是在开始标记中以空格分隔的名称和名称/值对，它们提供有关元素的信息和功能。
属性定义了元素的行为、链接和功能。有些属性是全局属性，这意味着它们可以出现在任何元素的开始标记中。其他属性适用于多个元素但并非全部，而另一些属性是元素特定的，仅与单个元素相关。在 HTML 中，除了布尔属性和某种程度上的枚举属性外，所有属性都需要一个值。
如果属性值包含空格或特殊字符，则该值必须用引号引起来。出于这个原因，并且为了提高可读性，始终建议使用引号。
虽然 HTML 不区分大小写，但某些属性值区分大小写。属于 HTML 规范一部分的值不区分大小写。定义的字符串值（例如 class 和 id 名称）区分大小写。如果属性值在 HTML 中区分大小写，则当在 CSS 和 JavaScript 中用作属性选择器的一部分时，它也区分大小写；否则，它不区分大小写。
布尔属性
如果存在布尔属性，则它始终为 true。布尔属性包括 autofocus、inert、checked、disabled、required、reversed、allowfullscreen、default, loop、autoplay、controls、muted、readonly、multiple, 和 selected。如果存在这些属性中的一个（或多个），则元素被禁用、必填、只读等。如果不存在，则不是。
布尔值可以省略，设置为空字符串，或为属性的名称；但该值不必实际设置为字符串 true。true、false 和 😀 等所有值（虽然无效）都将解析为 true。
以下三个标记是等效的
如果属性值为 false，则省略该属性。如果属性为 true，则包含该属性，但不提供值。例如，required="required" 在 HTML 中不是有效值；但由于 required 是布尔值，因此无效值解析为 true。但是，由于无效的枚举属性不一定解析为与缺失值相同的值，因此养成省略值的习惯比记住哪些属性是布尔值与枚举值并可能提供无效值更容易。
在 true 和 false 之间切换时，请使用 JavaScript 完全添加和删除属性，而不是切换值。
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
请注意，在 XML 语言（如 SVG）中，所有属性都需要包含一个值，包括布尔属性。
枚举属性
枚举属性有时会与布尔属性混淆。它们是 HTML 属性，具有一组有限的预定义有效值。与布尔属性一样，如果属性存在但值缺失，它们具有默认值。例如，如果包含
尝试将 style 的 color 更改为 inherit 以外的其他值。然后尝试将 style 更改为 p 选择器。不要删除 display 属性，否则样式块将消失。
自定义属性
我们仅触及了 HTML 全局属性的表面。还有更多属性仅适用于一个或一组有限的元素。即使有数百个定义的属性，您可能仍然需要规范中没有的属性。HTML 可以满足您的需求。
您可以通过添加 data- 前缀来创建任何您想要的自定义属性。您可以将您的属性命名为任何以 data- 开头的名称，后跟任何不以 xml 开头且不包含冒号 (:) 的小写字符系列。
虽然 HTML 具有容错性，并且如果您创建不以 data 开头的非支持属性，或者即使您以 xml 开头或包含 : 开头的自定义属性，HTML 也不会中断，但创建以 data- 开头的有效自定义属性是有好处的。使用自定义数据属性，您知道您不会意外地使用现有属性名称。自定义数据属性是面向未来的。
虽然浏览器不会为任何特定的 data- 前缀属性实现默认行为，但有一个内置的 dataset API 可以迭代您的自定义属性。自定义属性是使用 JavaScript 传达应用程序特定信息的绝佳方式。以 data-name 的形式将自定义属性添加到元素，并使用元素上的 dataset[name] 通过 DOM 访问这些属性。
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
您可以使用 getAttribute() 使用完整的属性名称，或者您可以利用更简单的 dataset 属性。
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
dataset 属性返回每个元素的 data- 属性的 DOMStringMap 对象。
上有多个自定义属性。dataset 属性意味着您不需要知道这些自定义属性是什么即可访问它们的名称和值for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
本文中的属性是全局属性，这意味着它们可以应用于任何 HTML 元素（尽管并非所有属性都对这些元素有影响）。接下来，我们将深入研究链接，了解我们未解决的介绍图像中的两个属性 - target 和 href - 以及其他几个元素特定的属性。
检查您的理解情况
测试您对属性的知识。
id 在文档中应该是唯一的。
错误
再试一次。
正确
正确！
选择格式正确的自定义属性。
data-birthday
正确
birthday
再试一次。
data:birthday
再试一次