code标签是HTML中唯一语义正确的行内代码标记，仅用于段落中单个函数、变量等；多行代码必须用pre包裹code，二者缺一不可。
code 标签不是“加个等宽字体”的装饰工具，它是 HTML 中唯一语义正确的行内代码标记。用错位置、混用结构或漏转义，轻则排版断裂，重则整段 HTML 解析失败。
什么时候必须用 code 而不能用 pre
只在段落中提一个函数、变量、命令或属性名时，才该用 code。它不保留换行、缩进、多余空格，也不撑开行距——这正是它适合嵌入普通文本的原因。
- ✅ 正确：
<p>调用 <code>fetch()前需创建AbortController</p> —— 渲染为一行，基线对齐，读屏器读作“fetch 函数” - ❌ 错误：
<p>调用 <pre><code>fetch()</code></pre> 前...</p>——pre是块级元素，会强行换行并增加上下 margin，破坏段落流 - ❌ 错误：
<p>使用 <code>console.log("hi")输出</p> —— 里面含引号和括号没问题，但若出现<或>（如写x < 5），必须转义为x ，否则浏览器误解析为标签
多行代码块必须用 pre 套 code，缺一不可
pre 负责保留缩进、换行和空格；code 负责声明“这是代码”，而非普通预格式文本。两者分离会导致语义丢失或格式塌陷。
- ✅ 正确：
<pre><code>function greet(name) {<br> return `Hello, ${name}!`;<br>}</code></pre>—— 高亮库（如 Prism.js）能识别语言，SEO 可索引，读屏器知其为代码 - ❌ 错误：
<code>function greet() { ... }</code>—— 所有换行缩进被压成单行，无法阅读 - ❌ 错误：
<pre>function greet() { ... }</pre>—— 搜索引擎当普通文本处理，语法高亮失效，无障碍支持弱 - ⚠️ 注意：
pre默认横向溢出容器，建议加 CSS：overflow-x: auto+tab-size: 2控制 tab 宽度
code 标签本身不提供高亮，别指望它自动变色
code 只是语义容器，不解析语法、不打 class、不加颜色。所谓“高亮”，本质是 JS 库（如 Prism.js 或 highlight.js）扫描 pre 下的 code 元素，再根据语言类型给不同 token（如 const、"string"、// comment）添加 class，最后靠 CSS 上色。
立即学习“前端免费学习笔记（深入）”；
- 必须确保结构是
<pre><code class="js">.../pre>，且 class 值符合高亮库约定（如language-js、language-python） - 别给
code加white-space: pre：它会让长命令在行内硬折断，且破坏与周围文字的基线对齐 - 内联样式如
<code style="background:#eee">npm install</code>可临时用，但无法区分语法成分，也难维护
容易被忽略的 HTML 实体转义硬规则
所有出现在 code 或 pre 内的 HTML 特殊字符，都必须手动转义。这不是“好看问题”，是解析安全问题。
- 必须转义：
<→，<code>>→>，&→& - 常见翻车点：
<div class="box">必须写成<div class="box">；<code>if (x < 5 && y > 0)必须写成if (x 0) - 漏转义的后果不是“显示不对”，而是后续 HTML 结构错乱、部分内容消失、甚至脚本执行中断
最常被混淆的是职责边界：pre 管“怎么显示”，code 管“这是什么”。把它们当样式开关用，迟早会在某次发布后发现代码段全挤成一行，或者页面下半截直接空白。
