pre标签用于保留文本原有格式，包括空格、换行和缩进，常用于显示代码、日志或ASCII艺术，需用<pre>和</pre>包裹内容，浏览器会以等宽字体原样呈现。

在html中，想要保留文本原有的格式（比如空格、换行、缩进），可以使用 <pre> 标签。这个标签的作用是告诉浏览器：按照文本原本的样子显示内容，不要忽略多余的空格和换行。

什么是 pre 标签？

<pre> 是 “preformatted text” 的缩写，表示“预格式化文本”。浏览器在渲染时会保留其中的：

• 空格（包括多个连续空格）
• 换行符（回车）
• 制表符（Tab 缩进）

通常浏览器会用等宽字体（如 Courier）显示 <pre> 中的内容，便于对齐和代码展示。

如何使用 pre 标签？

只需要把需要保持格式的文本放在 <pre> 和 </pre> 之间即可：

立即学习“前端免费学习笔记（深入）”；

 这是第一行     这行前面有四个空格         更多缩进 连续    多个    空格 

上面的代码会原样显示缩进、空行和空格，不会被浏览器合并或忽略。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

常见用途示例

1. 显示代码片段：

 function hello() {     console.log("Hello, world!"); } 

2. 展示日志或命令输出：

 Starting server... [OK] Port 3000 is available. [INFO] Listening on http://localhost:3000 

3. ASCII 艺术或表格对齐：

 +-----------------+---------+ | Name            | Age     | +-----------------+---------+ | Alice           | 25      | | Bob             | 30      | +-----------------+---------+ 

注意事项

虽然 <pre> 保留格式，但仍有几点需要注意：

• 仍可结合 css 修改字体、颜色、背景等样式
• 如果内容过长，可能超出容器，建议配合 overflow:auto 使用
• 不能自动识别和高亮代码语法，如需美化代码可搭配 Prism.js 或 Highlight.js

基本上就这些。只要你想让网页显示的文字“怎么写的就怎么呈现”，<pre> 就是最简单直接的方法。不复杂但容易忽略细节，掌握它对展示结构化文本很有帮助。