HTML 预格式化文本

Begindev 编辑部 March 25, 2026

HTML 默认的设计是合并空白。这意味着，你在代码里敲了再多的空格、Tab 缩进或回车换行，浏览器在渲染时都会把它们合并成一个空格。

通常这对网页布局很有好处（防止排版错乱），但在某些特殊情况下，你可能希望文本完全保留你在代码里输入的样子——包括所有的空格和换行。

这时，你就需要 <pre> 标签。

1. 理解 `<pre>` 标签

<pre> 是 "Preformatted"（预格式化）的缩写。

作用：告诉浏览器“不要动我的格式！”，完全按照我在 HTML 文件中输入的样子显示文本。
字体：<pre> 中的文本通常显示为等宽字体（如 Courier），这对于对齐字符非常有用。
特性：它会保留所有的空格和换行符。

2. 对比：普通文本 vs. 预格式化文本

让我们看看浏览器如何处理普通段落 <p> 和预格式化文本 <pre> 中的空白。

2.1 普通段落 `<p>`

<p>
    这    是     一   段    话。
    它        有         很      多     空   格
    和
    很
    多
    换行。
</p>

浏览器显示结果：

这是一段话。它有很多空格和很多换行。

(注意：所有的额外空格和换行都被合并成了一个空格。)

2.2 预格式化文本 `<pre>`

<pre>
    这    是     一   段    话。
    它        有         很      多     空   格
    和
    很
    多
    换行。
</pre>

浏览器显示结果：

    这    是     一   段    话。
    它        有         很      多     空   格
    和
    很
    多
    换行。

(注意：所有的空格、缩进和换行都完美保留了。)

3. 关键特性

保留空白：代码里的空格、Tab 和回车，屏幕上就有空格、Tab 和回车。
等宽字体：默认使用类似打字机的字体（每个字符宽度相同），非常适合对齐。
块级元素：<pre> 独占一行，默认占据全部可用宽度。

4. 实战示例

4.1 示例 1：展示代码片段

这是 <pre> 最常见的用途。为了语义化（让机器知道这是代码）和无障碍性，我们通常将 <code> 标签嵌套在 <pre> 标签内。

<pre> 负责格式（保留缩进）。
<code> 负责语义（告诉浏览器这是代码）。

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <h1>Python 函数示例</h1>
    <p>下面是一个简单的加法函数：</p>
    
    <pre>
        <code>
def add_numbers(a, b):
    # 这个函数返回两个数的和
    sum_result = a + b
    return sum_result

# 调用函数
result = add_numbers(5, 3)
print(f"结果是: {result}")
        </code>
    </pre>
    
    <p>注意：代码的缩进和换行被完美保留了！</p>
</body>
</html>

4.2 示例 2：ASCII 艺术与终端输出

ASCII 艺术完全依赖字符的精确定位。如果没有 <pre>，这些图形会瞬间乱成一团。

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <h2>简单的 ASCII 小房子</h2>
    <pre>
          /_\
         /   \
        |     |
        |  _  |
        | |_| |
        -------
    </pre>

    <h2>模拟终端输出</h2>
    <pre>
user@dev-machine ~ % ls -l
total 16
drwxr-xr-x   3 user  staff    96 Oct 20 15:21 Documents
-rw-r--r--   1 user  staff  1234 Oct 22 11:45 report.txt
user@dev-machine ~ % _
    </pre>
</body>
</html>

4.3 示例 3：结构化纯文本（日志或诗歌）

有时你需要展示像服务器日志这样对齐要求很高的文本，或者像诗歌这样换行即意境的内容。

<h2>服务器日志片段</h2>
<pre>
[2023-10-23 08:00:01] INFO  用户 'alice' 登录成功
[2023-10-23 08:00:05] DEBUG 处理请求 /api/data
[2023-10-23 08:00:10] ERROR 数据库连接失败...
</pre>

(如果没有 <pre>，这些日志会挤成一团，难以阅读。)

5. 重要注意事项：缩进陷阱

在使用 <pre> 时，你需要非常小心HTML 代码本身的缩进。

因为 <pre> 会保留所有空白，包括标签起始位置和你的文本内容之间的空白。

5.1 可能导致意外空格的写法：

<pre>
    Hello, World!
</pre>

结果： "Hello, World!" 前面会有很长一段空白（因为你在 HTML 代码里缩进了）。

5.2 正确的写法（如果你想顶格显示）：

<pre>Hello, World!</pre>

或者：

<pre>
def my_function():
    print("代码本身的缩进是可以的")
</pre>

6. 总结

<pre> 标签是你处理“所见即所得”文本的利器。

当格式、缩进、换行对内容含义至关重要时（如代码、艺术字、日志），请使用 <pre>。
对于普通的网页文本，继续使用 <p>，让浏览器帮你处理排版。
记住配合 <code> 标签来展示代码，这是专业开发者的好习惯。

1. 理解 <pre> 标签