code标签专用于语义化标记短小内联技术标识符，如函数名、命令、属性值；多行代码须用pre+code嵌套，且<、>、&必须转义为、&。
code 标签不是“加个等宽字体”的装饰手段，用错就等于把代码塞进普通段落里——屏幕阅读器读不准、搜索引擎不识别、协作时别人得猜你写的是命令还是 UI 文字。
什么时候该用 code，而不是 pre 或纯文本
核心判断标准：是否为「短小、内联、上下文明确的技术标识符」。
- ✅ 适合：
fetch()、localStorage.setItem()、display: flex、npm install、userProfile - ❌ 不适合：
function hello() { return 'Hi'; }（多行逻辑 → 改用<pre class="brush:php;toolbar:false;">）</li> <li>❌ 不适合：<code>点击【提交】按钮
（UI 文字 → 用 - ❌ 不适合：
<div class="header"></div>（含 HTML 字符但未转义 → 必须写成 <div class="header"></div>）
code 里哪些字符必须手动转义
code 是 HTML 元素，不是代码沙盒。浏览器先解析标签结构，再渲染内容。只要出现 、<code>>、&，就必须转义。
- 危险写法：
if (x 10)→ 浏览器会尝试解析为标签开头，可能中断 DOM - 安全写法：
if (x < 5 && y > 10) - CSS 属性如
display: flex不需转义（没出现那三个字符） - 哪怕只是写个 HTML 元素名
<header>，也得写成<header></header>
如何搭配 var、kbd、samp 增强语义
单靠 code 表达力有限；组合使用才能让机器和人都理解「谁在做什么、输出什么」。
立即学习“前端免费学习笔记（深入）”；
- 变量或参数名用
<var>x</var>，标识符（函数/类/属性名）才用<code>parseInt</code> - 用户输入操作写成
<kbd>Ctrl+C</kbd>，别塞进code - 程序输出示例用
<samp>Hello World</samp>，不是code - 组合示例：
<var>timeout</var> 参数传入 <code>setTimeout</code> 后，控制台输出 <samp>timeout exceeded</samp>
样式与可访问性容易被忽略的点
默认等宽字体不可靠，且屏幕阅读器对 code 内容有特殊朗读逻辑，所以内容必须干净、准确。
- CSS 中显式声明字体栈：
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; - 避免在
code里塞注释、省略号或未定义缩写（如req而不说明是 request） - 不加额外空格或换行——
code本身不保留格式，所有缩进都会塌成单空格 - 不要用
code包裹路径（如/api/v1/users），那是 URL，更适合<a href>或<dfn>+ 注释
真正难的不是记住规则，而是每次敲下 <code> 时，下意识问一句：这个东西，是代码本身，还是我借它表达别的意思？一旦混淆，语义就断了。
