<code> 标签仅适用于单行内联代码，因其不保留换行、缩进和空格；多行代码必须用 <pre><code> 组合，前者负责格式保留，后者声明语义，且需转义 HTML 字符如
code 标签只适合单行内联代码，别用来包裹多行代码块
<code> 是 HTML 的语义化行内元素，设计初衷是标记文档中的一小段计算机代码，比如函数名、变量名或命令。它默认不换行、无缩进、不保留空格——浏览器会把连续空格和换行都压成一个空格。所以如果你直接写：
<code>
function hello() {
console.log('hi');
}</code>
渲染出来就是 function hello() { console.log('hi'); }，所有格式全丢。
展示多行代码必须用 pre + code 组合
真正能保留缩进、换行和空格的，是 <pre> 元素。它本身有预格式化语义，但缺乏代码语义；而 <code> 缺乏格式保留能力。两者嵌套才是标准解法：
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
这样既保留了换行缩进，又告诉浏览器这是代码内容。注意：<pre> 会继承父容器宽度并可能横向溢出，建议配合 CSS 控制：
立即学习“前端免费学习笔记（深入）”；
- 加
overflow-x: auto实现横向滚动 - 用
tab-size控制 tab 显示宽度（如tab-size: 2） - 避免在
<code>内写 HTML 字符（如<），要转义为
code 标签常见误用：当成「高亮」或「样式容器」
很多人给 <code> 加 background 或 font-family，指望它自动变代码块。但问题在于：
- 它不会阻止文字折行，长代码可能在单词中间断开
- 没有默认等宽字体保障（需显式设
font-family: monospace） - 无法区分关键字、字符串等语法成分（
<code>不做语法高亮）
如果真需要高亮，得靠 JavaScript 库（如 Prism.js）或服务端渲染，且仍应以 <pre><code> 为容器结构。
HTML 实体转义是硬性要求，漏掉就会出错
在 <code> 或 <pre><code> 中写 HTML 特殊字符时，必须手动转义，否则浏览器会尝试解析它们：
-
<→ -
>→> -
&→&
例如想展示 <div class="box">，写成 <div class="box">。漏转义会导致标签被解析、内容消失，甚至破坏后续 DOM 结构。
实际用的时候，最常被忽略的是 <code><pre> 和 <code> 的职责分工：前者管“怎么显示”，后者管“这是什么”。混用或单用都容易让代码片段变形或语义丢失。
