1. MDN 课程
  2. 核心模块
  3. 2. 语义化 HTML

2. 语义化 HTML

Web 标准与语义

核心模块

HTML 是定义任何网站内容和结构的 기술。如果编写得当，它还应以机器可读的方式定义内容的语义（含义），这对于可访问性、搜索引擎优化以及利用浏览器为内容提供的内置功能以最佳方式运行至关重要。本模块涵盖了该语言的基础知识，然后探讨了文档结构、链接、列表、图像、表单等关键领域。

通用资源

2.1 HTML 基本语法

学习成果

  • HTML 文档顶部需要 doctype。其最初的预期用途，以及它现在在一定程度上已成为历史遗迹的事实。

  • 使用 `lang` 属性在 `` 标签的开头设置文档语言的必要性。

  • HTML 的 head 部分，以及它作为文档元数据容器的用途，包括关键用途

    • 设置字符编码和标题等信息。

    • 为搜索引擎（例如 ``）和社交媒体平台（例如 Open Graph Data）提供元数据，以及搜索引擎优化（SEO）的好处。

    • 链接到用于浏览器和移动平台的图标。

    • 链接到样式表和脚本文件。

  • HTML 的 body 部分，以及它作为页面内容容器的用途。

  • HTML 元素的结构——元素、开始标签、内容、结束标签、属性。

  • 什么是 空元素（也称为 void 元素），以及它们与其他元素的区别。

资源

2.2 良好的文档结构

学习成果

  • 如何通过标题以及这些标题下的内容来创建良好的文档结构。

  • 使用语义 HTML 而不是表现型 HTML

    • 一些表现型标记不应再使用（例如 `` 和 ``）；它们已被弃用。

    • 一些表现型标记已被重新用于具有新的语义含义（例如 `` 和 ``）。

    • 当需要块级容器时，很容易只使用 `

      ` 元素，但你应该了解其他可用的结构元素及其好处（例如提高可访问性）。例子包括 `
      `、`
      `、`
      `、`
      `、`

    注意:

    这里要理解的一个关键点是语义标记和表现型标记之间的区别，这些术语的含义，以及为什么语义标记对 SEO 和可访问性很重要。

  • 标题级别需要逻辑地使用，即不要跳过级别或随意使用它们，因为你想要达到特定的字体大小（这是 CSS 的工作）。

  • SEO 好处：例如，标题中的关键词会得到提升。

注意:

此一致性标准不要求你深入研究编写 SEO 友好内容的策略，尽管你应该理解这意味着什么。

  • 可访问性好处：辅助技术（AT），如屏幕阅读器，使用标题和地标作为导航内容的标识。没有标题的 HTML 文档对 AT 用户来说很难使用。

  • 理解 HTML 需要正确嵌套。如果不正确，浏览器就必须猜测你想要什么结构，而这可能不是你想要的。

  • 使用 HTML 验证器 或其他类似工具验证你的标记（例如，Firefox 中的 查看源代码 会用虚线红色下划线突出显示验证错误）。

资源

2.3 列表

学习成果

  • 三种列表的 HTML 结构——无序列表、有序列表和定义列表。

  • 理解定义列表比其他两种类型使用频率较低，其用例主要在学术和文档等领域。

  • 每种列表类型的正确用法。

注意:

  • 无序列表用于标记项目列表，其中顺序不重要，例如购物清单。
  • 有序列表用于标记项目列表，其中顺序很重要，例如一组方向。
  • 定义列表用于将术语列表与这些术语的描述相关联，例如，购物车中的产品名称和描述。
  • 列表的更广泛用例，例如导航菜单。

资源

2.4 高级文本技术

学习成果

  • 正确使用强调和重要性的元素，例如 `` 和 ``。

  • 理解表示其他不太常见的语义要求的 HTML 元素，例如

    • 引言。

    • 缩写词和首字母缩略词。

    • 地址。

    • 时间和日期。

    • 上标和下标。

    • HTML 实体。

    • 其他文本标记功能，例如 ``、`` 和 ``。

注意:

此时不必对 HTML 提供的所有语义元素都有详尽的了解，但你应该知道它们的存在，以及如何使用 MDN 进行查找（如果你需要的话）。

资源

学习成果

  • 理解为什么链接是 Web 的基本功能。没有链接就没有 Web。

  • `href` 属性。

  • 绝对路径和相对路径，以及何时使用它们。

  • 路径语法详解——斜杠、单点和双点。

  • 链接状态及其重要性——`:hover`、`:focus`、`:visited` 和 `:active`。

  • 行内链接和块级链接。

  • 理解编写良好链接文本的好处，例如提高屏幕阅读器用户的可访问性，以及潜在的积极 SEO 效果。

资源

2.6 媒体

学习成果

  • “替换元素”一词——它的意思是什么？

  • 图像、音频、视频

    • 基础知识——``、`` 和 `` 标签。

    • 使用 `src` 指向资源（此处路径也很重要；请参阅 2.5 链接）。

    • 使用 `width` 和 `height`，例如，以避免在图像加载完成并显示后发生 UI 不愉快的抖动更新。

    • 视频和音频特定的属性，例如 `controls` 和 `muted`。

    • <sources>.

    • 优化 Web 媒体资源——保持文件大小小。

  • 媒体资源和许可

    • 不同类型的许可——公共领域/CC0，宽松（例如 CC 许可，MIT），版权（权利管理/免版税）。

    • 搜索适当许可的媒体文件以在项目中使用的，例如，通过 Google 图片、Flickr 和 The Noun Project。

    • 遵守许可要求。

  • 媒体的替代文本（“alt 文本”）。

资源

2.7 其他交互元素

学习成果

  • 除了链接，`

注意:

这里没有明确提及许多输入类型和表单功能；目的是获得对按钮和表单元素的良好总体介绍，并学习最常见的情况。高级/专门的情况可以根据需要进行学习，作为 Web 开发人员在其职业生涯中不断学习的一部分。

  • <button>:

    • 按钮类型——`button`、`submit` 和 `reset`。

    • 为什么重置按钮几乎总是一个坏主意。

  • 常见的 `` 类型——`text`、`number`、`file`、`checkbox`、`radio`、`password`、`search` 和 `submit`。

  • 常用属性——`name` 和 `value`。

  • 客户端验证基础知识——`required`、`min`、`max`、`minlength`、`maxlength` 和 `pattern`。

注意:

请务必理解，客户端表单验证实际上是为了增强可用性，应与服务器端表单验证一起使用。它不能替代服务器端验证。

  • 使表单可访问——正确的语义、`` 和 `for` 属性。

注意:

  • 回到语义 HTML 的论点（另请参阅 2.2 良好的文档结构），你应该理解为什么为正确的任务使用正确的元素很重要。例如，使用 `
  • 理解浏览器默认情况下为 `

  • 表单状态及其重要性——`:focus`、`:readonly`、`:disabled` 等。

  • <textarea>.

  • `