PHP小码农

Appearance

文本与标题 ​

本节将详细介绍 HTML 中的标题层级和文本排版标签。学完本节，你将掌握 h1-h6 标题的正确使用方式、段落和文本格式化标签，以及语义化标题的重要性。

前置知识

阅读本节前，建议先了解：基本页面结构

基础概念 ​

HTML 提供了丰富的文本标签来描述内容的结构和含义。标题标签 <h1> 到 <h6> 用于建立页面的信息层级，从最重要的主标题到最不重要的子标题；段落标签 <p> 用于包裹独立的文本块；各种文本格式化标签（如 <strong>、<em>、<mark> 等）用于对局部文本进行语义标记。

理解并正确使用这些标签，不仅让页面具有良好的视觉层级，更重要的是让搜索引擎和辅助技术（如屏幕阅读器）能够准确理解内容的结构和重点。

标题层级 ​

h1 - h6 标题标签 ​

HTML 提供六级标题标签，<h1> 是最高级别的标题，<h6> 是最低级别的标题。浏览器会为不同级别的标题应用不同的默认字号和粗细。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标题层级示例</title>
</head>
<body>
  <h1>一级标题 — 最重要的标题</h1>
  <p>通常每个页面只使用一个 h1 作为页面主标题。</p>

  <h2>二级标题 — 章节标题</h2>
  <p>h2 用于划分页面中的主要章节。</p>

  <h3>三级标题 — 小节标题</h3>
  <p>h3 用于 h2 章节下的小节划分。</p>

  <h4>四级标题 — 子小节标题</h4>
  <p>h4 用于更细的层级划分。</p>

  <h5>五级标题</h5>
  <p>h5 较少使用，通常在内容层级很深时才会用到。</p>

  <h6>六级标题</h6>
  <p>h6 是最低级别的标题，一般很少用到。</p>
</body>
</html>

标题的视觉效果 ​

不同级别标题的默认渲染效果大致如下（具体取决于浏览器的默认样式）：

标题默认字号（Chrome）粗细行间距
<h1>32px (2em)粗体1.2em
<h2>24px (1.5em)粗体1.2em
<h3>18.72px (1.17em)粗体1.2em
<h4>16px (1em)粗体1.2em
<h5>13.28px (0.83em)粗体1.2em
<h6>11.52px (0.67em)粗体1.2em

关于默认样式

上述默认样式只是浏览器的默认行为。在实际开发中，几乎都会通过 CSS 重置或覆盖这些默认值。标题的语义不应由视觉大小决定——即使你通过 CSS 把 h3 设置得比 h1 还大，它在文档结构中的层级仍然是三级。

标题使用规范 ​

正确的标题层级 ​

标题应该按照逻辑层级顺序使用，不要跳级：

html
<!-- 正确：标题按顺序递减 -->
<h1>网站名称</h1>
  <h2>产品介绍</h2>
    <h3>产品 A</h3>
    <h3>产品 B</h3>
  <h2>公司信息</h2>
    <h3>关于我们</h3>
    <h3>联系方式</h3>
html
<!-- 错误！跳过了 h2，直接从 h1 到 h3 -->
<h1>网站名称</h1>
  <h3>产品 A</h3>  <!-- 不推荐：缺少 h2 -->
html
<!-- 错误！仅为了视觉大小使用 h1，导致页面有多个 h1 -->
<h1>产品名称</h1>
<h1>产品特点</h1>
<h1>使用方法</h1>

每页一个 h1 ​

每个页面应该只有一个 <h1> 作为主标题，它是整个页面内容的最高级概括。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>如何学习 HTML — 前端入门教程</title>
</head>
<body>
  <!-- 唯一的 h1：概括整个页面的内容 -->
  <h1>如何学习 HTML：从零到一的前端入门指南</h1>

  <p>本指南将帮助你从零开始学习 HTML。</p>

  <h2>学习路线</h2>
  <h3>第一阶段：基础知识</h3>
  <p>掌握 HTML 基本标签和文档结构。</p>

  <h3>第二阶段：语义化</h3>
  <p>学习使用语义化标签构建有意义的页面结构。</p>

  <h2>推荐资源</h2>
  <p>MDN、W3School 等学习资源推荐。</p>
