html中sub和sup标签 html中上下标的显示方法

<p>这是普通文本。这是<sub>下标文本</sub>。这是<sup>上标文本</sup>。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"   style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

<p>水的化学式是 H<sub>2</sub>O。</p>

<p>E = mc<sup>2</sup> 是爱因斯坦的质能方程。</p>

<p>版权所有 © 2023<sup>TM</sup></p>

<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>

<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>