标签仅用于语义化标记变量名,不参与数学排版或样式渲染,须配合CSS和辅助技术才能实现可访问性;适用于算法描述、命令行占位符等场景,不可替代或。

var标签不是数学变量渲染工具
<var></var> 标签不参与数学排版,也不改变公式结构。浏览器不会把它当 MathML 的 <mi></mi> 处理,也不会自动斜体化、对齐或适配上下标逻辑。它只是告诉辅助技术:“这段文字代表一个变量名”,仅此而已。
常见错误现象:
- 在
<math></math>块里直接套<var>x</var>,结果被忽略或报解析警告 - 写
<p>解为 <var>x</var> = 5</p>,期望 x 自动斜体+语义强化,但实际只靠默认样式撑着,无语义保障 - 用
<var></var>包裹带下划线的变量名如_var,却没加 CSS 重置,导致下划线被当成文本装饰而非命名约定
什么时候该用 var 标签
只在「提及变量名本身」且上下文明确为程序行为或算法描述时使用。它不是装饰标签,不能替代样式或逻辑。
- 描述 JS 函数参数:
<p>调用 <code>fetchData时传入 url 和 timeout - 说明命令行占位符:
<p>执行 <code>git checkoutbranch-name - 勾股定理讲解中强调符号角色:
<p><var>a</var>² + <var>b</var>² = <var>c</var>²,其中 <var>c</var> 是斜边</p> - 配合
<code>使用,区分代码字面量与变量名:<code>for (let <var>i</var> = 0; <var>i</var> i++)
var 和 code、i 的关键区别
三者都可能显示为斜体,但语义和用途完全不同:
-
<var></var>:纯语义,表示“这是个变量名/占位符”,不暗示可执行、不携带值,屏幕阅读器会换调读出 <code>:表示计算机可执行或可复制的字面量,如函数名Math.random()、路径/usr/bin/env、错误信息ReferenceError: x is not defined-
<i></i>:仅表示语气或分类上的不同(比如物种名、船名),跟编程或数学无关;滥用会干扰 a11y 解析
正确组合示例:<p>面积 = <code>0.5 * base * height
CSS 和可访问性必须手动补足
<var></var> 默认样式只是 font-style: italic,没有字体、颜色、间距等保障。在现代文档中,容易被 CSS 重置覆盖,或在无样式环境下完全丢失语义提示。
- 务必加基础样式:
var { font-style: italic; font-family: var(--mono-font, 'SFMono-Regular', Consolas); } - 若需支持下划线变量(如
_private),要额外处理:var::before { content: "_"; }不推荐,更稳妥的是用<span class="var-name">_private</span>配合语义类 - 不要依赖
<var></var>触发 JS 行为 —— 它没有 data 属性绑定能力,document.querySelector('var')拿到的是 DOM 节点,不是变量值
最常被忽略的一点:语义只有在配合 screen reader 和无障碍工具链时才生效;脱离上下文单独用 <var></var>,等于白标。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











