HTML 上标文本

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML 的 sup 标签允许你在网页上以上标格式显示文本。在本实验中,我们将演示如何使用 sup 标签创建上标文本。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70851{{"`HTML 上标文本`"}} html/head_elems -.-> lab-70851{{"`HTML 上标文本`"}} html/lang_decl -.-> lab-70851{{"`HTML 上标文本`"}} html/text_dir -.-> lab-70851{{"`HTML 上标文本`"}} html/inter_elems -.-> lab-70851{{"`HTML 上标文本`"}} end

设置 HTML 文件

创建一个名为 index.html 的 HTML 文件,并设置基本的 HTML 结构。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

添加上标文本

在 HTML 文件中添加 sup 标签。在 sup 元素的开闭标签之间,添加你想要显示为上标的文本。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

设置上标文本样式

你可以使用 CSS 对 sup 标签进行样式设置,以调整其字体大小和垂直对齐方式。将以下 CSS 代码添加到你的 HTML 文件中:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

添加数学符号

上标文本是数学符号的重要组成部分。你可以使用 sup 标签来表示指数和幂。例如,将以下代码添加到你的 HTML 文件中:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>The value of 2<sup>3</sup> is 8.</p>
  </body>
</html>

总结

在本实验中,我们学习了 HTML 中的 sup 标签。我们了解了如何创建上标文本,并用它来表示指数和幂。我们还学习了如何使用 CSS 对 sup 标签进行样式设置。通过本实验学到的技能,你现在可以轻松地在 HTML 页面中添加上标文本。

您可能感兴趣的其他 HTML 教程