HTML预格式化文本怎么用_HTML的pre标签保留格式方法-html教程-PHP中文网

HTML预格式化文本怎么用_HTML的pre标签保留格式方法

蓮花仙者

发布： 2025-09-15 23:53:01

原创

585人浏览过

pre标签能保留文本原有格式，用于展示代码、诗歌等需保持空格换行的内容，配合CSS可优化样式，提升可读性与用户体验。

html预格式化文本怎么用_html的pre标签保留格式方法

HTML预格式化文本，简单来说，就是告诉浏览器：“老老实实按我写的格式显示，别自作主张！” 核心就是

<pre>

登录后复制

标签，它能保留文本中的空格、换行，让代码、诗歌之类的东西原汁原味地呈现出来。

<pre>

登录后复制

标签是你的秘密武器。

HTML的pre标签保留格式方法

为什么需要pre标签？

HTML默认会忽略文本中的多余空格和换行。如果你想在网页上展示一段代码，或者一首诗，直接写在HTML里，格式肯定乱套。想象一下，一首李白的《静夜思》变成了一行字，意境全无！这时候，

<pre>

登录后复制

标签就派上用场了。它就像一个“格式保护罩”，让你的文本按照你书写的样子展示出来。

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

pre标签的常见用法

展示代码片段： 这是
```
<pre>
```
登录后复制
最常见的用途。把代码放在
```
<pre>
```
登录后复制
标签里，代码的缩进、换行都会被保留，方便读者阅读。当然，配合
```
<code>
```
登录后复制
标签效果更佳，
```
<code>
```
登录后复制
标签用于表示代码文本。
```
<pre><code>
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");
</code></pre>
```
登录后复制
这段代码在浏览器中会保留缩进和换行，清晰易读。如果不使用
```
<pre>
```
登录后复制
，代码就会变成一坨，可读性极差。
展示诗歌或文本：
```
<pre>
```
登录后复制
也适合展示对格式有要求的文本，比如诗歌、歌词、或者一些特殊的文本排版。
```
<pre>
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
```
登录后复制
诗歌的换行和空格都会被保留，还原诗歌的原始排版。这玩意儿要是没
```
<pre>
```
登录后复制
，直接就成了一行字了，味道全变了。
创建简单的文本界面： 在一些简单的场景下，可以用
```
<pre>
```
登录后复制
来模拟文本界面的效果。虽然现在有更好的方法（比如使用CSS），但
```
<pre>
```
登录后复制
仍然是一个快速实现的方法。
```
<pre>
+---------------------+
|  Welcome to my page  |
+---------------------+
|                      |
|  Enter your name:   |
|                      |
+---------------------+
</pre>
```
登录后复制
这种方式虽然简陋，但在一些不需要复杂样式的场景下，还是挺方便的。想象一下，用
```
<pre>
```
登录后复制
快速搭建一个简单的命令行界面，是不是有点意思？

如何自定义pre标签的样式？

虽然

<pre>

登录后复制

标签保留了文本格式，但它的默认样式可能不太美观。比如，默认字体是等宽字体，而且没有代码高亮。这时候，就需要用CSS来定制

<pre>

登录后复制

标签的样式。

修改字体： 可以通过
```
font-family
```
登录后复制
属性来修改字体。一般来说，代码会使用等宽字体，比如
```
monospace
```
登录后复制
或者
```
Courier New
```
登录后复制
。
```
pre {
  font-family: monospace;
}
```
登录后复制
这能让代码看起来更专业。不同的字体，代码的显示效果也会有所不同，选择一个自己喜欢的字体很重要。

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

124

查看详情
添加代码高亮： 代码高亮可以让代码更易读。有很多JavaScript库可以实现代码高亮，比如Prism.js、Highlight.js等。这些库可以根据代码的语法，自动给不同的代码元素添加不同的颜色。
```
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>

<pre><code class="javascript">
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");
</code></pre>
```
登录后复制
使用代码高亮库，可以让你的代码片段看起来更专业，更易于理解。代码高亮是提升用户体验的重要手段。
调整背景颜色和边框： 可以给
```
<pre>
```
登录后复制
标签添加背景颜色和边框，让它看起来更醒目。
```
pre {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}
```
登录后复制
这样可以让
```
<pre>
```
登录后复制
标签和周围的内容区分开来，提高可读性。背景颜色和边框的搭配，可以根据自己的喜好来调整。

pre标签的注意事项

不要在
```
<pre>
```
登录后复制
标签里使用HTML标签： 虽然
```
<pre>
```
登录后复制
标签会保留文本格式，但它仍然会解析HTML标签。如果在
```
<pre>
```
登录后复制
标签里使用HTML标签，可能会导致意想不到的结果。如果要展示HTML代码，需要对HTML标签进行转义。
```
<pre>
<p>This is a paragraph.</p>
</pre>
```
登录后复制
使用HTML实体转义，可以确保HTML代码被正确显示，而不是被浏览器解析。这是一个容易犯错的地方，需要特别注意。
```
<pre>
```
登录后复制
标签里的文本不会自动换行： 如果
```
<pre>
```
登录后复制
标签里的文本太长，可能会超出容器的宽度。这时候，可以使用CSS的
```
word-wrap
```
登录后复制
属性来解决这个问题。
```
pre {
  word-wrap: break-word;
}
```
登录后复制
```
word-wrap: break-word
```
登录后复制
可以让长文本自动换行，避免超出容器的宽度。这是一个很实用的技巧，可以提高页面的兼容性。
```
<pre>
```
登录后复制
标签的默认样式可能不一致： 不同浏览器的
```
<pre>
```
登录后复制
标签的默认样式可能略有不同。为了保证在所有浏览器中显示效果一致，最好使用CSS重置
```
<pre>
```
登录后复制
标签的样式。
```
pre {
  margin: 0;
  padding: 0;
  font-size: 1em;
}
```
登录后复制
重置
```
<pre>
```
登录后复制
标签的样式，可以避免不同浏览器之间的差异。这是一个良好的编程习惯，可以提高代码的可维护性。