HTML5中sub和sup是语义标签，用于脚注引用、化学式下标、指数上标等，必须准确使用以保障可访问性、SEO和屏幕阅读器支持；错误嵌套或滥用会破坏语义与渲染。
在HTML5中，sub 和 sup 标签不是“美化工具”，而是语义化标记——脚注编号、化学式下标、指数上标等，必须用它们来表达真实含义，否则会影响可访问性、搜索引擎识别和屏幕阅读器朗读逻辑。
脚注引用：用标注序号，配合ID跳转
脚注本质是正文与补充说明之间的语义关联，仅负责标记上标数字，不承担链接功能。正确做法是：
- 正文内用
1表示引用位置，数字必须为纯文本（不加方括号） - 脚注内容放在页面底部或独立区域，用
@#@#@#@#@#@#@#@#@#@0实现点击跳转，确保键盘与屏幕阅读器可操作 - 避免写成
[1]——方括号属于视觉装饰，应由CSS生成或直接写在文本中（如“参见文献1”）
化学反应方程式：下标用，系数不用
化学式中的数字有明确语义层级：分子式下标（如H2O中的“2”）表示原子个数，必须用；而反应式前的计量系数（如2H2 + O2 → 2H2O中的“2”）是普通数字，**不能套**。
- 正确：
2H2 + O2 → 2H2O - 错误：
2H2（把系数也变下标，语义错误且视觉失衡） - 离子电荷写在右上角，用：Ca2+、SO42−；注意“+”“−”不可省略，也不可用全角符号
- 避免嵌套
H2O——只包裹真正需要下标的字符，如H2O
并列上下标：顺序决定渲染位置，CSS微调更可靠
像SO42−这种既有下标又有上标的场景，浏览器默认按书写顺序渲染：先后，上标会出现在下标右侧偏上位置。但若需严格对齐（如数学中的张量符号），仅靠标签不够：
- 保持HTML简洁：
SO42− - 用CSS统一控制尺寸与偏移：
sub, sup { font-size: 75%; line-height: 0; }，防止行高撑开 - 如需精确定位（如让上标紧贴右上角），可额外加类：
2−，再用vertical-align: super; top: -0.1em; - 不推荐用
替代——失去语义，辅助技术无法识别
易错点与验证建议
实际编码中容易忽略的细节，直接影响内容是否被正确理解：
- 中文混排时，和内的英文/数字可能因字体差异显得过小，可加
font-variant: normal;重置 - 用浏览器开发者工具检查：选中元素，看computed样式中
vertical-align是否为super，font-size是否继承合理 - 用NVDA或VoiceOver朗读测试：正常应读作“H下标二O”，而非“H二O”；脚注编号应被识别为独立可导航项
- 避免在/里放链接、图片或换行——它们只接受短文本，复杂结构会破坏语义与渲染稳定性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
