HTML中<sup>仅实现视觉上标，无数学语义；需用MathML的<msup>或KaTeX等工具保障可访问性、缩放与语义正确性。
HTML 中 <sup> 标签能直接显示上标，但不等于支持数学语义
纯展示场景下，<sup> 确实能让文字变小、上移，比如 <span>10<sup>2</sup></span> 渲染为 “10²”。但它只是视觉调整，没有数学含义——浏览器不会识别这是幂运算，屏幕阅读器可能读作“10 2”，LaTeX 渲染器或 MathML 解析器也完全忽略它。
如果你的目标是「让幂运算在网页中正确可读、可访问、可缩放」，仅靠 <sup> 是不够的。常见踩坑点包括：用 <sup> 套嵌复杂表达式（如 a<sup>b+c</sup>），或混用 <sub> 和 <sup> 做化学式（如 H2O），结果排版错乱、基线偏移严重。
需要数学语义时，优先用 <msup>（MathML）而非 <sup>
MathML 的 <msup> 是专为幂运算设计的语义化标签，支持完整数学排版规则（如指数自动缩小、垂直对齐、间距控制）。它需配合 <math> 容器使用：
<math>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
</math>
注意几点：
-
<mi>表示标识符（变量名），<mn>表示数字，不能全用<span>或<div>替代 - 部分旧版 Safari 对 MathML 支持有限，可搭配 MathJax 或 KaTeX 回退渲染
- 若后端返回的是 LaTeX 字符串（如
"x^2 + y^2 = r^2"），不要手动拆解成<sup>，应交由 KaTeX 的render()处理
纯前端动态生成上标时，String.prototype.replace() 易出错
有人用正则把 "x^2" 替换成 "x<sup>2</sup>"，看似简单，但实际会崩：
- 未转义
^在正则中是行首锚点，直接写/\^(.)/可能匹配失败 - 没处理多字符指数，如
"x^(n+1)"→ 错误变成x<sup>(n+1)</sup>（括号不该进<sup>） - 忽略负号、分数、希腊字母等，
"E=mc^2"可以，但"α^β"在某些字体下渲染异常
更稳妥的做法是：用现成解析器（如 ASCIIMathML）或限制输入格式（只允许 base^exp 且 exp 为纯数字），再做严格校验：
function toSup(str) {
return str.replace(/(\w+)\^(\d+)/g, '$1<sup>$2</sup>');
}
// 仅适用于 "a^2"、"x^10" 这类干净输入
CSS 伪元素 ::after 模拟上标？别碰
有人试图用 vertical-align: super 或 transform: translateY(-0.5em) scale(0.7) 配合 ::after 伪造上标，问题很实在：
- 无法选中、复制指数内容（用户 Ctrl+C 只拿到底数）
- 缩放页面时，
em单位和字体渲染抖动会导致上标位置漂移 - 与行高、字体度量强耦合，换字体就错位，尤其在 macOS 的 San Francisco 或 Windows 的 Segoe UI 下表现不一
除非你做的是极简图标标注（如 “TM™”），否则不要为幂运算走这条路。语义缺失 + 可维护性差 + 可访问性归零，得不偿失。
真正难的不是怎么把数字变小往上放，而是让机器和人都明白“这是指数，不是装饰”。多数项目卡在这一步：以为渲染出来像了就完了，结果导出 PDF 时上标消失，或者视障用户听到的是“x caret 2”。
