2. 语义化 HTML

学习成果

• HTML 文档顶部需要 doctype 的原因。其最初的预期用途，以及现在它在某种程度上是历史产物的事实。
• 需要使用 html 标签的开头中的 lang 属性设置文档的语言。
• HTML 头部及其作为文档元数据容器的目的，包括关键用途
  • 设置字符编码和标题等信息。
  • 为搜索引擎（例如 <meta name="description">）和社交媒体平台（例如 开放图数据）提供元数据，以及搜索引擎优化 (SEO) 优势。
  • 链接到要在浏览器和移动平台上使用的图标。
  • 链接到样式表和脚本文件。
• HTML 主体及其作为页面内容容器的目的。
• HTML 元素的结构 - 元素、开始标签、内容、结束标签、属性。
• 什么是 空元素（也称为空元素），以及它们与其他元素的不同之处。

资源

• HTML 入门
• 头部有什么？HTML 中的元数据

学习成果

• 如何使用标题和标题下方的内容创建良好的文档结构。
• 使用语义化 HTML 而不是表现化 HTML
  • 某些表现化标记根本不应该再使用（例如 <big> 和 <font>）；它们已弃用。
  • 一些表现化标记已被重新用于具有新的语义含义（例如 <i> 和 <b>）。
  • 在需要块级容器的任何位置都只使用 <div> 元素很诱人，但您应该了解其他可用的结构元素及其优势（例如改进的可访问性）。示例包括 <main>、<section>、<article>、<header>、<nav> 和 <footer>。

  注意:

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

• 需要以逻辑方式使用标题级别，即不要跳过级别或随意使用它们，因为您想要获得特定的字体大小（这是 CSS 的工作）。
• SEO 优势：例如，关键字在标题中得到提升。

注意:

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

• 可访问性优势：辅助技术 (AT)（如屏幕阅读器）使用标题和地标作为导航内容的路标。没有标题的 HTML 文档对于 AT 用户来说很难使用。
• 了解 HTML 需要正确嵌套。如果不是，浏览器必须猜测您希望结构是什么，并且它可能不是您想要的。
• 使用 HTML 验证器 或其他类似工具（例如，Firefox 中的 查看源代码 使用虚线红色下划线突出显示验证错误）验证您的标记。

资源

• HTML 文本基础
• 文档和网站结构
• 什么是可访问性？

学习成果

• 三种类型列表的 HTML 结构 - 无序列表、有序列表和描述列表。
• 了解描述列表的使用频率低于其他两种类型，其用例主要在学术界和文档等领域。
• 每种列表类型的正确用法。

注意:

• 无序列表用于标记项目列表，其中顺序无关紧要，例如购物清单。
• 有序列表用于标记项目列表，其中顺序很重要，例如一组方向。
• 描述列表用于将术语列表与其描述相关联，例如购物车中的产品名称和描述。

• 列表的更广泛用例，例如导航菜单。

资源

• HTML 文本基础 > 列表
• 高级文本格式 > 描述列表

学习成果

• 正确使用强调和重要性的元素，例如 <strong> 和 <em>。
• 了解表示其他不太常见的语义需求的 HTML 元素，例如
  • 引用。
  • 缩写和首字母缩略词。
  • 地址。
  • 时间和日期。
  • 上标和下标。
  • HTML 实体。
  • 其他文本标记功能，例如 <u>、<s> 和 <ruby>。

注意:

在这个阶段，不必全面了解 HTML 提供的所有语义元素，但您应该了解它们的存在以及如何在需要时使用 MDN 查找它们。

资源

• HTML 文本基础 > 强调和重要性
• 高级文本格式
• HTML 符号、实体和 ASCII 字符代码的极佳参考，Toptal (2023)

学习成果

• 了解为什么链接是 Web 的基本功能。没有链接就没有 Web。
• href 属性。
• 绝对路径和相对路径，以及何时使用它们。
• 路径语法详细信息 - 斜杠、单点和双点。
• 链接状态及其重要性 - :hover、:focus、:visited 和 :active。
• 内联链接和块级链接。
• 了解编写良好的链接文本的好处，例如为屏幕阅读器用户提供更好的可访问性以及潜在的积极 SEO 影响。

资源

• 锚标记，Scrimba 课程合作伙伴
• 创建超链接

学习成果

• "替换元素"一词 - 它的含义是什么？
• 图像、音频、视频
  • 基础知识 - <img>、<audio> 和 <video> 标签。
  • 使用 src 指向资源（路径在这里也很重要；请参阅 2.5 链接）。
  • 使用 width 和 height，例如，避免在图像完成加载并显示后对 UI 进行令人不快的跳跃更新。
  • 特定于视频和音频的属性，例如 controls 和 muted。
  • <sources>.
  • 优化 Web 上的媒体资产 - 保持文件大小小。
• 媒体资产和许可
  • 不同类型的许可 - 公共领域/CC0、宽松许可（例如 CC 许可、MIT）、版权（权利管理/免版税）。
  • 搜索要在项目中使用的获得适当许可的媒体文件，例如通过 Google Images、Flickr 和 The Noun Project。
  • 遵守许可要求。
• 媒体的替代文本（“alt 文本”）。

资源

• 什么是多媒体？，Geeks for geeks (2023)
• 多媒体和嵌入

学习成果

• 除了链接之外，<button> 和表单元素是构建控件的主要工具，供用户与您的网站交互。

注意:

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

• <button>:
  • 按钮类型 - button、submit 和 reset。
  • 为什么重置按钮几乎总是坏主意。
• 常见的 <input> 类型 - text、number、file、checkbox、radio、password、search 和 submit。

• 常用属性 — name 和 value。
• 客户端验证基础 — required、min、max、minlength、maxlength 和 pattern。

注意:

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

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

注意:

• 回到语义化 HTML 的论点（另请参见 2.2 良好的文档结构），您应该理解为什么使用正确的元素来完成正确的工作非常重要。例如，使用 <button> 提交表单，而不是使用 <div> 并将其编程为像 <button> 一样工作。
• 了解浏览器默认情况下为 <button> 和表单元素编写的功能，以及它们的重要性。例如，键盘可访问性、焦点轮廓和语义含义，以便辅助技术识别元素并传达其含义。

• 表单状态及其重要性 — :focus、:readonly、:disabled 等。
• <textarea>.
• <select> 和 <option>。
• <form> 元素
  • 表单提交：提交表单时会发生什么。
  • 提交方法之间的区别 — GET、POST 等。

资源

• 输入标签，Scrimba 课程合作伙伴
• Web 表单 — 使用用户数据

学习成果

• 表格的作用 — 结构化表格数据。
• 表格的作用不是 — 布局或任何其他用途。
• 基本表格 — <table>、<tr> 和 <td>。
• colspan 和 rowspan。
• 更好的表格结构以提高可访问性 — <th>、<thead>、<tbody>、<tfoot>、<caption> 和 scope 属性。

资源

• HTML 表格

学习成果

• 使用 HTML 验证器 检查是否存在任何标记错误。如果您遇到意外行为，这始终是一个良好的起点。
• 查看源代码是快速查看页面源标记的有用工具。
• 使用浏览器 DevTools 中的 DOM 检查器更深入地了解您的标记。
  • 动态添加和删除元素和属性以查看其产生的影响。
  • 动态添加和删除类以查看关联的 CSS 是否按预期应用。

资源

• 调试 HTML
• Firefox 文档 > 检查和编辑 HTML，Firefox 源代码文档
• Chrome DevTools > 开始查看和更改 DOM，developer.chrome.com (2019)