HTML 文本与排版标签：把一段话排得像个样子

上一篇我们把页面的骨架立起来了，但 body 里只有孤零零几行字，读起来像草稿。真实世界里一篇文章该有标题层级、有段落、有重点标注、有列表，读着才不累。

这一篇专门聊”文字内容”这一层。你会看到 HTML 给文字准备了一整套标签，用对了，哪怕没写一行 CSS，文章也已经挺耐看。

标题：用层级组织内容

HTML 有六级标题，从 <h1> 到 <h6>：

<h1>这是一级标题（最大，通常整页只有一个）</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级（最小）</h6>

几个关键点：

数字越小字越大，h1 最大，h6 最小；
标题不只是”变大变粗”，它更重要的是语义层级：h1 是文章主标题，h2 是章节，h3 是小节……搜索引擎和屏幕阅读器靠这个层级来理解文章结构；
不要为了”字大”而用标题。有人想让某行字大一点就用 <h1>，这是错误的。想改大小请用 CSS。语义错位会让无障碍工具和 SEO 抓瞎；
习惯上一页只有一个 h1，代表页面主题。多个 h1 会稀释重点，虽不报错但不专业。

段落：文字的基本单位

正文用 <p> 包起来：

<p>这是第一段。浏览器会自动在段落之间留出空行，你不用手动敲回车。</p>
<p>这是第二段。注意：你在代码里敲的换行和多个空格，浏览器默认都会合并成一个空格。</p>

新手常踩的坑：想在段落里换行，就猛敲回车，结果页面上毫无变化。因为 HTML 会把连续的空白（空格、换行、制表符）折叠成一个空格。真要换行，用 <br />：

<p>第一行<br />第二行（这里真的换行了）</p>

但 <br /> 是”内容里的换行”（比如地址、歌词、诗歌），不要用它来做段落间距，那是 CSS 的活儿。滥用 <br> 做布局是上古坏习惯。

强调文字：加粗与斜体

<p>这是<strong>非常重要</strong>的内容。</p>
<p>这是<em>需要强调语气</em>的内容。</p>

<strong> 表示”语义上重要”，默认加粗；
<em> 表示”语气强调”，默认斜体。

你可能听过 <b> 和 <i>。它们的区别是：<b>/<i> 只管外观（粗体/斜体），<strong>/<em> 还带语义（重要/强调）。现代写法优先用 <strong> 和 <em>，对 SEO 和无障碍更友好。当你只是想让某词视觉上突出但不强调重要性时，才用 <b>。

列表：把并列的东西排整齐

HTML 有三种列表，几乎天天用。

无序列表（小圆点）

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

ul 是 unordered list，li 是 list item。每个 li 前面自动带个小圆点。

有序列表（数字序号）

<ol>
  <li>打开冰箱</li>
  <li>把大象放进去</li>
  <li>关上冰箱</li>
</ol>

ol 是 ordered list，会自动从 1 开始编号。想从别的数开始，加 start 属性：<ol start="3">；想用字母或罗马数字，用 type：<ol type="A">（A、B、C）或 type="I"（I、II、III）。

定义列表（术语+解释）

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，负责页面结构</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，负责页面外观</dd>
</dl>

dl 是定义列表，dt 是术语（definition term），dd 是解释。适合做”名词解释""参数说明”这类内容。

列表还能嵌套，比如多级菜单：<ul> 里再放 <ul>，会自动缩进显示层级。

引用：让文字显得有出处

短引用（行内）

<p>正如那句老话：<q>学而不思则罔</q>，光敲代码不思考是不行的。</p>

<q> 会自动加上引号（不同语言引号样式不同）。

长引用（整段）

<blockquote>
  <p>这是一段从别处引来的话，通常会缩进显示，表示"这不是我说的"。</p>
  <cite>——某位前辈</cite>
</blockquote>

<blockquote> 用于跨行的大段引用，浏览器默认会缩进。<cite> 标出出处，对版权和可读性都好。

代码与预格式文本

写教程经常要贴代码，有两个标签很实用：

<p>用 <code>console.log()</code> 可以在控制台打印内容。</p>

<pre>
function hello() {
  console.log("保留空格和换行");
}
</pre>

