<var>标签仅用于语义标注变量名，不存储值、不参与计算、不影响逻辑；适用于文档中提及变量名的场景，如公式说明、API路径占位、函数参数等。
HTML 里 <var> 标签根本不是用来“定义变量”的
它不存储值、不参与计算、不绑定 JavaScript 变量，也不影响运行逻辑。浏览器看到 <var>x</var>，只当它是普通文本加了个语义标记——告诉辅助技术“这串字符是个变量名”，仅此而已。
常见错误现象：
- 写
<var id="count">42</var>后试图用document.getElementById('count').value拿到数字 42 → 实际得到的是字符串"42" - 在
<script>里直接引用x，报ReferenceError: x is not defined - 把整段 JS 代码包进
<var>，比如<var>let a = 1 + b;</var>→ 语义错、样式错、读屏错
<var> 该用在哪几个真实场景
只在解释性文档中出现变量“名字”时才用，核心是“提及”，不是“执行”。
适合的使用场景：
- 数学公式讲解：
<p>圆面积公式：<var>S</var> = π × <var>r</var>²，其中 <var>r</var> 是半径</p> - API 文档路径占位：
GET /api/v1/users/<var>id</var> - 函数参数说明：
调用 <code>fetchData(<var>config</var>)时，config 必须包含 timeout 和 retry 字段 - 环境变量标注：
将 <var>DATABASE_URL</var> 配置到 <code>.env文件中
注意：<var> 内容必须是单个标识符（如 url、maxRetries），不能是表达式、数字、单位或带空格的短语。
<var> 和 <code> 别混着嵌套
两者语义不同：<var> 表示“这是个变量名”，<code> 表示“这是段可引用/可执行的字面量”。强行嵌套会破坏语义和可访问性。
正确写法：
-
<p>传入 <code>fetch(<var>url</var>)函数</p> ——<var>在<code>内部，但只包裹变量名 -
<p>设 <var>n</var> 为用户总数，<var>limit</var> 为每页条数</p>—— 纯说明，无代码块
错误写法：
-
<code><var>let x = 42</var></code>→ 整段是代码，该用<code>，<var>多余 -
<var><code>url</code></var>→<code>已含字面量语义，再套<var>冗余且干扰读屏
CSS 变量（--my-var）和 <var> 标签完全无关
搜索“HTML var 标签定义变量”常被误导，是因为混淆了两个东西：
-
<var>：HTML 语义标签，纯文档标注，无运行时作用 -
--my-var：CSS 自定义属性，需配合var(--my-var)在样式中使用，支持动态修改和继承
你不能用 <var> 声明 CSS 变量，也不能用 var(--x) 去读取 <var>x</var> 的内容。它们分属不同层：一个在 DOM 结构层做语义标注，一个在样式层做值复用。
真正要动态控制样式，得这么写：
:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
}
然后用 JS 改：document.documentElement.style.setProperty('--primary-color', '#28a745');
别指望 <var data-color="red">primary</var> 能触发任何样式变化——它只是个带属性的斜体文本。
