code标签不能嵌套自身或作容器，仅用于单行短代码；多行代码必须用pre包裹code，因code是行内元素会忽略换行与空格，而pre+code语义正确、样式可控、可访问性强。
code 标签本身不能嵌套自己，也不该作为容器使用；它只负责包裹单行、短小的代码片段，比如函数名或属性名。想展示多行、带缩进或换行的代码块，必须和 pre 配合——这是唯一符合语义且浏览器渲染可靠的方式。
为什么单独用 code 无法显示多行代码
因为 code 是行内元素，默认忽略换行符和多余空格。你写成：
<p>调用方式：<code>fetch('/api')</code><br><code>.then(res => res.json())</code></p>
浏览器会把它压成一行显示，br 标签在 p 内虽生效，但两个 code 之间没有语义关联，也无法对齐缩进。
- 行内元素不保留空白符（空格、制表符、换行）
- 多个
code并列 ≠ 一个代码块，屏幕阅读器会分别读作“fetch 括号斜杠 api 括号”“点 then 括号 res 箭头 res 点 json 括号”，失去上下文 - CSS 控制困难：无法统一设置背景、边框或内边距到“整个代码段”
pre + code 是唯一标准组合
语义上：pre 表示“预格式化文本”，code 表示“这段是计算机代码”。二者嵌套，既保留格式，又声明意图。
立即学习“前端免费学习笔记（深入）”；
- 必须
pre包裹code，不能反过来（code里不能放pre） - 样式上，
pre code可统一设字体、背景、padding；单独给pre设样式会丢失代码语义 - 可访问性上，屏幕阅读器遇到
pre+code组合，会读作“预格式化代码块”，再逐行读内容
正确写法：
<pre><code class="js">fetch('/api')
.then(res => res.json())
.catch(err => console.error(err));</code></pre>
嵌套其他语义标签增强表达力
code 可以安全嵌套 var、kbd、samp 等，用于区分代码中的不同角色：
-
var表示变量或参数：<code>console.log(<var>msg</var>);</code> -
kbd表示用户输入：<code>按下 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd> 刷新</code> -
samp表示程序输出：<code>运行结果：<samp>Hello, World!</samp></code>
注意：这些标签都必须在 code 内部，不能跨出边界；它们本身也是行内元素，不能包 div 或 p。
容易被忽略的兼容性细节
老版本 Safari 和部分安卓 WebView 对 pre code 的换行处理不一致，尤其当代码行超长时：
- 默认不换行，可能横向溢出容器
- 加
white-space: pre-wrap或word-break: break-all能缓解，但会破坏缩进语义 - 更稳妥的做法是加
overflow-x: auto并确保父容器有明确宽度 - 如果用 Prism.js 或 Highlight.js，它们自动注入
pre+code，但需确认初始化逻辑是否覆盖了自定义 class
真正难的不是怎么写，而是每次看到别人把 code 当 div 用、或者用 br 模拟换行时，得忍住不手抖去改 DOM 结构。