</body>
</html>

标题用于结构而非样式 ​

一个常见的错误是用标题标签来控制文字大小，而不是表达内容的层级结构：

html
<!-- 错误！使用 h1 只是因为想要大号文字 -->
<p>正文内容...</p>
<h1>这里想要大号文字</h1>
<p>继续正文...</p>

<!-- 正确：如果需要大号文字，使用 CSS -->
<p>正文内容...</p>
<p class="highlight-text">这里想要大号文字</p>
<p>继续正文...</p>

不要用标题控制样式

标题标签的语义是"这是一个标题"，不是"这是大号文字"。如果需要调整文字大小，使用 CSS 的 font-size 属性。搜索引擎和屏幕阅读器依赖标题层级来理解内容结构。

段落与文本标签 ​

p 段落标签 ​

<p> 标签用于定义一个段落，是 HTML 中最常用的文本容器。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>段落示例</title>
</head>
<body>
  <h1>段落标签</h1>

  <p>这是第一个段落。段落之间浏览器会自动添加上下间距（外边距），
     让文字在视觉上有清晰的分组。</p>

  <p>这是第二个段落。每个段落应该只包含一个主题的内容。
     如果内容较长，可以考虑拆分为多个段落。</p>

  <!-- 错误：段落中嵌套块级元素 -->
  <!-- <p>第一个段落 <div>错误</div> 继续段落</p> -->

  <!-- 正确：段落中可以嵌套行内元素 -->
  <p>段落中可以包含<strong>加粗</strong>、<em>斜体</em>
     和<a href="#">链接</a>等行内元素。</p>
</body>
</html>

强调与语义标签 ​

HTML 提供了多个语义化文本标签，用于标记不同含义的文本：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本语义标签</title>
</head>
<body>
  <h1>文本语义标签</h1>

  <p>
    <strong>重要内容</strong> — 表示内容重要（通常以粗体显示）。
  </p>
  <p>
    <em>需要强调</em> — 表示语气上的强调（通常以斜体显示）。
  </p>
  <p>
    <mark>高亮标记</mark> — 标记需要引起注意的文字（黄色背景）。
  </p>
  <p>
    <small>附属信息</small> — 表示附注或免责声明（较小字号）。
  </p>
  <p>
    <del>已删除的内容</del> — 表示被删除的文字（添加删除线）。
  </p>
  <p>
    <ins>新插入的内容</ins> — 表示新增的文字（添加下划线）。
  </p>
  <p>
    <s>不再准确</s> — 表示不再相关或不再准确的内容（删除线）。
  </p>
  <p>
    <sub>下标</sub> — 化学式 H<sub>2</sub>O 中的下标。
  </p>
  <p>
    <sup>上标</sup> — 数学公式 E=mc<sup>2</sup> 中的上标。
  </p>
</body>
</html>

文本语义标签对照表 ​

标签含义默认样式使用场景
<strong>内容重要粗体关键信息、警告文字
<em>语气强调斜体需要读者注意的文字
<mark>高亮标记黄色背景搜索结果高亮、重点标记
<small>附属信息较小字号版权声明、免责条款
<del>已删除删除线显示修改记录
<ins>新增下划线显示修改记录
<s>不再准确删除线旧价格、过期信息
<sub>下标下标位置化学式、数学公式
<sup>上标上标位置数学公式、脚注编号
<abbr>缩写无<abbr title="HyperText Markup Language">HTML</abbr>
<cite>作品引用斜体书名、文章名、电影名
<dfn>术语定义斜体第一次出现的技术术语
<kbd>键盘输入等宽字体<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>代码片段等宽字体行内代码 console.log()
<samp>程序输出等宽字体程序的输出结果
<var>变量斜体数学变量
<time>时间日期无<time datetime="2024-01-15">2024年1月15日</time>
<address>联系方式斜体地址、邮箱、电话

