本教程主要参考Google 开发者网站文章和mdn文章，经过翻译整理

这门 HTML 课程面向 Web 开发者，为开发者（从新手到专家级 HTML）提供了可靠的概述。

欢迎使用 HTML！超文本标记语言 (HTML) 是网络的支柱，提供您在网络浏览器中看到的内容及其结构。

本系列文章的简介说“HTML 元素是构成文档对象模型的节点”。 我们已经讨论了元素节点的类型。在本部分中，我们将讨论用于查询这些节点的元素 API。

DOM 和 AOM

DOM 是用于访问和处理文档的 API。DOM 是文档中所有节点的树。一些节点可以包含子节点，其他节点则不可以。树状结构包含各种元素及其属性，以及文本节点。

HTML 概述中简要讨论了属性；现在，我们将进行深入探讨。

属性是让 HTML 如此强大的原因。属性是起始标记中显示的以空格分隔的名称和名称/值对，用于提供相应元素的相关信息和功能。

属性定义了元素的行为、关联和功能。有些属性是全局属性，也就是说它们可以出现在任何元素的起始标记中。其他属性适用于多个元素（但并非全部），而其他属性则特定于元素，仅与单个元素相关。在 HTML 中，除布尔值之外的所有属性以及在某种程度上枚举属性都需要值。

正如您在图片模块中学到的，HTML 支持将媒体嵌入网页。在本部分，我们将介绍音频和视频文件，包括如何嵌入它们、用户控件、为视频提供静态图片占位符，以及使音频和视频文件可供访问的最佳做法。

<audio>和<video>

<video> 和 <audio> 元素可用于通过 src 属性直接嵌入媒体播放器，也可以用作一系列 <source> 元素的容器元素，每个元素都提供 src 文件建议。虽然 <video> 可用于嵌入音频文件，但 <audio> 元素更适用于嵌入声音文件。

如果您一直按顺序学习本课程，那么您应该已经完成了“学习 HTML”！从该语言的基础知识到许多更为细致的细节，您学到了很多知识。

其他资源

本网站上的其他课程会深入探讨您已学过的一些内容，并介绍您作为 Web 开发者需要掌握的其他主题：

• 了解 CSS
• 了解无障碍功能
• 了解 Google 表单
• 了解图片
• 了解自适应设计
• 了解 PWA

了解非常有用的详细信息和摘要元素的工作原理，以及在哪里使用它们。

披露声明 widget 是一种用于隐藏和显示内容的界面控件。如果您是在 web.dev 上阅读本文，并且您的视口宽度小于 106 ems，则点击此段落上方的“在此页面上”会显示此部分的目录。如果您没有看到该选项，请缩小浏览器，以便以披露 widget 的形式查看此页面上的目录导航。

手风琴式折叠图形界面是一系列垂直堆叠的披露信息 widget。手风琴界面的一个常见用例是许多网站上的常见问题解答 (FAQ) 页面。 手风琴常见问题解答包含可见问题列表；点击问题可展开或“披露”该问题的答案。

模态对话框是网页上一种特殊类型的弹出式框：会打断用户专注于自身的弹出式窗口。有一些有效的弹出对话框用例，但在执行此操作之前应考虑清楚。模态对话框会迫使用户专注于特定内容，并暂时忽略页面的其余部分。

对话框可以是模态（只能与对话框中的内容互动）或非模态（仍然可以与对话框外部的内容互动）。模态对话框会显示在其余页面内容之上。页面的其余部分是自然的，默认情况下会被半透明背景遮挡。

HTML 文档包含一个文档类型声明和 <html> 根元素。<html> 元素中嵌套的是文档标头和文档正文。虽然视力正常的访问者看不到文档标头，但让网站正常运行至关重要。它包含所有元信息，包括搜索引擎和社交媒体结果的相关信息、浏览器标签页和移动设备主屏幕快捷方式的图标，以及您的内容的行为和呈现方式。在这一部分中，您会发现那些虽然不可见的组件，但是几乎会显示在每个网页上。

若要创建 MachineLearningWorkshop.com (MLW) 网站，首先要加入每个网页应具备的要素：文档类型、内容所用的人类语言、字符集，当然还要包括网站或应用的标题或名称。

默认情况下，互动元素（包括表单控件、链接和按钮）可聚焦和按 Tab 键。可 Tab 键的元素是文档依序焦点导航顺序的一部分。其他元素为非活跃元素，这意味着它们不具有互动性。使用 HTML 属性，可以使交互元素具有互动性，也可以使 inert 元素具有互动性。

**注意 ** ：出于易用性方面的原因，请始终确保用户知道哪个元素具有焦点。添加 CSS :focus、:focus-visible 和 :focus-within 样式（可选）。这一点非常重要：CSS 和无障碍功能学习路线中都有专门介绍焦点样式的“学习”部分。默认情况下，导航焦点顺序与视觉顺序相同，即源代码顺序。有一些 HTML 属性可以改变这种顺序，CSS 属性可以改变内容的视觉顺序。使用 HTML 更改 Tab 键顺序，或使用 CSS 更改可视呈现顺序可能会影响用户体验。

在上一部分中，您了解了即使您不知道网页上的字词的含义，当语义元素为文档提供有意义的结构时，其他人员（搜索引擎、辅助技术、未来的维护者、新的团队成员）也能理解文档大纲。

在本部分中，您将了解文档结构；回顾上一部分中的划分元素；并标记应用的大纲。

以编码方式为作业选择合适的元素，这意味着您无需重构或注释掉 HTML。考虑对作业使用正确的元素时，通常都是为作业选择合适的元素。否则，您很可能不会这样做。

至此您已了解标记语义，也明白了选择正确元素的重要性。在了解了所有不同的元素之后，您通常无需花费太多精力（如果有）就能选择合适的元素。