HTML 文本标签

这一课你将能做到

1. 正确使用 h1-h6 构建有层级的标题大纲，不跳级、不滥用
2. 区分 strong/em 与 b/i 的语义差异，知道什么时候用哪个
3. 用 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：代码与预格式文本