是HTML语义化标签，仅标记数学或代码中的变量名（如“v”“url”），不声明JS变量、不存储值、不参与计算；默认斜体，用于提升可访问性与文档结构表达。
var 标签不是用来声明 JavaScript 变量的
很多人看到 <var></var> 就以为是写 var x = 1 那种变量声明，其实完全无关。<var></var> 是 HTML 的**语义化文本标签**，只用于标记「数学公式里的变量」或「程序代码中出现的变量名」这类内容，不执行任何逻辑，也不影响 JS 运行。
它本质和 <em></em>、<cite></cite> 类似，只是告诉浏览器“这里是个变量名”，方便屏幕阅读器识别、CSS 定制样式、搜索引擎理解上下文。
什么时候该用 ：数学公式与代码片段中的变量名
典型场景有两类：
- 数学表达式中表示未知量，比如「速度
<var>v</var> = 距离 / 时间」</li> <li>文档里展示代码时标注其中的变量名，比如「调用 <code>fetchData(<var>url</var>, <var>options</var>)
」
注意：<var></var> 不该包裹整个代码块（用 <code> 或 <pre class="brush:php;toolbar:false;"></code>），只包单个变量名；也不该用于 HTML 属性值、JS 声明语句本身（如 <code>var count = 0</code> 这整行不该塞进 <code><var></code>）。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<H3>默认样式和自定义 CSS 的关键点</H3>
<p>浏览器对 <code><var></code> 的默认渲染通常是斜体（类似 <code><em></code>），但这是 UA 样式，不是规范强制。你可以用 CSS 覆盖：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;">var {
font-style: normal;
font-family: monospace;
color: #2563eb;
}</pre>
<p>常见踩坑：</p>
<ul>
<li>直接在 <code><var></var> 里写等号或运算符（如 <var>x = y + 1</var>）——语义错误，应只包 x、y 这类纯标识符
<var><code>index）——没必要，<var></var> 本身已表意，再套 <code> 反而混淆语义层次
<span class="variable"></span> 做复杂高亮——<var></var> 无 class 支持，真要动态控制样式，还是得靠 class + JS跟 、<samp>、<kbd> 的分工区别</kbd></samp>
HTML 有一组专用于计算机相关内容的内联语义标签，别混用：
<code>：表示一段计算机代码（如函数名、关键字、完整语句）-
<var></var>：只表示代码或公式中「被操作的变量名」 -
<samp></samp>：表示程序输出结果（如终端打印的文本） -
<kbd></kbd>：表示用户输入（如按键组合<kbd>Ctrl+C</kbd>）
例如这句文档描述：
「运行
<code>console.log(</code><var>message</var><code>)</code> 将输出 <code><samp>Hello</samp>」</p> <p>变量名 <code>message是语义核心，用
<var></var> 最准确；整个调用是代码片段，用 <code> 包裹；输出内容用 <samp></samp> —— 各司其职，机器可读性才强。
真正容易被忽略的是：多数项目根本没启用这些语义标签，全靠 <span></span> 硬撑，结果既不利于无障碍访问，也削弱了文档结构信息。哪怕只在数学公式和 API 文档里谨慎用好 <var></var>，就已经比纯视觉标记强不少。