strong 与 b、em 与 i 的区别 ​

初学者常混淆这些相似标签，它们的核心区别在于语义：

标签语义说明
<strong>内容重要表示文本在上下文中具有重要意义
<b>仅加粗样式纯视觉加粗，无语义含义（不推荐）
<em>语气强调表示该文本需要读者特别关注
<i>仅斜体样式纯视觉斜体，无语义含义（不推荐）
html
<!-- 推荐：使用语义标签 -->
<p><strong>警告：</strong>请务必在截止日期前提交申请。</p>
<p>这个问题的答案是<em>肯定的</em>。</p>

<!-- 不推荐：使用无语义标签 -->
<!-- <p><b>警告：</b>请务必在截止日期前提交申请。</p> -->
<!-- <p>这个问题的答案是<i>肯定的</i>。</p> -->

优先使用语义标签

始终优先使用 <strong> 和 <em>，而非 <b> 和 <i>。语义标签不仅对搜索引擎友好，也是无障碍访问的基础。

引用与代码 ​

引用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>引用与代码示例</title>
</head>
<body>
  <h1>引用</h1>

  <!-- 行内引用：引用他人的话或作品 -->
  <p>
    正如 Tim Berners-Lee 所说：
    <q cite="https://www.w3.org/History/1989/proposal.html">
      The power of the Web is in its universality.
    </q>
  </p>

  <!-- 块级引用：独立成段的引用 -->
  <blockquote cite="https://example.com/speech">
    <p>创新区分了领导者和跟随者。</p>
    <footer>—— <cite>史蒂夫·乔布斯</cite></footer>
  </blockquote>

  <h1>代码</h1>

  <!-- 行内代码：嵌入在文本中的代码片段 -->
  <p>使用 <code>console.log()</code> 可以在控制台输出信息。</p>

  <!-- 预格式文本块：保留空格和换行的代码块 -->
  <pre><code>// JavaScript 代码示例
function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('World');</code></pre>

  <!-- 用户输入：表示用户应该输入的命令 -->
  <p>在终端中输入 <kbd>npm install</kbd> 来安装依赖。</p>
</body>
</html>

文本换行与水平线 ​

br 与 hr ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>换行与分隔示例</title>
</head>
<body>
  <h1>换行与水平线</h1>

  <!-- br 标签：在段落内部强制换行 -->
  <!-- 适用于诗歌、地址等需要换行但不构成新段落的场景 -->
  <p>
    白日依山尽，<br>
    黄河入海流。<br>
    欲穷千里目，<br>
    更上一层楼。
  </p>

  <p>
    联系方式：<br>
    地址：北京市海淀区<br>
    邮箱：example@mail.com<br>
    电话：010-12345678
  </p>

  <!-- 不推荐：用 br 来制造间距 -->
  <!-- <p>第一行</p><br><br><br><p>第二行</p> -->

  <!-- hr 标签：表示内容主题的转换 -->
  <h2>第一章</h2>
  <p>第一章的内容...</p>

  <!-- hr 表示上下内容的主题发生了变化 -->
  <hr>

  <h2>第二章</h2>
  <p>第二章的内容...</p>
</body>
</html>

br 与段落的选择

<br> 用于文本内部的换行（如诗歌、地址），<p> 用于分隔不同的段落。不要用多个 <br> 来制造段落间距——那应该用 CSS 的 margin 属性控制。

实战示例 ​

