大家好，我是程序员柏风，AI 最全的 Vibecoding 学习地图 http://coderoadmap.cn 作者。

HTML 文本标签

这一课你将能做到

正确使用 h1-h6 构建有层级的标题大纲，不跳级、不滥用
区分 strong/em 与 b/i 的语义差异，知道什么时候用哪个
用 pre/code/blockquote/q/cite 正确展示代码、引用、术语等结构化文本

为什么要学

网页 90% 的内容是文本。但很多初学者只会 <p> 和 <div>，把加粗全靠 <b>、斜体全靠 <i>、代码片段直接塞进段落——结果是：屏幕阅读器读不出重点，搜索引擎抓不到代码示例，CSS 想统一样式都找不到钩子。

人话：文本标签就像 Word 里的「样式」面板——「标题 1」「强调」「引用」「代码」。你贴对了样式，排版、搜索、朗读全都自动正确；全用「正文」加手动加粗，后患无穷。

先建立图像

文本标签按用途分四组：

结构层级：h1 > h2 > h3 ... h6    （文档大纲）
段落容器：p / blockquote / pre  （一块文本）
行内语义：strong / em / code / q / mark / time / abbr
纯表现  ：br / hr               （换行与分隔，无语义）

关键区分：语义标签告诉机器「这是什么」，表现标签只告诉浏览器「长什么样」。HTML5 的原则是表现归 CSS，语义归标签。

跟着做

步骤 1：标题层级

新建 text.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本标签演示</title>
</head>
<body>
    <h1>Java 学习指南</h1>

    <h2>第一章：基础语法</h2>
    <p>本章介绍变量、类型、运算符。</p>

    <h3>1.1 变量声明</h3>
    <p>Java 是强类型语言……</p>

    <h3>1.2 基本类型</h3>
    <p>八种基本类型……</p>

    <h2>第二章：面向对象</h2>
    <p>本章介绍类与对象。</p>
</body>
</html>

规则：h1 全页一个，层级只降一级（h2 下面是 h3，不能直接跳 h4）。把页面想成一本书的目录，跳级的目录谁都看不懂。

步骤 2：段落与换行

<p>这是第一段。段落之间浏览器会自动留出间距，
    源码里的换行和多个空格会被合并成一个空格。</p>

<p>这是第二段。如果一定要在段内换行，<br>
    用 br 标签，比如写诗或地址。</p>

<hr>

<p>hr 是主题分隔线，表示前后内容话题转换。</p>

注意第一段源码里的换行——浏览器渲染时不会在那里换行。HTML 的空白折叠规则：连续空格、换行、制表符全部合并为一个空格。

步骤 3：强调——strong / em vs b / i

<p>
    <strong>警告：此操作不可撤销！</strong>
</p>
<p>
    我<em>真的</em>没有动那个文件。
</p>
<p>
    产品名 <b>UltraPhone 17</b> 已上市。
    学名 <i>Ginkgo biloba</i> 是银杏。
</p>

<strong>：内容重要，屏幕阅读器会重读；默认样式是粗体。
<em>：语气强调（重音），朗读时语调变化；默认样式是斜体。
<b>：纯视觉加粗，无额外含义（如产品名、关键词高亮）。
<i>：纯视觉斜体，用于学名、外文词、内心独白。

记忆法：strong/em 是给内容贴标签，b/i 是给眼睛看的装饰。

步骤 4：代码与预格式文本

<p>在 Java 中用 <code>System.out.println()</code> 输出内容。</p>

<pre><code>public class Hello {
    public static void main(String[] args) {
        System.out.println("保留    缩进和换行");
    }
}</code></pre>

<code>：行内代码，等宽字体。
<pre>：预格式文本，保留源码中所有空格和换行——代码块、ASCII 艺术、诗歌排版全靠它。
经典组合 <pre><code>：pre 管格式，code 管语义。

⚠️ 注意：HTML 源码里的 < 和 > 会被当标签解析。代码里有尖括号必须转义：

<pre><code>List&lt;String&gt; list = new ArrayList&lt;&gt;();</code></pre>

< 是 <，> 是 >，& 是 &。

步骤 5：引用与其他行内语义

<blockquote cite="https://example.com/speech">
    <p>求知若饥，虚心若愚。</p>
    <footer>—— 乔布斯，<cite>斯坦福演讲</cite></footer>
</blockquote>

<p>孔子说：<q>学而时习之，不亦说乎。</q></p>

<p>本文写于 <time datetime="2026-10-06">今天</time>，
    涉及 <abbr title="HyperText Markup Language">HTML</abbr> 基础，
    重点部分已<mark>高亮标记</mark>。</p>

