<var> 是纯语义标签，用于标示上下文中代表变量名或占位符的文本，与 JavaScript 变量无关，不参与逻辑执行、数据绑定或属性解析，仅提升可访问性和文档表达准确性。
HTML 中 <var> 不是变量标签，只是语义化容器
很多人搜“HTML变量标签”，其实是被名字误导了。<var> 和 JavaScript 的 var 完全无关，它不声明变量、不存储值、也不影响运行逻辑——它只是告诉浏览器：“这段文字在上下文中代表一个变量名或占位符”，纯语义标记。
常见错误现象：<var>x</var> + <var>y</var> 被当成可计算的变量；或者误以为加了 <var> 就能被 JS 读取或绑定。
- 使用场景：数学公式说明（如“设
<var>a</var>为斜边长度”）、代码片段中的参数名（如“调用fetch(<var>url</var>)”）、文档中需强调的占位符（如配置项<var>DATABASE_URL</var>） - 它默认渲染为斜体，但这是样式表现，不是功能；可通过 CSS 覆盖，比如
var { font-style: normal; color: #2980b9; } - 无障碍支持上，屏幕阅读器可能读作“variable a”，有助于理解上下文，但不会跳过或特殊处理
什么时候该用 <var>，什么时候不该用
核心判断标准：是否在描述“某个东西的名字”，而不是“那个东西本身”。
- ✅ 该用：文档里写“函数接受
<var>callback</var>参数”——callback是参数名，不是实际传入的函数 - ❌ 不该用：写“
<var>callback</var> = () => console.log('done')”——这里callback是真实变量，应放在<code>或<pre>里 - ❌ 不该用：HTML 表单中想“绑定变量”，比如
<input name="<var>user_id</var>">——<var>不参与属性解析，会被原样当作文本处理 - 兼容性无问题，所有现代浏览器都支持，但老 IE（≤8）会忽略其语义，仅显示内容
<var> 和 <code>、<kbd>、<samp> 怎么选
它们都是短语级语义标签，区别在于“指代对象”的性质：
立即学习“前端免费学习笔记（深入）”；
-
<var>：表示“某类可变的符号名”，强调其可替换性（如公式里的<var>n</var>、API 文档里的<var>token</var>） -
<code>：表示“一段计算机可执行/可引用的代码文本”，比如函数调用、HTML 标签名、CSS 属性名 -
<kbd>：表示“用户应输入的内容”，如按键组合<kbd>Ctrl</kbd>+<kbd>C</kbd> -
<samp>：表示“程序输出的样本”，如终端返回的<samp>Error: ENOENT</samp> - 混用常见坑：把
<var>username</var>套在<code>外面（<code><var>username</var></code>）是错的——<var>本身已含语义，再套<code>会造成嵌套冗余；正确做法是直接<var>username</var>，或需要强调代码上下文时用<code>getUser(<var>id</var>)</code>
实际写文档时容易漏掉的细节
多数人只记得加标签，但忽略上下文连贯性和可访问性细节：
- 不要单独出现：
<var>timeout</var>没有意义，必须配合说明，比如“超时时间（单位毫秒），默认值为<var>timeout</var>” - 避免嵌套其他语义标签：比如
<var><em>count</em></var>——<var>已自带语义和默认样式，<em>会干扰语义层级 - 国际化时注意：某些语言中变量名可能带下划线或大写，但
<var>不改变大小写规则，无需额外处理；不过翻译文档时，要确保<var>内容保持原样（如<var>API_KEY</var>不译） - 构建工具（如 Vite、Webpack）或 SSR 框架中，
<var>不会触发任何特殊行为，它就是普通 HTML 元素，别指望它自动注入值或响应式更新
真正难的不是怎么写 <var>，而是每次看到一个名字，都要停下来问一句：我是在说“它叫什么”，还是“它是什么”——这个区分，比记住标签语法重要得多。
