标签仅语义化标记变量名本身，如公式中的“n”、API路径中的“id”，不参与JS解析或值绑定；应配合使用但不嵌套，默认斜体且现代浏览器支持良好。

<var></var> 标签不是用来“表示变量值”或“声明变量”的，它只负责语义化标记「变量名本身」——比如公式里的 a、函数参数名 callback、环境配置项 DATABASE_URL。浏览器不会解析它的内容为数据，JS 也读不到它的“值”。

<var></var> 该用在哪儿

• 数学说明中强调符号含义：如“设<var>n</var>为样本数量”，n 是名字，不是数字
• API 文档里标出可替换的占位符：如 POST /api/users/<var>id</var>
• 代码描述中指代参数/变量名：如“调用 fetch(<var>url</var>)”，url 是形参名，不是字符串字面量
• 配置说明中突出变量标识：如 “将 <var>API_KEY</var> 写入 .env 文件”

不要用在：

• 想让 JS 读取或绑定值：写了 <var id="count">x</var>，document.getElementById('count').textContent 只返回字符串 "x"，不是变量
• 替代 <code> 包裹实际代码：如 <var>let x = 42</var> 是错的，应放进 <code> 或 <pre class="brush:php;toolbar:false;">&lt;/code&gt;&lt;/li&gt;&lt;li&gt;表单控件属性里当动态值用：&lt;code&gt;&lt;input name=&quot;&lt;var&gt;user_id&lt;/var&gt;&quot;&gt;&lt;/code&gt; 中的 &lt;code&gt;&lt;var&gt;&lt;/code&gt; 不会被展开，name 属性值就是字面量 &lt;code&gt;&quot;&lt;var&gt;user_id&lt;/var&gt;&quot;&lt;/code&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3&gt;&lt;code&gt;&lt;var&gt;&lt;/code&gt; 和 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 怎么配合&lt;/h3&gt;&lt;p&gt;&lt;code&gt;&lt;var&gt;&lt;/code&gt; 表示“这是个变量名”，&lt;code&gt;&lt;code&gt;&lt;/code&gt; 表示“这是段可引用的代码文本”。二者语义不同，但常一起出现：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;✅ 正确：描述调用方式时 — &lt;code&gt;fetch(&lt;code&gt;&lt;var&gt;url&lt;/var&gt;&lt;/code&gt;)&lt;/code&gt;&lt;/li&gt;&lt;li&gt;❌ 错误嵌套：把 &lt;code&gt;&lt;var&gt;&lt;/code&gt; 套进 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 里再标变量名 — &lt;code&gt;&lt;code&gt;&lt;var&gt;url&lt;/var&gt;&lt;/code&gt;&lt;/code&gt; 是冗余的，&lt;code&gt;&lt;var&gt;&lt;/code&gt; 已含语义，&lt;code&gt;&lt;code&gt;&lt;/code&gt; 应包裹完整可执行片段（如 &lt;code&gt;&lt;code&gt;fetch(url)&lt;/code&gt;&lt;/code&gt;）&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;更自然的组合是：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg&quot; alt=&quot;财经HTML高端海报生成&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;财经HTML高端海报生成&lt;/a&gt; &lt;p&gt;复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10828&quot; title=&quot;财经HTML高端海报生成&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;ul&gt;&lt;li&gt;公式说明：&lt;code&gt;面积 = &lt;var&gt;length&lt;/var&gt; × &lt;var&gt;width&lt;/var&gt;&lt;/code&gt;&lt;/li&gt;&lt;li&gt;代码上下文：&lt;code&gt;请传入 &lt;var&gt;timeout&lt;/var&gt; 参数，单位毫秒&lt;/code&gt;&lt;/li&gt;&lt;li&gt;终端命令：&lt;code&gt;curl -H &quot;Authorization: Bearer &lt;var&gt;token&lt;/var&gt;&quot; &lt;var&gt;api_url&lt;/var&gt;&lt;/code&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3&gt;默认样式和兼容性要注意什么&lt;/h3&gt;&lt;p&gt;&lt;code&gt;&lt;var&gt;&lt;/code&gt; 默认渲染为斜体（&lt;code&gt;font-style: italic&lt;/code&gt;），但这只是浏览器 UA 样式，不是强制行为：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;若项目全局禁用斜体（如重置 CSS 中写了 &lt;code&gt;&lt;em&gt;, &lt;/em&gt;::before, *::after { font-style: normal; }&lt;/code&gt;），&lt;code&gt;&lt;var&gt;&lt;/code&gt; 也会变正体，语义丢失而不自知&lt;/li&gt;&lt;li&gt;老旧 IE（≤8）不识别 &lt;code&gt;&lt;var&gt;&lt;/code&gt;，会当作未知 inline 标签处理，无样式、无语义，屏幕阅读器也不特殊播报&lt;/li&gt;&lt;li&gt;现代浏览器（Chrome/Firefox/Safari/Edge）均支持，无障碍支持良好（多数屏幕阅读器读作 “variable x”）&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;建议显式控制样式以防意外：&lt;/p&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;var { font-style: italic; color: #2c3e50; }</pre><p>下划线变量名（如 <code>_var）要特别小心：在 MathML 或 KaTeX 中裸写 <var>_var</var> 会被当成下标语法报错，需转义为 _var 或改用数学排版方案。

  真正需要动态变量行为的地方，别碰 <var></var> —— 用 data- 属性 + JS 渲染，或服务端模板语法，或 Web Components 的 <slot></slot>。它就干一件事：告诉人和机器，“这段文字代表一个可变的符号名”，仅此而已。