<var>标签仅用于自然语言中语义标注变量名，不参与文档结构、不可嵌套块级元素、不替代MathML数学表达，其italic默认样式具可访问性意义。
var 标签不参与文档结构逻辑，只提供语义标注
var 标签在 HTML 中既不是容器元素，也不影响 DOM 层级、渲染流或可访问性树的结构逻辑。它只是一个内联语义标签，浏览器不会因为它改变布局、触发重排，也不会将其纳入表单提交、焦点管理或脚本作用域中。
常见错误现象：把 <var> 当成类似 <span> 的“通用包装器”，在里面塞 <sup>、<sub> 甚至 <math> —— 实际上，<var> 只应包裹纯文本变量名（如 r、callback），不能承载公式结构。
-
<var>r<sup>2</sup></var>是可接受的，因为<sup>是格式修饰，不破坏“r 是变量名”这一语义 -
<var><math><mi>r</mi></math></var>是冗余且无效的，MathML 已自带<mi>语义，叠加<var>反而干扰辅助技术解析 -
<var><code>Math.PI</code></var>错误：<code>表示字面量，<var>表示变量名，二者语义冲突
var 标签的父子关系必须符合 HTML 内联模型
var 是短语内容模型（phrasing content）元素，只能出现在可包含文本的上下文中，比如 <p>、<li>、<figcaption> 或 <dd> 里。它不能作为块级元素的直接子元素（如 <div>、<section>），也不能包裹 <h3>、<ul> 等块级标签。
典型误用：<div><var>user_id</var></div> 虽然能渲染，但违反了语义层级 —— <var> 不该承担“区域标识”功能；真正需要结构化时，应该用 <dl> + <dt>/<dd> 或 ARIA role="region" 显式声明。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确位置：
<p>参数 <var>userId</var> 必须为字符串</p> - ❌ 错误嵌套：
<var><h3>配置项</h3><code>PORT</code></var>—— 混淆语义层级，<h3>不是变量名 - ⚠️ 边界模糊：
<pre><code>fetch(<var>url</var>)</code></pre>看似合理，但实际应由语法高亮器处理变量识别；手写<var>在<code>内会干扰 token 解析
var 标签与 CSS 和辅助技术的联动逻辑
var 的语义价值只有在 CSS 未覆盖默认样式、且辅助技术启用时才完整生效。它的默认样式 font-style: italic 不是装饰，而是可访问性提示的一部分：屏幕阅读器会读作 “variable r”，而非 “italic r”。一旦项目全局重置 font-style，这个信号就丢失了，而 DOM 中又没有其他属性补足语义。
容易被忽略的兼容性细节：
- IE ≤ 8 完全忽略
<var>，当作未知 inline 元素，既无样式也无语义播报 - 若使用 CSS Reset（如 normalize.css 后加
* { font-style: normal; }），必须显式恢复：var { font-style: italic; } - 下划线命名（如
<var>_private</var>）需额外 CSS 控制text-decoration，否则下划线会被误读为强调而非命名约定 - 不要依赖
document.querySelector('var')来提取“变量值”——它返回的是元素节点，.textContent只是字符串，和 JS 变量无关
var 标签在数学文档中的真实定位：描述层，非表达层
HTML 本身没有数学表达能力。var 标签只属于「描述层」：它说明“这里有个叫 x 的东西”，但不负责“x 怎么显示、怎么对齐、怎么和 π 相乘”。真正的数学排版必须交由 MathML 或 KaTeX/LaTeX 渲染引擎完成。
所以你在写线性代数方程时，<var>A</var><sup>−1</sup> 可以用于文字说明，但绝不能替代 <math><msup><mi>A</mi><mo>−1</mo></msup></math>。前者是“提到 A⁻¹ 这个符号”，后者才是“正确渲染 A⁻¹ 这个数学对象”。
- ✅ 文档说明中：
<p>矩阵 <var>A</var> 的逆记作 <var>A</var><sup>−1</sup></p> - ❌ 公式主体中：
<p><var>A</var><sup>−1</sup><var>b</var> = <var>x</var></p>—— 缺少运算符间距、矩阵括号、字体一致性，无法被数学引擎识别 - ⚠️ 混合风险：
<math><mi><var>A</var></mi></math>多余，<mi>已含变量语义，<var>叠加反而污染 MathML 结构
真正难的不是怎么写 <var>，而是判断什么时候不该写 —— 它只在你“用自然语言解释公式”时才有意义；一旦进入公式主体，就得换工具。
