HTML中没有\_SUP标签，正确上标标签是<sup>，用于单字符或极简表达式；复杂公式应使用MathML或KaTeX。
HTML 中没有 _SUP 标签，正确写法是 <sup>
很多人在搜索“_SUP标签”时，其实是把 Word 或某些富文本编辑器的快捷键（如 Ctrl + Shift + +）误认为是 HTML 标签。HTML 规范中根本不存在 _SUP 这个元素——浏览器会直接忽略它，或者当成未知标签渲染为普通内联文本，完全达不到上标效果。
真正起作用的是原生语义化标签 <sup>（superscript）和 <sub>（subscript）。它们被所有现代浏览器原生支持，无需 CSS 或 JS 即可生效。
-
<sup>2</sup>渲染为 ²，适合写平方、立方等简单幂次 -
x<sup>n</sup>→ xn，这是最常用、最轻量的数学幂表示方式 - 注意：不要嵌套
<sup>，比如<sup>a<sup>b</sup></sup>会导致样式错乱且语义不清
什么时候该用 <sup>，什么时候该换 MathML 或 KaTeX？
<sup> 只适合「单字符或极简表达式」的上标，比如单位（m2）、化学式（H2O）、基础幂（ex）。一旦涉及分式、根号、求和符号或对齐需求，它就力不从心了。
- ✅ 能用：
10<sup>6</sup>、E = mc<sup>2</sup>、log<sub>2</sub>(n)</code></li> <li>❌ 别硬撑：<code>a<sup>b+c</sup>
（加号大小/位置不对）、<sup>∑</sup><sub>i=1</sub>（下标位置错、符号不居中） - 替代方案：复杂公式优先用
MathML（语义强、可访问性好）或轻量库如KaTeX（渲染快、兼容性稳）
<sup> 的样式边界与常见视觉陷阱
浏览器对 <sup> 的默认渲染有固定偏移和字号缩放（通常是 0.7em 左右），但不同浏览器、字体、DPI 下表现不一。尤其在移动端或使用非等宽字体时，容易出现对不齐、过小、模糊等问题。
- 避免在
<sup>内放空格或换行，否则可能引入额外空白节点 - 若需微调位置，用
vertical-align比改font-size更安全，例如：sup { vertical-align: 0.3em; } - 不要给
<sup>设line-height，它会干扰父行高，导致段落间距异常 - 检查可访问性：屏幕阅读器通常会读出「上标」提示，但不会自动读「的平方」——语义靠开发者补全，比如用
aria-label="x squared"
纯 HTML 实现带括号的幂运算（如 (a+b)²）要注意什么？
括号本身不能直接上标，必须把整个表达式包裹进 <sup>，否则只有数字 2 上标，括号还在基线——这是新手高频错误。
错误写法：(a+b)<sup>2</sup> → (a+b)²（看起来对，但语义上括号不属于上标内容）
更准确写法：<span aria-label="a plus b, all squared">(a+b)</span><sup>2</sup>，或直接：<sup>(a+b)<sup>2</sup></sup>（不推荐嵌套）
实际项目中，建议统一用以下结构兼顾语义与渲染：
<span class="math-power"><span>(a+b)</span><sup>2</sup></span>
再配简单 CSS 控制括号与上标间距，比强行塞进一个 <sup> 更可控。
真正难的不是怎么写上标，而是判断哪个场景该用原生标签、哪个该交给专业数学渲染引擎——多数人低估了后者在公式对齐、字体匹配和缩放响应上的必要性。
