实现做出html的上标以及下标
当你在网页上看到化学式 H₂O 或数学公式 E=mc² 时，是否想过那些上标、下标效果是怎么实现的？这篇讲的就是这个基础但关键的前端知识点。 文章从最语义化的原生HTML标签 和 谈起，说明了它们在表示上标（如商标符号™）和下标（如水分子式中的2）时的正确用法和可访问性优势。随后，作者也探讨了当需要更精细的样式控制时，如何通过CSS的 vertical-align 属性配合 font-size 来达到视觉上的上下偏移效果，并对比了两种方式的适用场景：前者适合有明确语义的文本，后者更适合纯视觉呈现。 文章还贴心地指出了一个常见坑点：在某些旧版浏览器中，纯CSS的偏移方案可能出现基线对齐不准的问题，因此在对排版精度要求极高的场景（如学术内容）下，优先使用原生标签是更稳妥的选择。最后，作者将这些知识点整合为一个清晰的决策流程图，帮助开发者根据内容语义和设计要求快速选择最佳方案。