A04 文本与段落

摘要：页面内容的主体是文字，而文字的呈现效果取决于标签选择。用同一个字号也能把内容排得好看，但结构会失效：标题不再可被检索，段落不再可被朗读软件识别。本文按「结构 → 强调 → 引用 → 代码 → 特殊字符」五类整理文本标签，并给出每组标签的选择依据与常见误用。
关键词：标题层级，段落，强调，引用，字符实体

所属：frontend/html / A-入门 ｜上一篇：A03-写出第一个页面 ｜下一篇：A05-链接与图片

1 引言

浏览器会给不同标签不同的默认样式，这带来一个误区：按外观选标签。h3 字号合适就用 h3，段落想要缩进就用多个  。外观由 CSS 负责，结构由 HTML 负责，两者混淆后页面的检索、朗读、样式复用同时失效。

本文的选标签原则是：先确定这段文字在内容里的角色，再选标签；外观留给 CSS。范围见表 1-1。

项	本文覆盖	本文不覆盖
结构类	h1 ~ h3、p、hr、br	完整语义化布局（A08）
强调类	strong、em、mark、small	样式化的加粗字号
引用类	blockquote、q、cite、abbr	脚注与参考文献排版
代码类	code、pre、kbd、samp	语法高亮与代码主题
字符	`<` `>` `&` ` ` 等实体	字符集与编码细节

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器可用	浏览器能打开 `localhost`
浏览器	Chrome 130+ / Edge 130+	地址栏 `about:version` 查看
前置	A03 的页面结构已掌握	能画出 html/head/body 三层
文件	`html-practice/text.html`	后缀 `.html`，编码 UTF-8

3 原理与实现

3.1 标题层级是一棵树

标题不是字号档位，而是内容大纲。浏览器的辅助技术、搜索引擎与自动目录都读取这棵树，如图 3-1 所示。

flowchart TD
    H1["h1 文档主题"] --> H2A["h2 第一部分"]
    H1 --> H2B["h2 第二部分"]
    H2A --> H3A["h3 子节"]
    H2A --> H3B["h3 子节"]
    H2B --> H3C["h3 子节"]

图 3-1 正确的标题层级树

图上可见：每个 h3 必有一个 h2 作为父级，全树只有一个根 h1；跳级会在大纲中出现空节点。

3.2 五类标签的写法

完整示例覆盖五类标签，可直接替换 body 内容运行。

<!-- 运行环境：Chrome 130+；body 内全部内容 -->
<h1>杭州的雨季</h1>

<h2>气候特征</h2>
<p>杭州的雨季集中在<strong>6 月至 7 月</strong>，年均降水量约 1450 毫米。</p>
<p>这段时间湿度常年在 <em>80% 以上</em>，衣物不易晾干。</p>

<h2>本地说法</h2>
<blockquote cite="https://example.com/hangzhou-climate">
  <p>梅雨一到，墙面先出汗。</p>
</blockquote>
<p>据 <abbr title="中国气象局">CMA</abbr> 统计，梅雨期平均持续 24 天。</p>

<h3>记录方式</h3>
<p>命令行记录当天湿度：<code>humidity --today</code>，输出示例：</p>
<pre><code>date       humidity
2026-06-18 92%
2026-06-19 88%</code></pre>
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存记录。<small>（数据仅作示例）</small></p>
<p>比较运算符写作 <code>&lt;</code> 与 <code>&gt;</code>，与号写作 <code>&amp;</code>。</p>

五类标签的选择依据见表 3-1。

类别	标签	语义	常见误用
结构	`h1` ~ `h3`	内容大纲的层级	为了字号用 h4/h5，导致大纲断裂
结构	`p`	一个段落	用 `br` 制造段间距
强调	`strong`	重要性（朗读会加重）	用 `b` 代替，失去语义
强调	`em`	语气强调（朗读会变调）	用 `i` 代替
强调	`mark`	与上下文相关的标记	当作高亮背景使用
引用	`blockquote`	块级引用，需包 `p`	直接放纯文本，不可嵌套段落
引用	`q`	行内引用，自动加引号	手写引号包住正文
引用	`abbr`	缩写，`title` 给全称	只在文中解释一次又反复展开
代码	`code`	行内代码	用等宽字体模拟
代码	`pre`	保留空白与换行的预格式块	内部不包 `code`，丢失语义
特殊字符	`<` `>` `&` ` `	转义字符	用 ` ` 排版缩进

三条规则：strong 与 em 可嵌套但不超过两层；pre 内部必须包 code；字符实体只在需要显示保留字符时使用，不用来排版。

4 验证与讨论

保存 text.html，浏览器打开，确认五类内容全部显示。
打开开发者工具 Console，执行 document.querySelectorAll('h1,h2,h3').length，预期输出 5。
对照表 4-1 检查默认呈现。
把 strong 改为 b，对比朗读软件（或系统朗读功能）的停顿差异，理解语义的区别。

检查项	预期结果	说明
标题字号	h1 > h2 > h3 逐级递减	默认样式
引用块	整段左缩进	blockquote 默认样式
预格式块	两行数据按原样对齐	pre 保留空白
特殊字符	页面显示 `<` `>` `&` 本身	实体解码
缩写悬停	显示「中国气象局」	abbr 的 title

讨论与局限。 默认样式下 mark 是黄色背景、small 是 80% 字号，这些外观都可由 CSS 改写，因此不能用外观反推标签。另外 blockquote 的 cite 属性只是元数据，浏览器不展示，引用来源的可见标注仍需正文说明。

5 常见问题

现象	原因	处理
预格式块内容挤成一行	外层用了 `p` 包裹 `pre`	`pre` 直接放在 `body` 或 `section` 内
页面出现多余的 `<`	代码里的 `<` 未转义	改写为 `<`
段落间距过大或过小	用 `br` 制造间距	段间用 `p`，间距交给 CSS
引用块里段落没有缩进	`blockquote` 内直接放文本	内部用 `p` 包裹
abbr 悬停无提示	缺少 `title` 属性	补 `title="全称"`

6 结论

序号	结论	依据
1	标题是内容大纲，不是字号档位	图 3-1
2	强调分「重要性」与「语气」两种，标签不同	表 3-1
3	引用块内部必须包段落	表 3-1
4	保留字符一律用实体写法	3.2 节代码

参考文献

[1] MDN Web Docs · HTML 文本处理基础，https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals（访问于 2026-10-29）
[2] HTML Living Standard · Text-level semantics，WHATWG，https://html.spec.whatwg.org/multipage/text-level-semantics.html（访问于 2026-10-29）