应使用 标签实现上标，因其语义明确、支持任意内容嵌套、兼容无障碍工具且自动优化排版；避免用字符实体、css 模拟或误嵌套。

用 <sup></sup> 标签实现上标，不是字符实体

直接写 2; 或 3; 这类字符实体，虽然能显示上标数字，但只支持有限几个（如 ²、³、¹），且无法嵌套文本、不能控制样式、行高容易塌陷。真正可靠的方式是用 <sup></sup> 标签包裹任意内容。

• <sup></sup> 是语义明确的 HTML5 标准标签，浏览器原生支持，无障碍工具（如屏幕阅读器）会识别其为上标
• 它会自动调整垂直对齐和行间距，比如 H<sub>2</sub>O 和 x<sup>2</sup> + y<sup>2</sup> 能自然融入段落
• 可嵌套其他内联元素：例如 <sup><em>n</em></sup> 或 <sup><var>i</var></sup>
• 不要用 CSS 的 vertical-align: super 模拟——它不传递语义，也不保证跨浏览器基线一致

<sup></sup> 常见误用场景

很多人在数学公式或单位中硬塞空格或   来“对齐”，结果破坏可访问性和复制粘贴行为。真实问题往往出在上下文布局上。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 在行内公式中混用 <sup></sup> 和普通文本时，若父容器设置了 line-height: 1，可能导致上标被裁切——应改用相对值如 line-height: 1.4
• 商标符号（如 ™）不该用 <sup>™</sup>，而应直接用字符实体 ™ 或 Unicode 字符 ™，因为商标不是数学意义上的上标
• 避免嵌套 <sup><sup>...</sup></sup>：浏览器不保证多层上标渲染正确，需用 CSS font-size 配合 vertical-align 手动微调

和 <sub></sub> 配合使用要注意什么

<sup></sup> 和 <sub></sub> 共享同一套渲染逻辑，但它们的默认垂直偏移量不同。混用时最容易出问题的是化学式与数学式的混合场景，比如 H₂O + CO₂ → C₆H₁₂O₆ + O₂。

• 同一行中同时出现多个 <sub></sub> 和 <sup></sup> 时，浏览器可能因字体度量差异导致基线跳动——建议用 display: inline-flex 包裹整组公式并统一对齐
• CSS 重置时别全局覆盖 sup, sub { vertical-align: baseline; }，这会让所有上标/下标失效
• 如果要用等宽字体显示代码中的幂运算（如 2**8），优先用 <code> + <sup></sup> 组合，而不是纯 CSS 变形

实际最易被忽略的是：上标内容一旦含空格或换行，<sup></sup> 会照常渲染，但视觉上可能断裂或错位。务必确保内部是紧凑的内联内容，必要时用   替代空格，而非依赖空白符折叠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！