是“preformatted text”的缩写，核心作用是原样保留空格、换行和制表符；它不是段落标记，语义和 完全不同，适用于终端输出、代码片段、ASCII 表格等需严格保留格式的场景。

pre 标签不是段落标记，而是预格式化容器

很多人看到 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 就下意识觉得是“paragraph”的缩写，其实完全不是。&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 是 “preformatted text” 的简写，核心作用只有一个：**原样保留空格、换行、制表符等空白字符**。它和 &lt;code&gt;&lt;p&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; 渲染时连你代码里缩进的 4 个空格、换行后的空行都会照单全收。&lt;/p&gt; &lt;H3&gt;什么时候必须用 pre 而不是 div 或 p&lt;/H3&gt; &lt;p&gt;以下场景不加 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 很难准确还原格式：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;显示终端命令输出（含多级缩进和空行）&lt;/li&gt; &lt;li&gt;嵌入代码片段（尤其是 Python、YAML、JSON 等对缩进敏感的语法）&lt;/li&gt; &lt;li&gt;展示带固定列宽的 ASCII 表格或日志时间戳对齐内容&lt;/li&gt; &lt;li&gt;渲染歌词、诗文等需严格保留换行与空格的文本&lt;/li&gt; &lt;/ul&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;white-space: pre&lt;/code&gt; CSS，但那只是样式模拟，语义上仍不正确。&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/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg&quot; alt=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&lt;/a&gt; &lt;p&gt;使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真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;H3&gt;pre 里能嵌套哪些标签？code 是最佳搭档&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 是块级元素，允许包含行内元素，但禁止直接嵌套 &lt;code&gt;&lt;p&gt;&lt;/code&gt;、&lt;code&gt;&lt;h2&gt;&lt;/code&gt; 这类块级标签（虽多数浏览器能容错渲染，但不符合 HTML5 规范）。&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;推荐组合：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;js&quot;&gt;console.log(&quot;hello&quot;);&lt;/code&gt;</pre> —— <code> 提供语义（这是代码），<pre class="brush:php;toolbar:false;"></pre> 提供格式（保留缩进换行）

可安全嵌套：<span></span>（用于高亮关键词）、<a></a>（跳转到某行）、<img alt="HTML中pre标签作用_HTML保留文本原始格式输出方法" >（行内图标）

避免嵌套：<div>、<code><section></section>、<blockquote></blockquote> —— 容易破坏预格式化流，也可能触发浏览器解析异常

常见坑：样式冲突、宽度溢出、SEO 影响

<pre class="brush:php;toolbar:false;"></pre> 默认用等宽字体（如 monospace），且不自动换行，容易撑破容器：

• 加 CSS 控制：用 overflow-x: auto 防横向滚动条失控，或 white-space: pre-wrap 允许长行换行（但会轻微改变原始格式）
• 别设 width 属性 —— HTML5 已废弃 <pre class="brush:php;toolbar:false;" width></pre>，无效且可能被忽略
• 搜索引擎能读取 <pre class="brush:php;toolbar:false;"></pre> 内文本，但不会把它当正文段落加权；若内容重要（如 API 响应示例），建议额外用 <details></details> 或 aria-label 补充说明

最常被忽略的一点：pre 本身不提供语法高亮，也不解析 HTML 实体。比如你写 <div>，它会原样显示为 <div>；但如果你直接写 <code><div>，浏览器会尝试解析成真实标签——所以实际使用中，HTML 特殊字符必须手动转义。</div>