异常教程
HTML <pre> 标签（手把手讲解）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在网页开发中，HTML 提供了丰富的标签来控制文本的呈现方式。其中 <pre> 标签是一个容易被低估但功能强大的工具，尤其在需要精确控制文本格式的场景下，它能帮助开发者快速实现特殊排版需求。本文将从基础语法、核心特性到实际应用场景，系统性地解析 <pre> 标签的使用方法，并通过具体案例帮助读者理解其价值与局限性。
一、HTML 标签的基础语法与核心功能
1.1 语法结构与基本用法
<pre> 标签的全称是 Preformatted Text，其核心作用是保留用户输入的 空格、换行和缩进。与普通 HTML 标签不同，<pre> 会直接按照代码中的原始格式渲染文本，无需额外处理。
基础语法示例：
<pre>
这是一段保留格式的文本，
其中的空格和换行符会被完整保留。
</pre>
当浏览器解析这段代码时，会严格遵循以下规则：
- 连续的多个空格会被显示为连续空格（而非合并为一个）
- 每行的缩进会被保留
- 硬换行符（
Enter键）会被识别为行分隔符
1.2 与普通文本的对比
假设我们有以下两段代码：
<!-- 普通文本 -->
<p>这是一个段落，
其中的换行会被忽略，
空格会被压缩为单个空格。</p>
<!-- 使用 <pre> 标签 -->
<pre>
这是一个预格式化段落，
换行符、空格都被保留，
并且文本会以等宽字体显示。
</pre>
渲染效果对比：
| 内容类型 | 空格处理 | 换行符处理 | 字体类型 |
|----------------|------------|------------|----------------|
| 普通 HTML 文本 | 自动压缩 | 忽略换行 | 浏览器默认字体 |
|
内容 | 完全保留 | 精确保留 | 等宽字体（如 Courier） |
二、
标签的高级用法与扩展技巧2.1 结合 CSS 实现格式化控制
虽然
<pre>标签默认使用等宽字体，但可以通过 CSS 进一步定制样式。例如：<pre style="font-family: 'Lucida Console', Monaco, monospace; background-color: #f5f5f5; padding: 10px;"> 这段文字使用自定义字体和背景色， 同时保留了原始的格式结构。 </pre>2.2 嵌套其他 HTML 标签的注意事项
在
<pre>标签内可以嵌套其他 HTML 元素，但需注意以下规则：
- 嵌套标签会覆盖
<pre>的默认样式（如<span>可以改变颜色）- 嵌套标签的空格和换行仍会被保留，可能影响布局
示例：
<pre> 这是一个 <span style="color: red;">红色文字</span>， 换行符和空格依然被保留。 </pre>2.3 与代码高亮库的协同使用
在展示代码时，常会结合
<pre>和<code>标签：<pre><code> def hello_world(): print("Hello, <pre> 标签!") </code></pre>此时可以配合代码高亮库（如 Prism.js）实现语法高亮：
<link href="prism.css" rel="stylesheet"> <script src="prism.js"></script> <pre><code class="language-python"> def hello_world(): print("Hello, <pre> 标签!") </code></pre>
三、
标签的典型应用场景3.1 保留特殊格式的文本
- 诗歌排版：
<pre>
静夜思
李白
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
- 表格结构：
<pre>
| 姓名 | 年龄 | 城市 |
|--------|------|--------|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
</pre>
3.2 展示代码与日志
在技术文档或开发者社区中，<pre> 标签常用于展示代码片段：
<pre>
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
</pre>
3.3 实现简单的布局效果
由于 <pre> 保留空格特性，可以配合等宽字体绘制 ASCII 艺术：
<pre>
/$$$$$$ /$$$$$$ /$$$$$$$$ /$$$$$$$ /$$$$$$
/$$__ $$ /$$__ $$|__ $$__/| $$__ $$|_ $$_/
| $$ \__/| $$ \__/ | $$ | $$ \ $$ | $$
| $$ /$$$$| $$$$$$ | $$ | $$$$$$$ | $$
| $$|____/ >$$__ $$ | $$ | $$__ $$ | $$
| $$ /$$| $$ | $$ | $$ | $$ \ $$ | $$
| $$$$$$/| $$ | $$ | $$ | $$ | $$ /$$$$$$
\______/ |__/ |__/ |__/ |__/ |__/|______/
</pre>
四、使用 标签的注意事项
4.1 性能与可读性权衡
- 避免过度使用：大规模使用
<pre>可能影响页面加载性能，应优先使用 CSS 实现格式控制 - 屏幕适配问题：等宽字体可能导致移动端显示过长，需配合
white-space: pre-wrap属性
<!-- 使用 CSS 控制换行 -->
<pre style="white-space: pre-wrap;
max-width: 100%;">
这段长文本会在必要时自动换行，
而不会横向溢出容器。
</pre>
4.2 常见误区与解决方案
- 标签闭合问题：忘记闭合
<pre>标签会导致后续所有内容都被格式化 - 特殊字符处理：若需显示
<、>符号，需转义为<、> - 浏览器兼容性：所有主流浏览器均支持
<pre>标签，但样式表现可能存在差异
4.3 与其他标签的对比
| 标签 | 主要用途 | 格式保留特性 |
|---|---|---|
<pre> | 保留原始文本格式 | 完全保留 |
<code> | 显示代码片段 | 自动压缩空格 |
<kbd> | 表示键盘输入 | 自动压缩空格 |
<samp> | 显示计算机输出结果 | 自动压缩空格 |
五、最佳实践与进阶技巧
5.1 优化代码展示的可读性
在技术文档中，可以结合 <pre> 和 <code> 标签，并添加行号：
<pre>
<code>
1. def function():
2. print("Hello World")
</code>
</pre>
5.2 处理动态内容的格式保留
若需在 JavaScript 中动态生成 <pre> 内容，需注意转义特殊字符：
const text = "这是一个包含 < 符号的文本";
document.querySelector("pre").textContent = text;
5.3 与 CSS Grid 的协同使用
通过 CSS 布局技术，可以将 <pre> 内容整合到复杂界面中：
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
</style>
<div class="grid-container">
<pre>左边内容</pre>
<pre>右边内容</pre>
</div>
结论
HTML <pre> 标签是一个功能独特且易于上手的工具，它通过保留原始文本格式，在诗歌排版、代码展示、日志输出等场景中发挥重要作用。开发者在使用时需注意其与 CSS 的协同、性能优化以及特殊字符的处理，才能最大化发挥其价值。随着前端技术的发展，<pre> 标签仍将在需要精确控制文本格式的场景中占据一席之地。掌握它的核心特性与使用场景，将帮助开发者更高效地解决实际开发中的排版问题。
本文通过系统性解析 <pre> 标签的功能、用法及最佳实践，帮助读者建立从基础认知到高级应用的完整知识体系。