标签仅语义化标识变量,不区分常量与变量;变量用并保持斜体,常量用配css设正体,复杂公式应使用mathml或katex/mathjax实现语义与样式分离。

标签本身不负责“区分常量与变量”,它只语义化地表示“这是一个变量”——浏览器默认用斜体渲染,但常量不该用,也不能靠它来实现视觉区分。
明确语义边界:什么该用,什么不该
专用于数学或编程上下文中的变量名(如 x、n、maxSpeed),不是所有斜体内容都适合它:
- 数值、单位、函数名(如
sin、π、cm²)不是变量,不应套 - 已定义的物理常量(如
c光速、G万有引力常数)若在文中作为符号参与公式推导,且上下文强调其“可变参数角色”,才考虑用;否则建议用或普通文本+CSS控制 - 避免把当“斜体开关”滥用——例如写 5 或 kg,既语义错误,又可能被读屏器误读为“变量五”“变量千克”
真正实现“变量斜体、常量正体”的可靠方式
靠纯 HTML 标签无法自动区分;需结合语义标记 + CSS 精准控制:
- 变量统一用 ,并保留其默认
font-style: italic - 常量(如 π、e、c、sin、log)用
标签,并配 CSS:<code>code { font-style: normal; font-family: "STIX Two Math", "Latin Modern Math", serif; } - 若需更高精度(如科学出版级排版),直接使用 MathML:
<mi>b</mi>(变量)、<mn>2</mn>(数字)、<mo>+</mo>(运算符),它原生支持语义与样式分离
警惕样式重置导致的语义失效
很多项目全局重置字体样式,比如:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
* { font-style: normal; } 或 var { font-style: normal !important; }
这会让失去斜体外观,更重要的是——屏幕阅读器可能不再将其识别为变量。解决办法:
- 显式恢复的语义样式:
var { font-style: italic; } - 配合 ARIA 属性强化可访问性(必要时):
<var aria-label="variable b">b</var> - 在无障碍测试中验证:用 NVDA 或 VoiceOver 朗读公式,确认它播报的是“variable b”,而非“italic b”
教育类页面的实用建议
面向学生或教师的数学网页,推荐分层处理:
- 基础公式(如
A = ½ × <var>b</var> × <var>h</var>):直接用包裹变量,常量用,单位用普通文本(如 cm²)+ CSS 控制 - 复杂公式(含求和、积分、矩阵):放弃纯 HTML,改用 KaTeX 或 MathJax 渲染,它们自动按 MathML 规则区分变量/常量/运算符的字体与语义
- 所有公式旁加简短文字说明,例如:“其中 r 是半径,
π是圆周率(固定常量)”,兼顾理解与可访问性
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










