html5 中没有专用于定义公式中变量的 标签，它仅语义化标注变量名（如斜体显示的符号），不支持数学排版；真正实现专业数学排版需用 mathml 或 katex/mathjax。
1. `` 的正确用途：语义标注变量名
标签只应包裹变量标识符本身，不包含数字、运算符或单位。
✅ 正确用法（强调语义）：
<p>根据公式 <var>F</var> = <var>m</var><var>a</var>，力与质量、加速度成正比。</p>- 浏览器默认以斜体渲染 F、m、a，符合数学惯例中变量名用斜体的传统。
- 它告诉辅助技术（如屏幕阅读器）：“这是变量，不是普通文字”，提升可访问性。
❌ 错误用法：
- 不要写
<var>E = mc²</var>—— 整个表达式不是变量名； - 不要用 包裹下标如
<var>x<sub>i</sub></var>—— 属于结构，只管语义；应写作<var>x</var><sub><var>i</var></sub>。
2. 真正实现数学排版：必须依赖 MathML 或 KaTeX / MathJax
HTML 原生不支持专业数学排版。无法替代 MathML，也不能控制分数、根号、矩阵等结构。
✅ 推荐组合（现代、标准、可访问）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 首选 MathML（原生 HTML5 支持）：语义强、可访问性好、无需第三方库（现代浏览器基本支持）。
- 示例（动能公式）：
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>K</mi><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>m</mi><msup><mi>v</mi><mn>2</mn></msup></mrow></math>
其中 <mi>m</mi> 和 <mi>v</mi> 表示数学变量（自动斜体），语义比 更精准；<mn></mn>、<mfrac></mfrac> 等确保专业排版。
3. 实用折中方案：配合 CSS + ``（仅限简单场景）
若无法使用 MathML（如旧系统或轻量需求），可用 `` 加 CSS 模拟基础效果：
- 为变量添加斜体、适当字体（如 `font-family: "Latin Modern Math", "STIX Two Math", serif;`）；
- 用 ``/`` 处理上下标，但需手动保证语义嵌套：
<p>第 <var>n</var> 项：<var>a</var><sub><var>n</var></sub> = <var>a</var><sub>1</sub> + (<var>n</var> − 1)<var>d</var></p>
⚠️ 注意：这仍是线性文本，无法实现真正的数学间距、行内公式对齐或复杂结构，仅适用于教学文档中的简单公式片段。
4. 不要混淆：`` ≠ ``，也不等于 MathML ``
三者区别关键在语义层级：
-
<i></i>：纯样式（斜体），无语义； -
<var></var>：语义为“程序/数学中的变量名”，隐含斜体，但不可用于公式主体； -
<mi></mi>（MathML）：专为数学变量设计，是数学表达式树的一部分，支持自动排版规则和 ARIA 数学角色。
因此，在数学密集型内容中，应优先用 MathML；`` 仅适合段落中零星提及的变量名（如“令 x 表示时间”）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
