pre标签能保留文本原有格式，用于展示代码、诗歌等需保持空格换行的内容，配合CSS可优化样式，提升可读性与用户体验。
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; }这能让代码看起来更专业。 不同的字体，代码的显示效果也会有所不同，选择一个自己喜欢的字体很重要。
-
添加代码高亮： 代码高亮可以让代码更易读。 有很多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>
标签的样式，可以避免不同浏览器之间的差异。 这是一个良好的编程习惯，可以提高代码的可维护性。
总而言之，
<pre>
标签是一个简单而强大的工具，可以让你在网页上展示各种格式化的文本。 掌握
<pre>
标签的用法，可以让你更好地控制网页的显示效果，提高用户体验。
css javascript word java html js 浏览器 工具 为什么 JavaScript css html break JS word