欢迎来到语义网（Semantic Web）的世界！
在本章中，我们将探索信息技术（Information Technology）中非常重要的一部分：语义网（Semantic Web）。别担心这个术语听起来很深奥！简单来说，我们不再只是让网站看起来“漂亮”，而是更专注于让它们变得“聪明”。在看完这些笔记后，你将学会如何编写让电脑、搜索引擎以及身心障碍人士都能完美理解的代码。让我们开始吧！
1. 什么是语义化 HTML（Semantic HTML）？
在网络发展的早期，人们使用代码仅是为了改变外观（例如让文字变大或变蓝）。语义化 HTML 则不同，它是一种使用能够描述内容含义（而非仅仅是外观）的 HTML 标签的做法。
为什么这很重要？
当你使用正确的标签时，你其实是在帮助多种不同的“用户”：
1. 搜索引擎： 像 Google 这类工具会利用语义化代码来了解你的网页内容。这就是所谓的搜索引擎优化（SEO）。如果你使用 "header" 标签来标记标题，Google 就会知道那是网页中最核心的部分。
2. 辅助技术： 视障人士会使用屏幕阅读器（Screen Readers）。这些设备会将代码朗读出来。语义化标签能告诉屏幕阅读器哪里是导航栏，或者哪里是文章的主体内容。
3. 更好的维护性： 对开发人员来说，阅读和更新结构良好且具有语义的代码要容易得多。
快速复习： 语义化代码描述的是内容，而不是外观。
2. 构建基石：结构元素
课程要求你必须熟悉定义网页结构的特定标签。你可以把它们想象成你数字房屋里的“房间”。
关键结构标签：
• <header> 和 <footer>： 这是页面或特定区域的顶部与底部。页眉（header）通常包含标志（logo），而页脚（footer）则包含联系信息或链接。
• <nav>： 代表导航（navigation）。只在帮助用户浏览网站的主要链接区块使用此标签。
• <main>： 标记该特定页面的独特内容。每个页面通常只应有一个 <main> 标签。
• <article>： 用于独立的内容。如果你能将其复制并粘贴到另一个网站上，且内容依然完整有意义（例如新闻报道或博客文章），就应该使用 article 标签。
• <section>： 用于将相关内容归类在一起，就像书中的章节一样。
• <aside>： 用于“侧边”的内容。它与主要内容相关，但不是重点，例如包含额外事实或广告的侧边栏。
重点总结： 使用这些标签能为电脑建立一份清晰的网页地图。
3. 通用容器：当“意义”缺失时
有时候，你只是为了设定样式（例如在随机的一堆对象周围加上框线）而需要将元素组合在一起，但没有适合的语义标签。在这种情况下，我们使用非语义化容器：
• <div>： 一个块级（block-level）容器。它会从新的一行开始，并占据可用的整个宽度。
• <span>： 一个行内（inline）容器。它保持在同一行，且只占用文字内容所需要的空间。
别担心这个部分： 只要记住 <div> 和 <span> 本身没有任何含义。只有在没有其他合适的语义标签（如 <article> 或 <nav>）可用时，才使用它们。
4. 为文字赋予含义
语义化标记不仅适用于大型区块，对单词也同样重要！以下是如何为文字添加语义：
• 重要性 (<strong>)： 用于非常重要的文字。浏览器通常会将其设为粗体。
• 强调 (<em>)： 当你想强调某个词（就像你说话时改变语气）时使用。浏览器通常会将其设为斜体。
• 引用： 使用 <blockquote> 进行长篇引用，使用 <q> 进行简短的行内引用。
• 缩写 (<abbr>)： 帮助解释缩写词（例如 "NASA"）的全称。
• 引注与定义： 使用 <cite> 引用作品标题（如书名），使用 <dfn> 定义新术语。
• 地址 (<address>)： 专门用于文件作者或所有者的联系信息。
• 标记 (<mark>)： 用于高亮显示文字，就像在纸上使用荧光笔一样。
5. 图表与标题
当你添加一张图片、图表或代码片段，且它是“独立存在”的（意味着即便脱离主文，其目的依然明确），就应该使用 <figure> 标签。
若要为该 figure 添加标题或说明，请在 figure 标签内使用 <figcaption> 标签。
你知道吗？ 使用 <figcaption> 比单纯在图片下方放置一个段落要好得多，因为它能为屏幕阅读器在图片与说明文字之间建立永久性的链接。
6. WAI-ARIA：无障碍设计的额外辅助
有时候 HTML 标签不足以解释复杂的网页功能（如弹出式菜单或加载条）。这就是 WAI-ARIA（网页无障碍倡议 – 无障碍丰富网络应用程序）发挥作用的地方。它提供了额外的“属性”来帮助辅助技术。
考试重点：
• 角色（Roles）： 告诉电脑该元素是什么（例如 role="button" 或 role="search"）。
• 状态与属性（States and Properties）： 告诉电脑元素的当前状态（例如复选框的 aria-checked="true"）。
• 即时区域（Live Regions）： 这非常酷！它们告诉屏幕阅读器在变更发生时立即进行播报，而无需用户重新整理页面（例如“新消息”提醒）。
• 增强键盘导航： ARIA 有助于确保无法使用鼠标的用户能仅通过“Tab”和“Enter”键进行完整浏览。
要避免的常见错误： 不要过度使用 ARIA！“ARIA 的第一原则”是：如果可以使用原生的 HTML 标签（例如 <button>），就使用该标签，而不是通过 ARIA 把其他元素硬改成按钮。
期末快速复习箱
1. 语义化 HTML = 含义。
2. 结构标签包括 <header>, <nav>, <main>, <article>, <section>, <aside> 和 <footer>。
3. 非语义化标签（如 <div>）仅用于样式设定。
4. SEO 与无障碍设计是我们使用语义网的两大主因。
5. WAI-ARIA 为复杂功能添加额外标签，以协助屏幕阅读器。