<code>标签仅用于语义化标记段落内短小、内联的代码片段（如函数名、命令），不保留换行缩进；多行代码必须用<pre><code>嵌套，前者保格式，后者表语义。
code 标签不是代码高亮工具，也不是多行容器——它只负责语义化地标记一段**短小、内联的计算机代码**，比如函数名、命令、变量或属性名。
什么时候该用 code 标签
它只适合嵌在普通段落中、不换行、不缩进的单个技术名词或调用片段：
- ✅ 正确场景：
fetch()、useState、npm install、/src/utils.js、display: flex - ❌ 错误场景：整段函数体、JSON 配置、Shell 脚本、HTML 片段（如
<div>）——这些必须转义后塞进<pre><code></code></pre>，否则会解析失败或格式崩坏 - ⚠️ 注意：写
x < 5时，<必须转义为，否则浏览器当成标签开头，后续内容可能消失
code 单独用和嵌套在 pre 里的区别
根本差异在于「语义」和「格式保留」是否同时满足：
-
code单独用：有语义（告诉浏览器“这是代码”），但无格式保留能力——换行、缩进、连续空格全被压平 -
pre单独用：能保留缩进与换行，但语义是“预格式化文本”，不是“代码”，SEO 和读屏器无法识别语言类型 -
pre套code：两者缺一不可。结构必须是<pre><code>...</code></pre>，高亮库（如 Prism.js）才认得出来 - 别写成
<code><pre>...</pre></code>——code是行内元素，不能包块级pre，HTML 解析会出错
CSS 样式要加在谁身上
样式目标必须明确，否则容易白配：
立即学习“前端免费学习笔记（深入）”；
-
code元素本身：设font-family: ui-monospace, Consolas, monospace，避免依赖浏览器默认字体；别设white-space: pre，它会破坏行内布局 -
pre元素：必须加overflow-x: auto防止长代码撑破容器；可设背景色、圆角、内边距 -
pre code组合选择器：设display: block，否则code作为行内元素不响应pre的宽高和滚动控制 - 别给
code单独设width或margin——它不是容器，强行设置会导致排版错乱
最容易被忽略的是混用边界：有人把 console.log() 塞进 pre，也有人把整个 docker-compose.yml 粘贴进裸 code。判断标准只有一个——是否需要保留原始换行和缩进。除此之外，所有 HTML 特殊字符都得手动转义，漏一个 就可能让后面半页 HTML 渲染异常。
