code标签仅用于行内代码，语义为嵌入文本的短代码（如函数名、命令），不保留格式；多行代码必须用pre包裹code，且HTML字符需转义，否则解析错误。
code 标签只用于行内代码，不能替代 pre
的语义是「一段短小的、嵌入在普通文本中的代码」，比如函数名、变量、命令或路径。它不保留换行、空格，也不做语法高亮——浏览器会把它当普通内联文本渲染。如果你把多行代码硬塞进 里，缩进全丢，换行失效，可读性直接归零。
常见错误写法：
<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 是标准组合，不是可选搭配
真正展示多行、带缩进、保留格式的代码块，必须用 包裹 。前者负责保留空白与换行，后者提供语义（这是代码，不是诗歌）。单独用 没问题，但加 更准确，对屏幕阅读器、SEO、样式隔离都有好处。
正确结构示例：
<pre class="brush:php;toolbar:false;"><code class="js">const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];console.log(users.length);</code>
注意：class 属性不是必须的，但加上如 language-js 或 language-bash 能方便后续用 Prism.js 或 highlight.js 做语法高亮。
容易踩的坑：
- 漏掉
或，导致后续页面布局错乱 - 在
<code></code> 内写 HTML 实体（如 <code>、<code>></code>）没转义，浏览器会误解析为标签</code>
- 用 CSS 给
设了overflow: hidden却没配white-space: pre，结果换行又丢了
HTML 实体转义是硬要求，不是“建议”
你在 会被解析成：一个 开发时可用工具辅助：VS Code 插件 “Auto Rename Tag” 不管用，但 “Escape HTML Entities” 类插件能一键转义；或者写完复制到 freeformatter.com 快速处理。 更稳妥的做法： 不要为了省事给 最常被忽略的一点：服务端渲染或 CMS 输出的代码块，如果没做 HTML 实体转义，前端加再多 class 和 CSS 都救不回来——格式和语义，永远优先于外观。<code></code> 里写的任何字符，只要可能是 HTML 标签的一部分（比如 <code><div>、<code> </code>），就必须手动转义。浏览器不会因为你写了 <code><code></code> 就自动帮你逃逸。<p>必须转义的典型字符：</p>
<ul>
<li><code> → <code></code></code></li>
<li>
<code>></code> → <code>></code>
</li>
<li>
<code>&</code> → <code>&</code>
</li>
</ul>
<p> 否则这段代码：</p>
<pre class="brush:php;toolbar:false;"><code>if (x 10) { ... }</code>
开始的非法标签，中间 && 报错，> 10) 又变成孤立文本——整段失效。样式微调别碰 white-space，优先用 class 控制
默认是 white-space: pre，这是它能保留缩进的关键。很多人想“让代码块自动换行”，就去改这个值，结果 pre-wrap 看似友好，实则破坏缩进逻辑——尤其 JSON、Python 缩进敏感语言，一换行就语义错乱。
max-width + overflow-x: auto 让宽代码横向滚动，不折行 加 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace，确保等宽，再用 CSS 单独配颜色 加 line-height: 1 或 margin: 0，这些该由重置样式表统一管，别在单个代码块里硬写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
