标签仅用于语义化标记变量名等可替换标识符，不绑定js变量、不执行代码、不支持响应式；正确场景是文档中提及参数名如timeout，错误用法包括数值、公式、终端输出等。

var 标签不是变量声明工具，只是语义标记

var 标签和 JavaScript 的 var 关键字完全无关，它不声明、不存储、不更新任何值。浏览器不会解析它包裹的内容为可执行代码，也不会自动同步 JS 变量值。写 <var>count</var> 后，页面上显示的只是纯文本 “count”，哪怕你 JS 里定义了 let count = 5，它也不会变。

常见错误现象包括：

• 在 HTML 中写 <var id="user">name</var>，然后试图用 document.getElementById('user').textContent 获取 JS 变量值 —— 它没有绑定能力，id 只是普通 DOM 属性
• 把 <var>let x = 10</var> 当作可执行代码片段 —— <var></var> 不支持嵌套语法，也不解析表达式
• 依赖它实现响应式渲染（比如类似 {count}）—— 它没有数据绑定机制，必须靠 JS 手动更新 innerText 或 textContent

什么时候该用 var 标签：只标“名字”，不标“值”

它的唯一合法用途是：在文档中「提及」一个变量名、参数名、占位符或公式符号本身，强调它在上下文中是可变的、待替换的标识符。

适用场景举例：

• 数学说明：<p>设 <var>r</var> 为半径，<var>h</var> 为高</p>
• API 文档：<p>传入 <var>timeout</var> 参数控制请求超时时间</p>
• 代码注释（非可执行）：<p>将 <var>inputValue</var> 转为小写后再校验</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr&#8203;&#8203;oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr&#8203;&#8203;oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
• 配合 <code> 使用（注意位置）：<code>fetch(<var>url</var>) ✅；但 <code><var>url</var> ❌（<var></var> 不该嵌在 <code> 内部）

不该用的场景：

• 数值、单位、函数名（如 <var>π</var>、<var>sin</var>、<var>cm</var>）—— 这些应归入 <code> 或普通文本
• 错误信息、终端输出（如 <var>Error: ENOENT</var>）—— 应用 <samp></samp>
• 按键组合（如 <var>Ctrl</var>）—— 应用 <kbd></kbd>

样式与可访问性：斜体不是默认保障，必须显式控制

<var></var> 默认被浏览器 UA 样式设为 font-style: italic，但这只是惯例，不是规范强制。很多项目全局重置字体样式（比如 * { font-style: normal; }），会导致 <var></var> 失去视觉提示，更重要的是——屏幕阅读器可能不再将其识别为变量。

可靠做法是：

• 显式设置 CSS：var { font-style: italic; }，避免被全局样式覆盖
• 需要强化语义时加 ARIA：<var aria-label="variable delta">Δ</var>
• 若项目统一禁用斜体，建议加 class 区分：<var class="var-inline">x</var> + .var-inline { font-style: italic; color: #2c3e50; }
• 不要靠 <var></var> 实现“变量斜体、常量正体”——常量（如 π、c）该用 <code> 并配 font-style: normal

严肃数学公式别硬套 var，该用 MathML 或 KaTeX

写 <p><var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p> 看似能工作，但它只是线性文本拼接，没有数学排版语义：上下标对齐不准、运算符间距不合理、屏幕阅读器无法理解这是勾股定理。

真正需要数学公式时：

• 用 MathML：<math><mi>a</mi><msup><mo>​</mo><mn>2</mn></msup><mo>+</mo><mi>b</mi><msup><mo>​</mo><mn>2</mn></msup><mo>=</mo><mi>c</mi><msup><mo>​</mo><mn>2</mn></msup></math>
• 用 KaTeX：$$a^2 + b^2 = c^2$$，由 JS 渲染为高质量数学布局
• 带下划线变量（如 _var）不能直接 <var>_var</var> —— KaTeX 需写 $\mathit{\_var}$（注意反斜杠转义），MathML 需用 <mi>_var</mi>

简单文档中标记单个变量名，<var></var> 足够；一旦涉及结构、对齐、上下文语义，它就不是解决方案，而是障眼法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！