0Pricing
Web Accessibility Academy · 课时

每个页面一个 h1：命名主要主题

为每个页面提供一个清晰的顶级标题

每个页面一个 h1：命名主要主题 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。

您听到的页面标题

h1 是页面的主标题。屏幕阅读器用户经常会直接跳到这里，以了解这个页面究竟讲什么。🔎

一个主要主题

一个页面只有一个主要主题，因此应有一个h1。请把它想成书封面上的书名，而不是章节标题。

<h1>Your Order Summary</h1>

h1 不是用来决定大小的

选择h1 是为了表达语义，而不是让文字看起来更大。如果想使用更小的文字，请用 CSS 设置样式，并保持正确的标题级别。

用于命名，而不是装饰

好的h1 会描述下面的内容。只读 h1，用户也应该大致知道这个页面会提供什么。

与标签页标题保持一致

您的h1 应该与浏览器标签页标题相呼应。两者一致时，用户会确信自己进入了正确的页面。

<title>Your Order Summary - Shop</title>
<h1>Your Order Summary</h1>

不是徽标

角落里的网站名称通常不是页面主题。h1 应属于当前页面的内容，而不是您的品牌徽标。🏷️

为什么是一个，而不是多个

多个h1 标签会模糊页面结构，让用户无法分辨真正的主题和某个分区。一个清晰的顶级标题能让页面保持聚焦。

它应该放在哪里

请将h1 放在主要内容的上方，位于它所介绍的各个分区之前。它会为后续所有内容做好铺垫。

<main>
  <h1>Annual Report 2025</h1>
  <h2>Highlights</h2>
</main>

不要直接跳到 h2

从h2 开始页面会让结构缺少根节点。请先为页面提供唯一的 h1，然后在其下嵌套各个分区。

保持诚实清晰

请用陌生人也能理解的朴素语言编写h1。不要使用掩盖页面真实用途的巧妙双关语。

空的 h1 是个陷阱

如果h1 中只有图片或图标，读取结果可能什么都没有。请为它提供真实文本，即使要将文本在视觉上隐藏起来也应如此。

快速检查

一个典型页面应该有多少个 h1 元素？

回顾

您已经学会：h1 用于命名页面的一个主要主题，应位于内容上方，并且应根据语义而不是大小来选择。一个页面，一个 h1。✅

常见问题解答

「每个页面一个 h1：命名主要主题」课时是免费的吗？

是的 — 「每个页面一个 h1：命名主要主题」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。

「每个页面一个 h1：命名主要主题」这节课中我会学到什么？

为每个页面提供一个清晰的顶级标题 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Accessibility Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「每个页面一个 h1：命名主要主题」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web Accessibility Academy 课中编写并运行代码吗？

能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 每个页面一个 h1：命名主要主题
  2. 不跳级地嵌套层级
  3. 标题用于导航，而不只是大号文本
  4. 通过听读审查页面大纲
← 返回 Web Accessibility Academy