是纯语义 HTML 标签，仅用于解释性文本中标识变量名，不参与 JavaScript 运行、CSS 变量解析或代码高亮逻辑，不可嵌入 内，也不具备数据绑定能力。
HTML 中没有 var 函数，var 是 JavaScript 的声明关键字；而 <var></var> 是纯语义 HTML 标签，和变量运行、赋值、作用域完全无关——两者不能混用，也不能互相替代。
别把 <var></var> 当成 JS 变量容器
很多人在代码高亮场景里误以为给变量名套上 <var></var> 就能“绑定值”或“被高亮插件识别”，这是典型误解。<var></var> 不参与任何解析逻辑，SyntaxHighlighter、Prism、highlight.js 等主流高亮库**根本不会扫描或特殊处理 <var></var> 标签**。它们只依赖词法分析（AST 或正则）识别语法结构，而不是靠 HTML 语义标签。
- 错误写法：
<pre class="brush:php;toolbar:false;"><code>const <var>count</var> = 5;</code>
- 后果：高亮器看到的是普通文本
count，不会加 class，也不会触发变量名样式规则 - 正确做法：让高亮器自己识别变量名 —— 例如 Prism 会自动给
count加token variable类，你只需配好 CSS：.token.variable { color: #007acc; }
<var></var> 在代码块外的唯一合理用途
它只该出现在「解释性文本」中，用于告诉人类或辅助技术：“这个词代表一个可变的符号”，比如文档、教程、API 说明里的变量名引用。
- 适合：
调用 <code>fetchUser(<var>id</var>)时，id 必须是字符串类型 - 不适合：
<code>let <var>id</var> = '123';—— 这里id已在<code>内获得语法上下文，再套<var></var>属于冗余嵌套 - 浏览器默认样式是斜体，但若你用了自定义字体或重置了
font-style，记得补上：var { font-style: italic; }
CSS 自定义属性 var(--name) 和 <var></var> 标签毫无关系
这是最容易混淆的一点：CSS 里的 var(--name) 是函数，用于读取 --name 这个自定义属性的值；而 <var></var> 是 HTML 元素，连属性都不支持（比如不能写 <var data-value="x"></var>）。两者命名巧合，语义、作用域、使用时机全部不同。
立即学习“前端免费学习笔记（深入）”；
- 想动态显示 CSS 变量值？不能直接
content: var(--size)，得用counter-reset移花接木技巧 - 想标记数学公式里的变量？用
<var>b</var>没问题，但别指望它影响布局或响应 JS 修改 - 想让屏幕阅读器读出 “variable b”，确保没用
<code>包裹它 —— 否则可能读成 “code b”
真正容易被忽略的点是：语义标签必须用在对的地方。把 <var></var> 塞进 <code> 里，既破坏高亮器的 token 判断，又让辅助技术收到冲突信号；而把它当 JS 变量容器去操作 DOM，得到的永远是 null。它只负责“说清楚这是个变量名”，不负责“让它变成变量”。