示例一：技术博客文章 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 文本标签详解 - 前端技术博客</title>
</head>
<body>
  <article>
    <!-- 唯一的 h1：文章标题 -->
    <h1>HTML 文本标签详解：从标题到排版</h1>

    <!-- 文章元信息 -->
    <p>
      <time datetime="2024-01-15">2024 年 1 月 15 日</time> ·
      <small>阅读时间约 5 分钟</small>
    </p>

    <!-- 文章摘要 -->
    <p>
      HTML 提供了丰富的文本标签来描述内容的结构和语义。
      本文将详细介绍各级标题、段落、文本格式化标签的正确用法。
    </p>

    <hr>

    <!-- 第一章节 -->
    <h2>为什么标题很重要</h2>

    <p>
      标题是页面内容结构的<strong>骨架</strong>。合理的标题层级不仅能
      帮助读者快速浏览内容，还能让搜索引擎<em>更好地理解</em>页面的主题
      和组织方式。
    </p>

    <blockquote cite="https://developer.mozilla.org">
      <p>使用标题标签来创建文档的层次结构。</p>
      <footer>—— <cite>MDN Web 文档</cite></footer>
    </blockquote>

    <h3>标题层级规则</h3>
    <p>
      每个页面应该有<mark>且仅有一个</mark> <code>&lt;h1&gt;</code> 标签。
      其他标题按照逻辑顺序使用，不要跳级。
    </p>

    <!-- 第二章节 -->
    <h2>文本语义化标签</h2>

    <p>
      HTML 的文本标签分为两类：<strong>语义标签</strong>和<strong>样式标签</strong>。
      我们应该优先使用语义标签。
    </p>

    <h3>strong 与 em 的区别</h3>
    <p>
      <code>&lt;strong&gt;</code> 表示<strong>内容重要</strong>，
      <code>&lt;em&gt;</code> 表示<em>语气强调</em>。它们虽然默认都是粗体/斜体，
      但含义不同。例如：
    </p>

    <pre><code>&lt;p&gt;&lt;strong&gt;警告&lt;/strong&gt;：此操作不可撤销。&lt;/p&gt;
&lt;p&gt;请&lt;em&gt;务必&lt;/em&gt;检查后再提交。&lt;/p&gt;</code></pre>

    <h3>特殊文本标记</h3>
    <p>
      在书写技术文章时，以下标签特别有用：
    </p>
    <p>
      使用 <code>&lt;kbd&gt;</code> 标记键盘按键，如 <kbd>Ctrl</kbd>+<kbd>S</kbd>；
      使用 <code>&lt;mark&gt;</code> <mark>高亮重要文字</mark>；
      使用 <code>&lt;time&gt;</code> 标记日期时间。
    </p>

    <hr>

    <!-- 总结 -->
    <h2>总结</h2>
    <p>
      正确使用 HTML 文本标签是编写<em>语义化</em>网页的基础。
      记住一个原则：<strong>标签用于描述内容的含义，而非外观。</strong>
    </p>
  </article>
</body>
</html>

注意事项 ​

  • 不要为了视觉大小而滥用标题标签——使用 CSS 控制样式
  • <p> 标签内不能嵌套块级元素（如 <div>、<p>、<h1> 等）
  • 不要用多个 <br> 标签来制造间距，使用 CSS 的 margin 控制
  • <strong> 和 <em> 不是用来替代 <b> 和 <i> 的——它们有不同的语义
  • HTML 实体字符（如 <、>、&、"）在文本中需要转义
  • 标题层级不要跳级使用（如 h1 直接跳到 h3）

最佳实践 ​

  • 每个页面使用一个 <h1> 作为主标题
  • 标题层级从 h1 顺序递减，不要跳级
  • 优先使用 <strong> 和 <em>，避免 <b> 和 <i>
  • 使用 <mark> 高亮搜索关键词或重点内容
  • 使用 <blockquote> 和 <q> 标记引用，并添加 cite 属性
  • 使用 <code> 和 <pre><code> 标记代码片段
  • 使用 <time> 标签标记日期时间，便于机器解析
  • 使用 <small> 标记版权声明和附属信息

下一节

继续学习：链接与图片

参考链接 ​