<code>用于包裹完整可引用的代码字面量，<var>仅用于标注描述性文字中的单个变量名或占位符；二者语义互斥，不可嵌套，须通过空格和标签边界分隔以确保可访问性与语法高亮正确。
<code> 和 <var> 不是“联合使用”的关系，而是分工明确、语义互斥的两个标签。混用或嵌套会破坏可访问性、干扰语法高亮器，且违背 HTML5 语义规范。
什么时候该用 <code>，什么时候该用 <var>
关键看你想表达的对象性质：
-
<code>：包裹**完整、可引用的代码字面量**，比如函数名、关键字、字符串值、CSS 自定义属性名、命令行指令等。它表示“这段文本就是代码本身” -
<var>：只包裹**单个变量名、参数名、占位符符号**（如id、PORT、n），且仅出现在描述性文字中。它表示“这个词代表一个会被赋值或替换的符号” - 二者不能互相替代：
Math.PI是常量标识符，进<code>；timeout是函数调用时传入的参数名，进<var>
为什么不能把 <var> 塞进 <code> 里
这种写法：<code>const <var>count</var> = 42;</code>
- 语法高亮器（如 Prism 或 highlight.js）依赖完整代码结构识别 token 类型；
<var>打断了原始字符串流，导致count不被识别为.token.variable - 屏幕阅读器收到冲突语义：外层
<code>说“这是可执行代码”，内层<var>又说“这只是个名字”，逻辑矛盾 - HTML 解析器不报错，但语义污染——你本想标注变量名，结果把它塞进了代码块里，等于告诉机器“变量名是代码的一部分”，而非“变量名在代码中被使用”
正确组合方式：用空格和标签边界分隔语义
目标是让人类和辅助技术都清楚：“这里调用了某段代码，其中某个位置填的是变量名”。示例：
立即学习“前端免费学习笔记（深入）”；
<p>调用 <code>fetchUser(</code><var>id</var><code>)</code>，其中 <var>id</var> 必须为字符串类型</p>
-
<code>包裹固定结构：fetchUser(和) -
<var>独立标注中间那个可变部分：id - 视觉上连贯，语义上清晰：代码块 ≠ 变量名，变量名是插入点
- 同理适用于 API 路径：
GET /api/posts/<var>id</var>，<var>只包id，不包斜杠或前后字符
容易被忽略的样式与兼容性细节
<var> 默认是斜体，但很多项目 CSS 重置（如 * { font-style: normal !important; }）会让它失效；而 <code> 默认是等宽字体，但可能被全局 font-family 覆盖。
- 必须显式加固样式：
var { font-style: italic; }+code { font-style: normal; font-family: ui-monospace, 'SFMono-Regular', monospace; } - 旧版 IE（≤8）不识别
<var>，会降级为普通 inline 元素；若需兼容，可用<span class="var">替代并统一加类 - 不要给
<var>加data-value试图模拟变量绑定——它不会触发 JS 自动读取，纯属冗余属性
