单独使用不行，必须套，因为仅具语义而不保留格式，提供预格式化功能；标准写法是组合，兼顾语义与显示，并需转义HTML特殊字符。

为什么 <code> 单独用不行，必须套 <pre class="brush:php;toolbar:false;">&lt;/code&gt;&lt;/H3&gt;&lt;p&gt;因为 &lt;code&gt;&lt;code&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;code&gt;function foo() {\n return 1;\n}&lt;/code&gt;&lt;/code&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&gt;&lt;/code&gt; 是标准组合，语义清晰：外层说“这是预格式内容”，内层说“这是代码”&lt;/li&gt;&lt;li&gt;单独用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 缺少语义，SEO 和屏幕阅读器识别弱；单独用 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 格式全崩&lt;/li&gt;&lt;li&gt;现代写法推荐 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;js&quot;&gt;&lt;/code&gt;，方便配语法高亮&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;HTML 中 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 的空白处理规则&lt;/H3&gt;&lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 默认只保留空格、制表符、换行，但对 HTML 实体和行首缩进敏感——比如你写在 HTML 源码里的缩进，会被当成内容渲染出来。&lt;/p&gt;&lt;p&gt;使用场景：写文档示例、嵌入小段配置、展示命令行输出。&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;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/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.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/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;财经HTML高端海报生成&lt;/a&gt; &lt;p&gt;复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10828&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;ul&gt;&lt;li&gt;源码中换行前的空格会显示，所以建议 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 标签从行首开始写，或用注释消除缩进：&lt;code&gt;&lt;!-- --&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;...&lt;/code&gt;</pre>

<pre class="brush:php;toolbar:false;"></pre> 不自动换行，长代码会横向溢出；加 CSS white-space: pre-wrap 或 overflow-x: auto 更实用

IE8+ 都支持，无需 polyfill；但老版本 Safari 对 tab 渲染宽度不一致，建议用空格替代制表符

<code> 里要不要转义 <code>> &

要。所有出现在 <code> 内容里的 HTML 特殊字符，都得手动转义，否则会被浏览器解析成标签或实体。

常见错误现象：写 <code>if (x ，结果 被当成不完整标签，后续内容错位或消失。

• → <code><，> → >，& → &
• 别依赖 JS 动态插入来绕过——服务端渲染或静态 HTML 里漏转义，问题当场暴露
• 如果代码块较长，建议用 <script type="text/plain"></script> 存原始内容，再由 JS 解析后赋值到 <code>，避免手写出错

用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 展示带交互的代码片段时的陷阱</pre>

很多人直接把可运行的 HTML/JS 示例塞进 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;，结果点开页面就执行了——这不是演示，是事故。</pre>

使用场景：教学文档、组件库 API 示例、MDN 风格的交互提示区。

• 演示用的代码，必须确保不会自动执行：JS 不要自调用，HTML 不要带 onload、script 标签不能直接写在 <code> 里
• 想让用户一键运行？得额外加按钮 + 沙箱 iframe，不能靠原生 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 实现</pre>
• 复制功能容易忽略：纯文本复制会带上行号或空格缩进，需用 clipboard.js 或 navigator.clipboard.writeText() 提前清理格式

最常被忽略的是转义和缩进——看着渲染正常，一复制粘贴就语法报错，问题往往出在看不见的空格和没转义的 & 上。