code标签仅用于语义声明段落内单行代码标识，不负责样式；多行代码须用<pre>嵌套，UI文字禁用；需转义HTML字符，推荐显式设置等宽字体栈及inline-block对齐。
code 标签不是容器，它只负责语义声明——告诉浏览器“这段是代码”，不负责换行、缩进、高亮或样式控制。用错地方，轻则格式塌陷，重则 DOM 破损。
什么时候必须用 code，而不是 pre 或纯文本
判断标准只有一个：是否嵌在段落中、是否单行、是否需保持行高一致。
- ✅ 正确场景：
fetch()、useState、npm install、/src/api/index.ts—— 这些都是上下文依赖的短标识，应直接用code包裹 - ❌ 错误场景：
function hello() { return 'hi'; }—— 多行函数体，code会压成一行，必须改用<pre><code>嵌套 - ❌ 错误场景：
点击【提交】按钮—— UI 文字不是源代码，用button或普通文本更合适
code 的合法属性与实用技巧
code 支持所有全局属性，但真正常用且安全的只有三个：class、id、title。
-
class：用于 CSS 控制字体、背景、内边距等，例如class="js"可被 Prism.js 识别语言 -
id：方便锚点跳转或 JS 操作，如id="error-handler" -
title：鼠标悬停提示，适合解释缩写或非常规命名，如title="AbortSignal 实例" - ⚠️ 避免用
style内联样式——它难复用、难维护，且易与主题冲突
HTML 字符转义是硬性要求，漏掉就解析失败
只要 code 内容含 、<code>>、&，就必须转义，否则浏览器会尝试解析为标签，导致内容消失或结构错乱。
立即学习“前端免费学习笔记（深入）”；
- 写
x < 5 && y > 0，而不是x 0 - 写
<div class="app">，而不是<div class="app"> <li>工具建议：VS Code 插件 “Auto Rename Tag” 不管用，得靠手动或预处理脚本（如 remark-html）自动转义</li> <h3>样式控制的关键点：别依赖默认，但别过度干预</h3> <p>浏览器默认给 <code>code设了font-family: monospace，但这不够稳定。实际部署时需显式声明：- 推荐字体栈：
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace - 必须加
display: inline-block或vertical-align: middle，否则和周围文字基线不对齐 - 禁用
white-space: pre—— 它会让长命令溢出容器，且破坏行内流布局 - 背景色和圆角可加，但内边距建议 ≤ 4px，避免撑开段落行高
最容易被忽略的是边界感：有人把整段 Shell 脚本塞进
code，有人把console.log()单独包一层pre。记住，code的职责从来不是“看起来像代码块”，而是“这里是代码”。语义对了，样式才不会翻车。 - 推荐字体栈：
