<sub>和<sup>标签分别用于显示下标和上标，适用于数学公式、化学方程式等场景。1. 可通过css的vertical-align属性调整上下标的垂直位置；2. 使用font-size属性改变字体大小以提升美观性；3. 替代方案包括使用position和transform属性实现更精确控制，或使用svg处理复杂需求。调整时需注意避免影响文本基线对齐，并根据项目复杂度选择合适方法。
HTML中的<sub>和<sup>标签分别用于显示下标和上标。它们是行内元素，可以使文本相对于周围的文本降低或升高，常用于数学公式、化学方程式或版权符号等场景。
使用<sub>标签创建下标，使用<sup>标签创建上标。
<p>这是普通文本。这是<sub>下标文本</sub>。这是<sup>上标文本</sup>。</p> <p>水的化学式是 H<sub>2</sub>O。</p> <p>E = mc<sup>2</sup> 是爱因斯坦的质能方程。</p> <p>版权所有 © 2023<sup>TM</sup></p>
如何调整上下标的位置和大小？
虽然<sub>和<sup>标签提供了一种简单的方法来创建上下标，但它们默认的样式可能不符合所有需求。可以通过CSS来调整上下标的位置和大小。
立即学习“前端免费学习笔记（深入）”；
-
调整位置： 可以使用
vertical-align属性来微调上下标的垂直位置。例如，vertical-align: top;、vertical-align: bottom;或使用具体的像素值。
调整大小： 可以使用
font-size属性来改变上下标的字体大小。通常，将上下标的字体大小设置为比周围文本小一些会更美观。
<style>
sub {
vertical-align: sub; /* 默认值，这里仅作演示 */
font-size: 0.8em;
}
sup {
vertical-align: super; /* 默认值，这里仅作演示 */
font-size: 0.8em;
}
.custom-sub {
vertical-align: -0.2em; /* 向下调整 */
font-size: 0.7em;
}
.custom-sup {
vertical-align: 0.3em; /* 向上调整 */
font-size: 0.7em;
}
</style>
<p>这是普通文本。<sub class="custom-sub">自定义下标文本</sub>。这是<sup class="custom-sup">自定义上标文本</sup>。</p>需要注意的是，过度调整vertical-align可能会导致上下标与周围文本的基线对齐出现问题，因此需要根据具体情况进行调整。
<sub>和<sup>标签有哪些替代方案？
虽然<sub>和<sup>标签是标准的HTML标签，但在某些情况下，可能需要使用其他方法来实现上下标效果，例如使用CSS的position属性和transform属性。
使用
position: relative和transform: translateY()： 这种方法可以更精确地控制上下标的位置，但需要更多的CSS代码。使用SVG： 对于复杂的数学公式或需要高度自定义的上下标，可以使用SVG来创建。SVG提供了更多的绘图和文本控制功能。
<style>
.superscript {
position: relative;
top: -0.5em; /* 调整上标位置 */
font-size: 0.7em;
}
.subscript {
position: relative;
top: 0.3em; /* 调整下标位置 */
font-size: 0.7em;
}
</style>
<p>这是使用 CSS 的上标：<span class="superscript">上标文本</span></p>
<p>这是使用 CSS 的下标：<span class="subscript">下标文本</span></p>选择哪种方法取决于具体的需求和项目的复杂程度。对于简单的上下标，<sub>和<sup>标签通常足够使用。对于更复杂的场景，可能需要使用CSS或其他技术来实现。关键在于权衡代码的简洁性、可维护性和最终的视觉效果。
