原生MathML是唯一兼顾语义、可访问性与无JS渲染的方案；科学计数法需用<mrow>包裹指数以确保跨浏览器一致，如<msup><mi>10</mi><mrow><mn>6</mn></mrow></msup>。
原生 MathML 是唯一能同时满足语义正确、可访问性达标、且不依赖 JS 渲染的方案；但科学计数法若用 <msup> 硬套，极易因缺少 <mrow> 导致上标错位或跨浏览器渲染不一致。
为什么 <msup><mi>10</mi><mn>6</mn></msup> 在 Chrome 和 Firefox 里显示不同
问题不在浏览器“bug”，而在 MathML 解析逻辑差异：Chrome（109+）把 <mn>6</mn> 当作独立数字节点直接升幂，Firefox 则按规范要求——上标内容必须是**单个原子表达式**，否则可能截断或错行。没包 <mrow> 就等于没声明“这部分是一体的”。
- 错误写法：
<msup><mi>10</mi><mn>6</mn></msup>→ 可能渲染为 “10⁶” 或 “10 ⁶”（带空格） - 正确写法：
<msup><mi>10</mi><mrow><mn>6</mn></mrow></msup>→ 明确绑定基底与指数 - 更严谨的科学计数法应拆解为
<mi>10</mi>×<msup><mi>10</mi><mrow><mn>6</mn></mrow></msup>，而非把 “10⁶” 当作一个<mn>
科学计数法在 HTML 中的三种可行路径对比
不是所有场景都值得上 MathML。简单展示、低交互需求时，轻量方案反而更稳。
-
<sup>+ 文本：适合静态页面、兼容性要求极高的环境（如嵌入旧 CMS），但无法读屏、无语义、1e6必须手动转成10<sup>6</sup> - MathML
<math>：语义完整，支持缩放/高对比度/语音朗读，但需确保文档是<!DOCTYPE html>，且不能包裹在<pre>或<code>里 - MathJax + LaTeX：
$10^6$最省力，自动处理<mrow>、脚本层级、间距，但加载延迟、JS 失效即退化为源码
<mo>⁢</mo> 比空格更可靠的原因
写 10<sup>6</sup> 看似简洁，但乘号缺失会让公式失去运算结构。用空格代替乘号（如 10<sup>6</sup>）会导致：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 读屏器跳过空格，念成 “十六” 而非 “十的六次方”
- 浏览器对空格的渲染宽度不一致，Firefox 可能比 Chrome 多占半个像素
- CSS
letter-spacing会意外影响空格，破坏对齐
而 <mo>⁢</mo> 是 MathML 官方定义的“隐形乘号”，它参与排版计算但不显示，且被所有支持 MathML 的浏览器识别为二元运算符，自动控制左右间距。
容易被忽略的布局陷阱：行内公式 vs 块级公式
哪怕只写一个 <math><msup><mi>x</mi><mrow><mn>2</mn></mrow></msup></math>，也要主动设 display 属性：
- 行内公式必须加
display="inline"，否则某些 Safari 版本会强制换行 - 块级公式要配
display="block"+style="margin: 1em auto;"，仅靠 CSStext-align: center对<math>无效 - 别碰
<math>的line-height—— 它不会生效；调行距请改父容器的line-height
复杂公式的排版稳定性，80% 取决于是否显式分组、是否声明 display 类型、是否用对 token 标签，而不是字体大小或颜色。
