code标签仅用于行内代码，语义为嵌入文本的短代码（如函数名、命令），不保留格式；多行代码必须用pre包裹code，且HTML字符需转义，否则解析错误。

code 标签只用于行内代码，不能替代 pre

<code> 的语义是「一段短小的、嵌入在普通文本中的代码」，比如函数名、变量、命令或路径。它不保留换行、空格，也不做语法高亮——浏览器会把它当普通内联文本渲染。如果你把多行代码硬塞进 <code> 里，缩进全丢，换行失效，可读性直接归零。

常见错误写法：

<p>调用 <code>fetch('/api/data')</code> 时要处理 <code>NetworkError</code> 和 <code>AbortError</code>。</p>

这是对的；但下面这种就是错的：

<p><code>function hello(name) {<br>  console.log(`Hi, ${name}`);<br>}</code></p>

浏览器会把三行压成一行，且所有空格被折叠。

pre + code 是标准组合，不是可选搭配

真正展示多行、带缩进、保留格式的代码块，必须用 <pre class="brush:php;toolbar:false;">&lt;/code&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;code&gt;&lt;code&gt;&lt;/code&gt; 更准确，对屏幕阅读器、SEO、样式隔离都有好处。&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;p&gt;正确结构示例：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;js&quot;&gt;const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];console.log(users.length);&lt;/code&gt;</pre> 注意：class 属性不是必须的，但加上如 <code>language-js 或 language-bash 能方便后续用 Prism.js 或 highlight.js 做语法高亮。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

容易踩的坑：

• 漏掉 或 ，导致后续页面布局错乱
• 在 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 内写 HTML 实体（如 &lt;code&gt;&lt;&lt;/code&gt;、&lt;code&gt;&gt;&lt;/code&gt;）没转义，浏览器会误解析为标签&lt;/li&gt;&lt;li&gt;用 CSS 给 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 设了 &lt;code&gt;overflow: hidden&lt;/code&gt; 却没配 &lt;code&gt;white-space: pre&lt;/code&gt;，结果换行又丢了&lt;/li&gt;&lt;/ul&gt;&lt;/p&gt; &lt;H3&gt;HTML 实体转义是硬要求，不是“建议”&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; 里写的任何字符，只要可能是 HTML 标签的一部分（比如 &lt;code&gt;&lt;div&gt;&lt;/code&gt;、&lt;code&gt; &lt;/code&gt;），就必须手动转义。浏览器不会因为你写了 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 就自动帮你逃逸。&lt;/p&gt; &lt;p&gt;必须转义的典型字符：&lt;ul&gt;&lt;li&gt;&lt;code&gt;&lt;&lt;/code&gt; → &lt;code&gt;<&lt;/code&gt;&lt;/li&gt;&lt;li&gt;&lt;code&gt;&gt;&lt;/code&gt; → &lt;code&gt;>&lt;/code&gt;&lt;/li&gt;&lt;li&gt;&lt;code&gt;&amp;&lt;/code&gt; → &lt;code&gt;&amp;&lt;/code&gt;&lt;/li&gt;&lt;/ul&gt; 否则这段代码：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;if (x &lt; 0 &amp;&amp; y &gt; 10) { ... }&lt;/code&gt;</pre> 会被解析成：一个 <code> 开始的非法标签，中间 <code>&& 报错，> 10) 又变成孤立文本——整段失效。

  开发时可用工具辅助：VS Code 插件 “Auto Rename Tag” 不管用，但 “Escape HTML Entities” 类插件能一键转义；或者写完复制到 freeformatter.com 快速处理。

  样式微调别碰 white-space，优先用 class 控制

  <pre class="brush:php;toolbar:false;"></pre> 默认是 white-space: pre，这是它能保留缩进的关键。很多人想“让代码块自动换行”，就去改这个值，结果 pre-wrap 看似友好，实则破坏缩进逻辑——尤其 JSON、Python 缩进敏感语言，一换行就语义错乱。

  更稳妥的做法：

  • 用 max-width + overflow-x: auto 让宽代码横向滚动，不折行
  • 给 <code> 加 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace，确保等宽
  • 通过 class 区分语言类型，比如 <code class="html">，再用 CSS 单独配颜色
  不要为了省事给 <pre class="brush:php;toolbar:false;"></pre> 加 line-height: 1 或 margin: 0，这些该由重置样式表统一管，别在单个代码块里硬写。

  最常被忽略的一点：服务端渲染或 CMS 输出的代码块，如果没做 HTML 实体转义，前端加再多 class 和 CSS 都救不回来——格式和语义，永远优先于外观。