标签仅语义化标记变量名或占位符,不区分常量与变量;它不参与数学排版、不绑定js值,正确用法是配合等标签并显式设置font-style: italic以保障语义与可访问性。

var标签不区分常量与变量,只标记变量名
var 标签在 HTML 中没有“区分常量 vs 变量”的能力,它唯一合法的语义是:**标记一段文本为变量名或占位符本身**。浏览器不会根据内容(比如π或c)自动判断它是常量还是变量;它只认你是否用var包裹了那个名字。写<var>π</var>,屏幕阅读器照样读作 “variable pi”,而非 “constant pi”——这在物理或数学语境中就是错误的语义。
常见错误现象包括:
- 把
<var>Math.PI</var>当常量用——Math.PI是 JS 值,但var只管名字,不管值;更糟的是,Math.PI作为整体是标识符,不是单个变量名,应归入<code> - 用
<var>e</var>表示自然对数底——若上下文未强调其“可变参数角色”(如作为拟合变量),它就是数学常量,该用<code>e+ CSS 控制正体 - 试图靠
var实现“变量斜体、常量正体”的视觉效果——纯靠标签不行,必须配合 CSS 显式控制var和code的font-style
怎么让变量斜体、常量正体?靠组合 + CSS,不是靠 var 单独干活
真正可行的方案是语义标记 + 样式分离:var专用于变量名,code用于常量/函数名/单位,再用 CSS 统一控制字体样式。默认var已带font-style: italic,但很多项目全局重置过,所以必须显式加固:
推荐基础样式:
var { font-style: italic; }
code { font-style: normal; font-family: "STIX Two Math", "Latin Modern Math", serif; }
这样写才对:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 变量:面积 =
0.5 *base*height - 常量+函数:调用
Math.sin(theta),其中Math.sin和Math.PI都该进<code> - 物理常量:光速
c= 299792458 m/s ——c是符号名,但它是定义好的常量,应套<code>c,不是<var>c</var>
为什么不能在 MathML 里套 var?语义叠加会破坏解析
MathML 原生就用<mi></mi>表示标识符(含变量)、<mn></mn>表示数字、<mo></mo>表示运算符,它自带完整语义和可访问性支持。此时再给<mi>x</mi>外面套一层<var></var>,等于告诉辅助技术“这是一个变量名,而它本身又是一个变量名”——重复且冲突。
结果往往是:
- 屏幕阅读器跳过内层
mi的数学角色,只读外层var的通用变量提示 - 部分 MathML 渲染器直接忽略或报 warning
- 公式复制粘贴时,多余标签污染结构
正确做法:复杂公式直接用 MathML 或 KaTeX,纯 HTML 文档中简单提及变量名时才用var。
容易被忽略的可访问性断点:CSS 重置会让 var 失效
很多 UI 框架或 reset.css 里有类似* { font-style: normal; }或var { font-style: normal !important; }的规则,表面看只是“去掉斜体”,实际后果严重:
-
var失去默认视觉提示,普通用户看不出哪是变量名 - 更重要的是,部分屏幕阅读器依赖
font-style: italic触发“variable”语调播报;样式被覆盖后,语义信息彻底丢失 - 一旦项目用了深色主题、高对比度模式或禁用 CSS,
var可能完全不可见,而它的语义本该在无样式下也成立
所以只要用了var,就必须在 CSS 中显式声明var { font-style: italic; },且避免用!important覆盖它——语义优先级高于视觉偏好。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










