var标签仅语义化标注变量名，不声明、不存储、不绑定值，也不参与计算或JS执行；它只向辅助技术表明“此处为变量符号”，如<p>设<var>r</var>为半径</p>中<var>r</var>仅标识符号r，而非数值或可运算实体。
var 标签根本不是变量声明工具，它不声明、不存储、不绑定任何值，更不参与数学计算或 JS 执行。你写 <var>x</var>，浏览器不会把它当变量处理，JS 也读不到“x 的值”——它只是告诉辅助技术：“这里出现的是一个变量名”。
为什么var不能用来“声明”数学变量
HTML 的 var 是语义标签，不是运行时容器。它的设计目标是标注文本中「被提及的符号名」，而非承载数值或逻辑：
- 它没有
value属性，document.querySelector('var').value返回undefined - 它不会自动映射为 JS 变量，
<var id="a">a</var>后执行console.log(a)报ReferenceError -
data-属性（如data-value="3.14"）仅是自定义数据，需手动读取并转换，不触发任何自动解析 - 内容始终是字符串：
document.querySelector('var').textContent返回"x"，不是数字42或表达式结果
var 在数学公式里怎么用才不破坏语义
它只适用于「描述性文本」中明确指代变量符号本身，且必须严格拆解公式结构：
- ✅ 正确：
<p>设 <var>r</var> 为半径，则面积 <var>A</var> = π<var>r</var><sup>2</sup></p>—— 每个<var>包裹单个符号，<sup>独立控制上标 - ❌ 错误：
<var>A = πr²</var>—— 整个等式不是变量名，语义错位 - ❌ 错误：
<var>x<sub>i</sub></var>——<sub>必须在外层，正确写法是<var>x</var><sub><var>i</var></sub> - ❌ 错误：
<math><var>a</var></math>—— MathML 已有<mi>处理变量，嵌套<var>冗余且无效
和 code 配合时最容易踩的坑
var 和 code 语义不同，混用会干扰语法高亮器、屏幕阅读器和样式继承：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误嵌套：
<code>const <var>count</var> = 42;</code>——<var>在<code>内失去语义边界，Prism 等高亮器可能无法识别 token - ✅ 正确组合：
<p>调用 <code>fetch(</code><var>url</var><code>)</code>，其中 <var>url</var> 应为有效字符串</p> - ⚠️ 注意：不要用
<var><code>x</code></var>——<code>已表示可执行字面量，再套<var>冲突 - 全局 CSS 重置（如
* { font-style: normal !important; }）会让<var>彻底失去斜体提示，必须显式加var { font-style: italic; }
真正需要数学排版时该选什么
如果你的目标是上下标对齐、运算符间距控制、可缩放矢量渲染或屏幕阅读器正确朗读“a 的平方”，<var> 就到此为止：
- 原生方案：
<math><mi>a</mi><mo>=</mo><mi>b</mi><msup><mi>c</mi><mn>2</mn></msup></math>—— 语义精准，支持 ISO 数学规范 - 主流方案：KaTeX 写
$$a = b^2$$，MathJax 渲染为 SVG/HTML+CSS，兼容性好 - 禁止混用：
<math><var>a</var></math>不合法，MathML 不认<var> - 下划线变量（如
_private）必须走 KaTeX 的\mathit{\_private}或 MathML 的<mi>_private</mi>，<var>无数学排版能力
最常被忽略的一点：即使你严格按规范用了 <var>，只要项目 CSS 重置了 font-style，它的语义视觉提示就消失了——而屏幕阅读器仍可能读作 “variable x”，人机理解就此脱节。