<p>水的化学式是 H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<blockquote>：块级长引用，默认有缩进；cite 属性注明出处 URL。
<q>：行内短引用，浏览器自动加引号。
<cite>：作品名（书、演讲、文章标题），斜体。
<time datetime="...">：机器可读的日期，SEO 和日历插件能识别。
<abbr title="...">：缩写，鼠标悬停显示全称。
<mark>：高亮标记（默认黄底），表示「与当前上下文相关」。
<sub> / <sup>：下标/上标。

讲清楚要点

标题是大纲不是字号：想大字就调 CSS font-size，别用 h 标签凑效果。h1-h6 构成文档大纲，SEO 和无障碍工具都读它。
空白折叠：源码换行、多个空格在渲染时合并为一个空格。需要保留格式用 pre，需要强制换行用 br。
语义优先于样式：strong/em 有含义，b/i 纯装饰。默认样式可以靠 CSS 改成任何样子，语义不会变。
代码内容必须转义：<、>、& 在 HTML 里是语法字符，出现在文本或代码示例中必须写成 <、>、&。
time/abbr 这类标签是写给机器的：datetime、title 属性人看不见，但搜索引擎、屏幕阅读器、浏览器插件都能用。

你可能会懵的地方

p 里能套 div 吗？ 不能。p 是段落，内容模型只允许行内元素。<p><div>...</div></p> 浏览器会强制修正成 p 提前闭合，结构全乱。需要容器就用 div，别拿 p 当万能盒。
br 和 p 的间距什么区别？ br 是「同一段内换行」，行间无额外间距；p 是「新段落」，浏览器默认上下各留约 1em 外边距。写地址、诗用 br，写正文用 p。
pre 里的代码太宽跑出页面怎么办？ CSS 解决：pre { white-space: pre-wrap; } 允许长行折行，或 overflow-x: auto; 出横向滚动条。别为了排版破坏 pre 的语义。
em 嵌套 em 会怎样？ 表示「强调中的强调」，屏幕阅读器会进一步加强语气。视觉上浏览器不会自动变化，需要自己写 CSS（如 em em { color: red; }）。
strong 能用 CSS 改成不加粗吗？ 可以，strong { font-weight: normal; color: crimson; }。样式和语义解耦——这正是 HTML5 的设计哲学。

错法对照

错法	问题	正解
用 h3 做「小一号字」	大纲跳级，SEO 混乱	h 标签按层级用，字号用 CSS
`<b>重要：密码勿泄露</b>`	b 无重要性语义	`<strong>`
代码里直接写 `List<String>`	`<String>` 被当标签解析	`List<String>`
用多个 ` ` 缩进段落	滥用硬空格	CSS `text-indent: 2em;`
一整段文字套 pre 为了「保留格式」	pre 语义是预格式代码/艺术文本	普通段落用 p，换行交给浏览器
`<p>` 里套 `<ul>`	p 不能包含块级元素	结束 p 再写 ul
引用一大段话用 `<q>`	q 是行内短引用	块级引用用 blockquote

卡点急救

代码里的尖括号消失了：没转义。全局替换 < → <、> → >（先替换 & → &，避免二次转义）。
pre 里首行莫名缩进/空行：<pre> 后紧跟的换行符也会被渲染。写成 <pre><code>第一行...，让内容紧贴标签。
中文引号变成直引号：<q> 在不同浏览器加的引号不同（英文浏览器加 "）。中文内容建议直接手打「」，不用 q。
标题层级在 CMS 里乱掉：富文本编辑器常让用户自由选 h1-h6。约定内容区从 h2 开始（h1 留给页面标题），并在 CSS 里限制样式。

面试常问

strong 和 b、em 和 i 的区别？ strong/em 是语义标签：分别表示重要性和语气强调，屏幕阅读器会以重音朗读，默认样式是粗体/斜体。b/i 是纯表现标签，无语义，HTML5 中保留用于「文体上需要区分但无强调含义」的场景（如产品名、学名）。
如何展示一段保留格式的代码？ <pre><code> 组合：pre 保留空白与换行，code 声明语义；内部尖括号转义为实体；如需高亮，配合 highlight.js / Prism 等库。
h1 一页能有几个？ HTML5 规范上每个 sectioning 内容可有自己的 h1；工程实践推荐一页一个 h1，层级递进不跳级，利于 SEO 与屏幕阅读器大纲导航。

自测三问

写出展示 if (a < b && c > d) 这行代码的正确 HTML。
「这个单词要重读」和「这个外文词要斜体」分别用什么标签？为什么？
为什么源码里敲三个空格，页面只显示一个？想保留怎么办？

小结一句话

文本标签的核心是「语义对号入座」：标题给大纲、strong/em 给语气、code/pre 给代码、blockquote/q 给引用，样式的事全部交给 CSS。

延伸

MDN：HTML 文本基础
下一课：列表——无序、有序、定义列表与嵌套的正确姿势。