HTML 下标文本

HTMLHTMLBeginner
立即练习

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

介绍

在 HTML 中,<sub> 标签用于指定应仅出于排版原因显示为下标的行内文本。该标签内的内容通常以较小的文本和降低的基线呈现。在本实验中,你将学习如何在 HTML 中使用 <sub> 标签来显示下标文本。

注意:你可以在 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/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70847{{"`HTML 下标文本`"}} html/head_elems -.-> lab-70847{{"`HTML 下标文本`"}} html/doc_flow -.-> lab-70847{{"`HTML 下标文本`"}} html/inter_elems -.-> lab-70847{{"`HTML 下标文本`"}} end

添加 HTML 模板

创建一个名为 index.html 的新文件。

将以下代码添加到 index.html 中,以创建基本的 HTML 结构。

<!doctype html>
<html>
  <head>
    <title>HTML Sub Tag Lab</title>
  </head>
  <body></body>
</html>

添加 sub 标签

<body> 元素内添加以下代码,以创建下标文本。

<p>My chemical formula is H<sub>2</sub>O.</p>

这段代码将显示文本 "My chemical formula is H2O",其中 "2" 将以下标形式显示。

保存 index.html 文件并在浏览器中打开以查看输出。你应该会看到下标文本 "H2O"。

总结

在本实验中,你学习了如何在 HTML 中使用 <sub> 标签来显示下标文本。这对于显示化学公式和其他需要降低基线的文本非常有用。通过遵循本实验中的步骤,你可以轻松地将 <sub> 标签添加到 HTML 代码中,并创建下标文本。

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