超文本标记语言 (HTML) 是用于描述 Web 上显示的文档结构的标准化标记语言。HTML 由一系列元素和属性组成，这些元素和属性用于标记文档的所有组件，从而以有意义的方式构建文档。
HTML 文档基本上是节点树，包括 HTML 元素和文本节点。HTML 元素为文档提供语义和格式，包括创建段落、列表和表格，以及嵌入图像和表单控件。每个元素可以指定多个属性。许多元素可以包含内容，包括其他元素和文本。其他元素是空元素，其标签和属性定义其功能。
元素有多种类别，包括元数据、分节、文本、内联语义、表单、交互式、媒体、组件和脚本。我们将在本系列中介绍其中的大多数类别。但首先，什么是元素？
元素
HTML 由一系列元素组成，您可以使用这些元素来封闭或包裹内容的不同部分，使其以某种方式显示或操作。HTML 元素由标签分隔，标签使用尖括号 (< 和 >) 编写。
我们的页面标题是一级标题，我们为此使用 <h1> 标签。实际标题“机器学习研讨会”是我们元素的内容。内容位于开始和结束标签之间。整个内容（开始标签、结束标签和内容）就是一个元素。
结束标签与开始标签相同，前面加一个斜杠。
元素和标签并非完全相同，尽管许多人互换使用这两个术语。标签名称是括号中的内容。标签包括括号。在本例中，是 <h1>。“元素”是开始和结束标签，以及这两个标签之间的所有内容，包括嵌套元素。
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
此段落元素中嵌套了其他元素。嵌套元素时，务必正确嵌套它们。HTML 标签应以与打开顺序相反的顺序关闭。在上面的示例中，请注意 <em> 如何在 <strong> 开始和结束标签内同时打开和关闭，以及 <strong> 如何在 <p> 标签内同时打开和关闭。
浏览器不显示标签。标签用于解释页面的内容。
HTML 非常非常宽容。例如，如果我们省略结束 </li> 标签，则会暗示结束标签。
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
尽管不关闭 <li> 是有效的，但这不是好的做法。结束 </ul> 是强制性的。如果省略了无序列表的结束标签，浏览器将尝试确定列表和列表项的结束位置，但您可能不同意该决定。
每个元素的规范都列出了结束标签是否是强制性的。“两个标签都不可省略”在规范中意味着开始标签和结束标签都是必需的。规范提供了所有必需的结束标签的列表。
如果在前面的示例中 <em> 或 <strong> 未关闭，则浏览器可能会或可能不会为您关闭该元素。不关闭 <em> 只是会导致内容的呈现方式可能与您预期的不同。如果省略了 </ul>，并且下一个标签是列表父容器的结束标签，那么您很幸运。另一方面，如果是开始 <h1> 标签，浏览器将假定标题是列表的一部分，包括继承样式。某些省略的结束标签会导致更大的问题：不关闭某些标签，例如 <script>、<style>、<template>、<textarea> 和 <title>，会破坏后续内容，如下例所示。
某些内容意外地变为斜体或标题缩进不会毁掉您的业务。由于您忘记添加 </textarea> 而导致您的大部分内容在 200x300 文本区域中以无样式显示，或者由于您忘记关闭 </style> 而根本不显示，这会使网站无法使用。
在某些情况下，即使标记中不存在标签，浏览器也会包含元素。由于元素可以被暗示，因此即使标签不存在，元素也可能存在。即使您不添加，浏览器也会在您的内容周围添加 <body></body>，并在您的表格行周围添加 <tbody></tbody>。话虽如此，虽然省略标签是有效的，但请不要这样做。此外，如前所述，请确保它们正确嵌套。您作为标记维护者的未来以及任何其他处理您的代码库的人都会感谢您。
元素有两种类型：替换元素和非替换元素。
非替换元素
前面部分中标记的段落、标题和列表都是非替换元素。非替换元素具有开始标签和（有时是可选的）结束标签，这些标签围绕着它们，并且可能包含文本和其他标签作为子元素。这些封闭标签可以将短语或图像变成超链接，可以将句子变成标题，可以强调单词等等。
替换元素和空元素
替换元素被对象替换，无论是大多数表单控件情况下的图形用户界面 (UI) 小部件，还是大多数图像情况下的栅格或可缩放图像文件。由于被对象替换，每个对象都具有默认外观。根据对象类型和浏览器，适用的样式受到限制。例如，大多数浏览器允许对 UI 小部件和相关的伪元素进行有限的样式设置。对于栅格图像，高度、宽度、裁剪和滤镜很容易通过 CSS 完成，但仅此而已。另一方面，可缩放矢量图形使用基于 XML 的标记语言（类似于 HTML）是完全可缩放的（除非它们包含栅格图像）。它们也是完全可样式化的。请注意，从链接到嵌入 SVG 的 HTML 文件的 CSS 样式化嵌入式 SVG 的能力取决于 SVG 的设置方式。
在此示例中，两个替换元素 <img> 和 <input> 分别被非文本内容替换：图像和图形用户界面对象。
<input type="range">
<img src="switch.svg" alt="light switch">
上面 HTML 的输出
替换元素和空元素经常被混淆。空元素都是自闭合元素，并且由一个标签表示。这意味着空元素不存在结束标签。您可以选择在标签末尾包含一个斜杠，许多人发现这使标记更易于阅读。继续此示例，我们使用斜杠自闭合标签
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
末尾的斜杠是老式的：它是一种指示元素是自闭合的，并且不会有匹配的结束或关闭标签的方式。
空元素不能包含文本内容或嵌套元素。空元素包括 <br>、<col>、<embed>、<hr>、<img>、<input>、<link>、<meta>、<source>、<track> 和 <wbr> 等。
大多数替换元素都是空元素，但并非所有都是。 video、picture、object 和 iframe 元素是替换元素，但不是空元素。它们都可以包含其他元素或文本，因此它们都有结束标签。
大多数空元素都是替换元素；但同样，并非所有都是，正如我们在 base、link、param 和 meta 中看到的那样。为什么要有不能包含任何内容，而不是替换元素，因此不会在屏幕上呈现任何内容的空元素？为了提供有关内容的信息！信息由元素的属性提供。
属性
您可能已经注意到 <img> 和 <input> 示例的开始标签中不仅仅包含元素类型。这些额外的以空格分隔的名称/值对（尽管有时包含值是可选的）称为属性。属性使 HTML 变得非常强大。我们将在本系列中介绍数百个属性和属性值，但在这里我们将仅讨论它们的一般含义以及如何包含它们。
属性提供有关元素的信息。属性与开始标签的其余部分一样，不会出现在内容中，但它们确实有助于定义内容将如何显示给您的视力正常和视力障碍（辅助技术和搜索引擎）用户。
属性仅出现在开始标签中。开始标签始终以元素类型开头。类型后面可以跟零个或多个属性，属性之间用一个或多个空格分隔。大多数属性名称后跟一个等号，将其与属性值等同起来，属性值用开始和结束引号括起来。
在此示例中，我们有一个带有两个属性的锚链接。这两个属性已将内容“注册”转换为内部锚链接，当单击、点击或使用键盘或其他设备激活链接时，该链接会滚动到当前浏览器选项卡中 id="register" 属性的位置。
属性定义元素的行为、链接和功能。我们将在本系列的属性部分中介绍更多属性。现在，只需注意，某些属性是全局属性，这意味着它们可以出现在任何元素的开始标签中。有些属性仅适用于几个元素，但并非全部适用，而另一些属性是元素特定的，仅与单个元素相关。
大多数属性是名称/值对。布尔属性的值为 true、false 或与属性名称相同，可以仅作为属性包含：值不是必需的。
<img src="switch.svg" alt="light switch" ismap />
此图像具有三个属性：src、alt 和 ismap。src 属性用于提供 SVG 图像资产的位置。alt 属性提供描述图像内容的替代文本。ismap 属性是布尔值，不需要值。这只是为了解释属性是什么。我们将在图像部分中更详细地介绍这些属性。
虽然并非总是需要引用属性，但有时是需要的。如果值包含空格或特殊字符，则需要引号。因此，始终建议使用引号。如果属性值被引用，则属性之间的一个或多个空格实际上不是必需的，但为了安全起见，并且为了清晰起见，建议并赞赏使用引号和空格。
HTML 不区分大小写，但某些属性值区分大小写。规范中定义的值不区分大小写。未定义为关键字的字符串通常区分大小写，包括 id 和 class 值。
请注意，如果属性值在 HTML 中区分大小写，则在 CSS 和 JavaScript 中用作属性选择器的一部分时，它也区分大小写。
为了使标记更易于阅读，建议但不要求您在标记 HTML 时对所有元素名称和标签内的属性名称使用小写字母，并引用所有属性值。如果您听到“XHTML 样式标记”这个术语，这就是它的意思，以及末尾带有斜杠的自闭合空元素。
元素的外观
语义元素的默认外观由用户代理样式表设置。大多数浏览器为此目的使用实际的样式表，而其他浏览器则在代码中模拟它们。最终结果是相同的。尽管 HTML 规范对用户代理样式表设置了一些约束，但浏览器具有很大的自由度，这意味着浏览器之间存在一些差异。
您选择的元素，因此您使用的标签，应该适合您显示的内容，因为标签具有语义含义。语义或元素的 role 对于辅助技术以及在某些情况下对于搜索引擎很重要。HTML 应用于构建内容结构，而不是定义内容的外观。外观是 CSS 的领域。虽然许多改变内容外观的元素（例如 <h1>、<strong> 和 <em>）具有语义含义，但外观可以并且通常会通过作者样式进行更改。
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
元素、属性和 JavaScript
文档对象模型 (DOM) 是 HTML 文档的结构和内容的数据表示。当浏览器解析 HTML 时，它会为遇到的每个元素和文本部分创建一个 JavaScript 对象。这些对象分别称为节点（元素节点和文本节点）。
有一个接口用于定义每个 HTML 元素的功能。HTML DOM API 通过 DOM 提供对每个 HTML 元素的访问和控制，为 HTML 元素及其继承的所有 HTML 类提供接口。HTMLElement 接口表示 HTML 元素及其所有后代节点。每个其他元素都通过从中继承的接口实现它。每个继承接口都有一个构造函数、方法和属性。通过继承的 HTMLElement 属性，您可以访问每个全局属性，以及 input、pointer、transition 和 animation 事件。通过各个元素的子类型，例如 HTMLAnchorElement 和 HTMLImageElement，您可以访问元素特定的属性值和方法。
检查您的理解程度
测试您的 HTML 知识
HTML 元素用于样式设置。
选择替换元素。
<img><p><ul><input>选择所有正确的陈述。