HTML中如何设置预格式化文本及pre标签的作用
什么是预格式化文本
在网页开发中，有时需要保持文本的原有排版格式，包括空格、换行以及制表符的位置，使内容在浏览器中以编写时的样子直接呈现。这种需求常见于展示代码片段、配置文件、诗歌或需要严格对齐的数据表格。普通HTML段落会将多个连续空格合并为一个，并忽略源代码中的换行，因此无法直接满足这一要求。
pre标签的作用
HTML提供 <pre> 标签用于定义预格式化文本。它的核心作用是告诉浏览器按照文本在源代码中的确切排列进行渲染，保留所有空格、制表符和换行符。也就是说，写在 <pre> 标签内的内容会原样输出，不会经过HTML的空白折叠与自动换行处理。
此外，<pre> 元素默认会使用等宽字体，这在展示代码或需要对齐的纯文本时非常直观，有助于阅读与理解。
如何使用pre标签
使用 <pre> 标签的方法十分简单，只需将需要保持格式的文本包裹在 <pre> 与 </pre> 之间即可。对于代码示例，通常结合 <code> 标签以语义化地标识代码内容。
为了便于在支持代码高亮的编辑器中展示，可以将 <pre> 与 class 或特定属性配合使用，例如在一些在线示例中会以 textarea 模拟输入区，或用特定类名触发高亮。
基本示例
下面展示一个使用 <pre> 标签输出多行文本且不改变排版的例子：
<pre> 姓名 年龄 城市 张三 28 北京 李四 34 上海 王五 22 广州 </pre>
结合code标签展示代码
在展示程序代码时，习惯上将 <code> 放入 <pre> 内部，以兼顾语义与格式：
<pre><code> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>示例页面</title> </head> <body> <h1>欢迎</h1> <p>这是一段演示文字。</p> </body> </html> </code></pre>
展示带特殊字符的代码
由于 <pre> 内部需转义 HTML 特殊字符，否则会被解析为标签。例如在展示含 <div> 的代码时，应写作 <div>：
<pre><code>
// 创建容器
var container = document.createElement('div');
container.innerHTML = '<span>示例</span>';
document.body.appendChild(container);
</code></pre>注意事项
<pre> 会保留所有空白和换行，因此长行内容可能导致水平滚动条出现，影响小屏设备体验。
默认等宽字体虽利于代码阅读，但在非代码场景可能显得不协调，可通过CSS调整字体族（但本文不讨论内联样式）。
若要在 <pre> 内显示HTML标签，需要对 < 转义为 <，> 转义为 >，避免被浏览器解析为真实元素。
在语义上，<pre> 适用于保留原始格式的文本，不应仅因需要固定宽度而滥用。
应用场景举例
在实际项目中，<pre> 常用于如下情形：
技术文档中嵌入示例代码或配置脚本。
展示日志文件、错误追踪信息或命令行交互过程。
排版诗歌、歌词或其他依赖换行的文艺作品。
在教程或博客中直观呈现数据表的对齐效果。
小结
<pre> 标签是HTML中专门用于预格式化文本的元素，能够完整保留源码中的空格、换行与缩进。它在代码展示、文本对齐与保留原始布局方面具有不可替代的作用。使用时需注意特殊字符的转义以及可能带来的显示宽度问题，从而在保证可读性的同时发挥最佳效果。