HTML 小字体文本

HTMLHTMLBeginner
立即练习

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

介绍

在本实验中,你将学习如何使用 HTML <small> 标签来改变文本的大小。你还将了解如何使用 <small> 标签的不同方式以及如何为其应用样式。

注意:你可以在 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/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70835{{"`HTML 小字体文本`"}} html/head_elems -.-> lab-70835{{"`HTML 小字体文本`"}} html/text_head -.-> lab-70835{{"`HTML 小字体文本`"}} html/para_br -.-> lab-70835{{"`HTML 小字体文本`"}} html/inter_elems -.-> lab-70835{{"`HTML 小字体文本`"}} end

为你的文件添加结构

在你的文本编辑器中创建一个名为 index.html 的 HTML 文件。

将 HTML 样板代码添加到你的文件中。然后,创建一个 <body> 标签,并在其中添加以下代码:

<h1>使用 HTML small 标签</h1>
<p>这是一些我们希望变小的文本:</p>

添加 small 标签

<p> 标签内添加 <small> 标签,并在其开始和结束标签之间添加一些文本:

<p>这是一些我们希望变小的文本:<small>smaller</small></p>

使用 small 标签添加法律文本

通过将以下代码复制并粘贴到 <body> 标签内,使用 <small> 标签添加法律文本:

<p>这是一些普通文本,但这里有一些 <small>法律文本</small>:</p>
<small>本网站不对任何错误信息或错误负责。请在信任本网站之前仔细阅读。</small>

为 small 标签应用样式

通过在 <head> 标签内添加以下代码,为 <small> 标签应用一些样式:

<style>
  small {
    font-size: smaller;
    color: red;
  }
</style>

使用 small 标签添加旁注

通过将以下代码复制并粘贴到 <body> 标签内,使用 <small> 标签添加旁注:

<p>这是一些普通文本,但这里有一个关于这段文本的 <small>旁注</small>:</p>

将更改保存到 index.html 文件并在网页浏览器中打开它。你应该会看到对 <small> 标签所做的更改。

总结

在本实验中,你学习了如何使用 HTML 的 <small> 标签来改变文本的大小以及如何为其应用样式。你还了解了 <small> 标签的不同用途,包括用于法律文本、旁注和小字印刷。现在你可以使用 <small> 标签为文本添加强调效果,使其更加突出。

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