sub 和 sup 是语义化标签，用于表示下标和上标，影响可访问性与SEO；纯视觉调整应使用 span 加 CSS，避免滥用语义标签。
sub 和 sup 的语义与默认渲染行为
HTML 的 和 不是样式标签，而是语义化元素：前者表示下标（如化学式 H2O），后者表示上标（如平方 m2）。浏览器默认会缩放字体并偏移基线，但缩放比例、垂直位移量由 UA 样式决定，不同浏览器略有差异，不能当作精确排版工具使用。
常见误用是拿它们“微调文字位置”，比如想把“注册®”的 ® 拉高一点——这属于视觉调整，应优先用 CSS，而非滥用语义标签。
什么时候必须用 sub/sup，而不是 CSS
当内容本身具有明确的下标或上标语义时，必须用 或 ，否则会影响可访问性（屏幕阅读器会读出“下标 2”“上标 2”）和 SEO 结构化理解。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 化学式：
CO2 - 数学公式：
x2 + y2 - 单位符号：
cm3 - 避免：
®—— 缺少语义，AT 工具无法识别
用 CSS 覆盖默认 sub/sup 行为的注意事项
如果确实需要统一控制尺寸或位移（比如设计系统要求所有上标统一为 65% 字号 + 0.35em 上移），可以用 CSS 重置，但要注意：
-
vertical-align值建议用super/sub，而非top或像素值，否则在行高变化时易错位 - 不要只改
font-size，必须同步调整line-height或用transform: translateY()避免影响整行高度 - IE11 及更早版本不支持
vertical-align: super/sub在非内联元素上生效，若需兼容，得加display: inline - 示例重置（现代浏览器）：
sub, sup { font-size: 0.75em; vertical-align: sub; }<br>sup { vertical-align: super; }
替代方案：用 span + CSS 实现更灵活的角标
纯视觉需求（如商标符号®、版权©、脚注标记*）应该用 加类名，再用 CSS 精确控制。这样语义干净、样式可控、无障碍友好（可通过 aria-label 补充说明）。
- 正确写法：
® - CSS 示例：
.trademark {<br> font-size: 0.65em;<br> vertical-align: 0.2em;<br> margin-left: -0.05em;<br>} - 关键点：用
vertical-align配合em单位，能随父级字号等比缩放；margin-left微调水平间距，避免紧贴前字
实际项目中，最常被忽略的是语义与样式的混用边界——sub 和 sup 是“这是什么”，不是“让它看起来像什么”。一旦开始写 style="vertical-align: 12px"，就该换回 span。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
