正在加载...

HTML 标题

你已经会写元素和属性。本课聚焦标题——标记页面主标题和各节标题的标签。好的标题帮助读者扫读页面，也帮助浏览器和辅助工具理解大纲。

什么是 HTML 标题？

HTML 标题有六个级别：h1、h2、h3、h4、h5 和 h6。h1 是页面上最高级别的标题。h6 是最低级别。这些标签用于含义和结构。视觉大小可稍后用 CSS 改变；不要只因为想要更大或更小的文字而选择级别。

直接回答

用标题构建清晰大纲。页面主题最好有一个清晰的 h1。在该主题下用 h2 表示主要章节，再用 h3 表示小节，依此类推。尽量保持级别顺序——从 h1 直接跳到 h4 通常会让大纲更难跟随。

标题级别

html
HTML Code 
<h1>页面主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
<p>小节下的段落文字。</p>

阅读示例

  • h1 介绍整页主题
  • h2 在该主题下开始一个主要章节
  • h3 在该章节内开始更小的部分
  • 段落是普通正文，不是标题

为什么标题顺序很重要

标题创建文档大纲，类似目录。屏幕阅读器和一些 SEO 工具会使用该大纲。如果只为外观跳过级别，即便页面对你「看起来不错」，结构也会变得混乱。

一个 h1，然后是章节

本课程的初学者页面请保持一个清晰的 h1。然后按需要用 h2 和更深级别组织内容。更高级的大纲模式以后再学；先掌握这个简单、易读的模式。

一个小的页面大纲

html
HTML Code 
<h1>城市指南</h1>
<h2>出行</h2>
<p>公交与火车提示。</p>
<h2>美食</h2>
<h3>街头小吃</h3>
<p>快捷本地小吃。</p>
<h3>堂食餐厅</h3>
<p>适合较长时间用餐的地方。</p>

标题不是用来做空白间距的

不要用空的标题标签制造垂直空白。不要把每句加粗文字都包进标题。如果文字不是真正的章节标题，请使用段落或其他合适元素。

亲自试一试

  1. 创建或打开带基础骨架的 HTML 文件
  2. 添加一个命名页面主题的 h1
  3. 添加两个 h2 章节，每个下面各有一段短段落
  4. 在其中一个 h2 下添加一个 h3 和一段短段落
  5. 保存并打开页面——检查大纲是否易于扫读

常见错误

  • 只按字号而不是结构选择标题级别
  • 无故从 h1 跳到 h4
  • 在简单的初学者页面上使用多个 h1，而一个清晰主标题就够了
  • 把长段落放进标题标签
  • 把标题当作装饰性间距，却没有真正的章节标题

小结

  • 标题用 h1 到 h6 标记标题级别
  • 它们构建结构和大纲，而不仅是视觉大小
  • 优先使用一个清晰的 h1，然后是有序的 h2–h6 章节
  • 不要仅为样式跳过级别
  • 保持标题文字简短、像标题
  • 稍后用 CSS 设置大小；保持 HTML 标题语义化

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程