标题 h1-h6 及其层级
使用不同级别的标题创建有意义的文档结构。
标题 h1-h6 及其层级 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
六个标题级别
HTML 提供从 <h1> 到 <h6> 的六个标题元素：
- h1 — 页面主标题（最重要）
- h2 — 主要章节
- h3 — 子章节
- h4, h5, h6 — 更深层的子章节（很少需要）
它们的视觉尺寸依次减小，但尺寸由 CSS 控制，而不是由数字决定。
语义层级
标题会创建一个文档大纲，相当于页面的目录：
<h1>HTML Fundamentals</h1>
<h2>Document Structure</h2>
<h3>The html Element</h3>
<h3>The head Element</h3>
<h2>Text Elements</h2>
<h3>Headings</h3>
<h3>Paragraphs</h3>h1 规则
<h1> 的最佳实践：
- 每个页面恰好使用一个
<h1> - 它应与
<title>元素相同或密切相关 - 它应体现页面的主要主题
- 它在搜索引擎优化中具有很高的权重
不要跳过级别
标题级别必须按顺序使用——不要从 h2 跳到 h4：
<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>
<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->用于导航的标题
屏幕阅读器用户依靠标题来浏览较长的页面：
- 他们可以使用 H 键在标题之间跳转
- 屏幕阅读器会像目录一样列出所有标题
- 正确的层级结构使用户无需视觉即可浏览页面
样式与语义
不要因为标题的视觉尺寸而选择标题级别——请使用 CSS 调整尺寸：
<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>
<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->章节中的标题
使用 HTML5 分区元素时，每个分区都会重新开始标题层级：
<article>
<h2>Article Title</h2> <!-- h2 within article -->
<section>
<h3>Subtopic</h3> <!-- h3 within section -->
</section>
</article>
<aside>
<h2>Related Links</h2> <!-- h2 in aside, independent section -->
</aside>标题无障碍提示
请遵循以下标题规则，以确保无障碍性：
- 每个页面都必须至少有一个标题
- 主要内容区域应以
<h1>开始 - 不要仅为了让文本变粗或变大而使用标题
- 不要用粗体文本代替标题
搜索引擎优化与标题
搜索引擎使用标题来理解页面内容：
<h1>在搜索引擎优化中具有最高权重- 在标题中自然地加入目标关键词
- 标题可以分隔内容，并改善可读性指标
- 搜索引擎会在搜索结果中显示标题（精选摘要）
浏览器默认样式
浏览器会为标题应用默认样式：
/* Default browser heading sizes (approximate) */
h1 { font-size: 2em; font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em; font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }导航中的标题
标题也可以用于导航地标：
<nav aria-labelledby="nav-heading">
<h2 id="nav-heading">Main Navigation</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>快速检查
结构良好的页面通常应该有多少个 h1 元素？
回顾：标题
标题层级的要点：
- 六个级别：从
h1到h6 - 每个页面一个
h1——页面主标题 - 按顺序使用各个级别——绝不要跳过级别
- 标题会创建无障碍的文档大纲
- 使用 CSS 调整视觉尺寸，而不是修改标题数字
常见问题解答
「标题 h1-h6 及其层级」课时是免费的吗？
是的 — 「标题 h1-h6 及其层级」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「标题 h1-h6 及其层级」这节课中我会学到什么？
使用不同级别的标题创建有意义的文档结构。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「标题 h1-h6 及其层级」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。