<code>：行内代码片段，等宽字体显示；
<pre>：预格式文本，原样保留空格和换行，常和 ` 配合贴大段代码。

注意：在 HTML 里直接写 < 或 > 会被当成标签。贴代码时要转义：< 写成 <，> 写成 >，& 写成 &。很多编辑器有”格式化粘贴为代码”功能能自动转义。

分割线与水平线

<p>上面一段</p>
<hr />
<p>下面一段</p>

<hr /> 是一条水平分割线，表示”主题在这里切换”。它也是自闭合标签。

特殊字符怎么写

有些字符在 HTML 里有特殊含义，不能直接敲，要用”实体”表示：

想显示	写成	说明
`<`	`<`	小于号
`>`	`>`	大于号
`&`	`&`	和号
空格（不断行）	` `	防止被折叠
`©`	`©`	版权符号
`"`	`"`	引号
`¥`	`¥`	人民币符号

记住前三个最常用，尤其是贴代码和写”小于号”的时候。实体以 & 开头、分号结尾，中间是名字或 #数字。

常见错误与排查

标题乱跳级：从 h1 直接到 h4，屏幕阅读器用户会迷路，应 h1→h2→h3 顺序；
用 br 做段落间距：应该用 <p> + CSS 的 margin；
用 b/i 代替 strong/em：丢失语义，不利于无障碍；
列表里直接写文字没包 li：<ul>苹果</ul> 不合法，必须 <li> 包；
代码里没转义尖括号：导致标签被误解析，页面错乱。

动手小练习

写一篇”我的自我介绍”，包含 h1、两三个 h2 小节、若干段落、一个无序列表（爱好）、一个有序列表（今天做的事）；
用 <blockquote> 引用一句你喜欢的话，并用 <cite> 标出处；
在段落里用 <code> 展示一段命令，注意把 < 转义成 <；
故意把 h1 跳到 h4，用屏幕阅读器模拟插件（或开发者工具的无障碍树）看看结构是否奇怪。

一篇像样的文章长这样

<h1>如何煮一碗好吃的泡面</h1>
<p>泡面看似简单，其实<strong>门道不少</strong>。下面分三步。</p>

<h2>第一步：烧水</h2>
<p>水要<em>彻底烧开</em>，否则面饼散不开。</p>

<h2>第二步：下面</h2>
<ol>
  <li>放入面饼</li>
  <li>加调料包</li>
  <li>等三分钟</li>
</ol>

<h2>第三步：开吃</h2>
<blockquote>美食当前，慎言慢嚼。</blockquote>

你看，没写一行 CSS，结构已经清清楚楚。

把它串起来：写一篇带格式的笔记

用纯 HTML（不写 CSS）写一篇”今天学了什么”的笔记：一个 <h1> 当标题；两三个 <h2> 当小节（比如”学到的标签""踩的坑""明天计划”）；正文用 <p>；用无序列表列”学到的标签”，用有序列表列”明天的计划”；用 <blockquote> 引一句你喜欢的名言并 <cite> 标出处；用 <code> 展示一行你敲过的命令（记得把 < 写成 <）。完成后你会发现：哪怕零样式，结构清晰的文章已经很好读——这就是语义标签的价值。

新手常问（FAQ）

Q1：为什么我敲的换行在网页上不生效？ HTML 会把连续空白折叠成一个空格。真要换行用 <br />，但段落之间应该用 <p> 而不是一堆 <br>。

Q2：<b> 和 <strong> 显示一样，用哪个？ 显示一样，但 <strong> 带”重要”语义，对屏幕阅读器和 SEO 更友好。单纯想视觉加粗才用 <b>。

Q3：标题能从 <h2> 直接跳 <h4> 吗？ 能显示，但不推荐。标题层级代表文档结构，跳级会让读屏软件用户”迷路”，也影响 SEO 对结构的理解。

这一篇你该记住的

文字内容靠一套语义标签来组织：六级标题 <h1>~<h6> 表达层级（不是用来调大小，一页一个 h1），<p> 是段落（空白会被折叠，换行用 br 但别用它做间距），<strong>/<em> 比 <b>/<i> 更推荐（带语义），三种列表 <ul>/<ol>/<dl> 覆盖绝大多数并列场景，引用和代码标签让内容更专业。特殊字符用实体转义。

当文字排好了，页面还是”死”的——不能点、没图看。下一篇我们讲链接与图片，正是这两个标签，把网页从”纸质书”变成了”可以逛的地方”。

前端开发