标签用于预格式化文本，保留空格和换行。1. 它与html默认处理方式不同，能原样显示代码、诗歌等内容；2. 可嵌套内联元素如<a>、<code>等，常与<code>标签结合使用以展示代码；3. 需对特殊字符进行html实体编码或使用<pre class="brush:php;toolbar:false;"><code>组合；4. 支持css样式控制，如字体、背景色、行高及自动换行；5. 与<div>或<p>的区别在于空白符的处理方式；6. 在响应式设计中可通过overflow和white-space属性处理长文本，确保不同屏幕下的可读性。</p><p><img src="https://img.php.cn/upload/article/001/431/639/175144194630009.png" alt="html中pre标签用法 html中pre保留格式文本显示"></p><p>使用<code><pre class="brush:php;toolbar:false;"></code>标签，你可以在HTML中保留文本的原始格式，包括空格和换行。简单来说，它能让你的代码片段、诗歌或者任何需要精确格式的内容，在网页上“原样”呈现。</p><img src="https://img.php.cn/upload/article/001/431/639/175144194659249.png" alt="html中pre标签用法 html中pre保留格式文本显示" /><p>解决方案</p><img src="https://img.php.cn/upload/article/001/431/639/175144194639190.png" alt="html中pre标签用法 html中pre保留格式文本显示" /><p><code><pre class="brush:php;toolbar:false;"></code>标签的核心功能是预格式化文本。这意味着浏览器会按照文本在HTML源代码中的排版方式来显示它，而不会忽略空格、制表符和换行符。这与HTML处理文本的默认方式截然不同，默认情况下，HTML会将多个连续的空格压缩为一个，并且忽略换行符。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"   style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><img src="https://img.php.cn/upload/article/001/431/639/175144194794844.png" alt="html中pre标签用法 html中pre保留格式文本显示" /><p>基本用法非常简单：</p><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false;">
  这段文本
  将会按照
  你写的格式显示。
  包括 空格 和 换行。

这段代码在浏览器中会完全按照上面的格式显示，而不是像普通文本那样被压缩成一行。

<pre class="brush:php;toolbar:false;">&lt;/code&gt;标签内可以包含其他内联元素，比如&lt;code&gt;&lt;a&gt;&lt;/code&gt;、&lt;code&gt;&lt;code&gt;&lt;/code&gt;、&lt;code&gt;&lt;strong&gt;&lt;/code&gt;等，以便对文本进行进一步的样式化或添加链接。&lt;/p&gt;&lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签的一个常见用途是显示代码片段。但是，直接将代码放入&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签中可能会有问题，因为HTML会将一些特殊字符（如&lt;code&gt;&lt;&lt;/code&gt;和&lt;code&gt;&gt;&lt;/code&gt;）解释为标签。为了避免这种情况，你需要对这些字符进行HTML实体编码。例如，&lt;code&gt;&lt;&lt;/code&gt;应该被替换为&lt;code&gt;<&lt;/code&gt;，&lt;code&gt;&gt;&lt;/code&gt;应该被替换为&lt;code&gt;>&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;或者，更方便的方法是结合使用&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;和&lt;code&gt;&lt;code&gt;&lt;/code&gt;标签：&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt; <html> <head> <title>我的网页</title> </head> <body> <h1>你好，世界！</h1> </body> </html> &lt;/code&gt;</pre><p><code><code>标签用于表示代码文本，而<pre class="brush:php;toolbar:false;">&lt;/code&gt;标签则负责保留代码的格式。大多数代码高亮库（比如Prism.js或Highlight.js）都推荐使用这种组合方式。&lt;/p&gt;&lt;p&gt;如何自定义&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签的样式？&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg&quot; alt=&quot;Wechat Article Html&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot;&gt;Wechat Article Html&lt;/a&gt; &lt;p&gt;将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求&quot;转成微信格式&quot;、&quot;生成公众号文章 HTML&quot;、&quot;排版到微信草稿箱&quot;、&quot;微信粘贴格式&quot;时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;虽然&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签会保留文本格式，但你仍然可以使用CSS来控制它的外观。比如，你可以修改字体、颜色、背景色、行高等。&lt;/p&gt;&lt;pre class='brush:css;toolbar:false;'&gt;pre { font-family: monospace; /* 使用等宽字体 */ background-color: #f0f0f0; /* 设置背景色 */ padding: 10px; /* 添加内边距 */ overflow: auto; /* 如果内容超出容器，则显示滚动条 */ white-space: pre-wrap; /* 允许长文本换行 */ }</pre><p><code>white-space: pre-wrap;是一个特别重要的属性，它可以让<pre class="brush:php;toolbar:false;">&lt;/code&gt;标签内的长文本自动换行，而不会超出容器的宽度。这对于显示较长的代码行非常有用。&lt;/p&gt;&lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签与其他HTML元素有什么区别？为什么不用&lt;code&gt;&lt;div&gt;&lt;/code&gt;或者&lt;code&gt;&lt;p&gt;&lt;/code&gt;？&lt;/p&gt;&lt;p&gt;主要区别在于对空白字符的处理方式。&lt;code&gt;&lt;div&gt;&lt;/code&gt;和&lt;code&gt;&lt;p&gt;&lt;/code&gt;等标签会忽略多余的空格和换行符，并将多个连续的空格压缩为一个。而&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签则会保留所有空白字符，按照文本在源代码中的格式显示。&lt;/p&gt;&lt;p&gt;此外，浏览器通常会为&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签应用一个默认的等宽字体（monospace），这使得它非常适合显示代码或需要精确对齐的文本。&lt;/p&gt;&lt;p&gt;虽然你可以使用CSS来模拟&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签的效果，但这样做通常比较麻烦，而且可能会引入一些意想不到的问题。直接使用&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签通常是更简单、更可靠的选择。&lt;/p&gt;&lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签在响应式设计中需要注意什么？&lt;/p&gt;&lt;p&gt;在响应式设计中，你需要确保&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签内的内容在不同屏幕尺寸下都能正确显示。一个常见的问题是，如果&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签内的文本太长，可能会导致页面出现水平滚动条。&lt;/p&gt;&lt;p&gt;为了解决这个问题，你可以使用&lt;code&gt;overflow: auto;&lt;/code&gt;或&lt;code&gt;overflow-x: auto;&lt;/code&gt;属性来让&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签在内容超出容器时显示滚动条。&lt;/p&gt;&lt;p&gt;此外，&lt;code&gt;white-space: pre-wrap;&lt;/code&gt;属性也可以帮助你处理长文本，让它在容器内自动换行。&lt;/p&gt;&lt;p&gt;最后，你可能需要根据不同的屏幕尺寸调整&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签的字体大小和内边距，以确保文本的可读性。&lt;/p&gt;&lt;pre class='brush:css;toolbar:false;'&gt;pre { overflow-x: auto; white-space: pre-wrap; font-size: 0.8em; /* 在小屏幕上减小字体大小 */ } @media (min-width: 768px) { pre { font-size: 1em; /* 在大屏幕上恢复字体大小 */ } }</pre><p>总结来说，<code><pre class="brush:php;toolbar:false;"></pre>标签是一个非常有用的HTML元素，可以让你在网页上保留文本的原始格式。通过结合使用<code>标签和适当的CSS样式，你可以轻松地显示代码片段、诗歌或者任何需要精确格式的内容。在响应式设计中，要注意处理长文本，确保内容在不同屏幕尺寸下都能正确显示。