在HTML中创建小文本

如果我们想在HTML文档中设置较小的字体大小，可以使用<small>标签。此标签用于将字体大小减小一级，即从中等大小减小到小号大小，或从特大号减小到大号大小。我们可以通过两种方式在HTML中使用此<small>标签

  • 嵌套形式

  • 非嵌套形式

语法

以下是HTML中小型字体标签的使用方法：

<small>text… </small>

它有开始和结束标签。它支持全局属性和事件属性。

示例

以下示例演示了small标签的使用：

<!DOCTYPE html>
<html>
<head>
   <title>HTML small Tag</title>
</head>
<body>
   <h2>Tutorialspoint</h2>
   <p><small> Simply Easy Learning</small></p>
</body>
</html>

嵌套形式

如果我们在嵌套形式中使用small标签，它会根据父级字体大小更改其中呈现的字体大小。例如，如果我们增大父文本的字体大小，small标签的字体大小也会自动增大。

示例

以下示例演示如何添加HTML的标题、正文和其他结构。

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 15px;">HTML means <small>Hyper Text Markup Language</small></p>
</body>
</html>

示例

在以下示例中，我们尝试增大<small>标签父元素的字体大小。

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 40px;">HTML means <small>Hyper Text Markup Language</small></p>
</body>
</html>

注意 - 嵌套小型文本的字体大小与父元素文本的字体大小之间的比率相同。

什么是非嵌套形式？

非嵌套形式意味着我们可以将small标签用作HTML中的单独元素，这样父元素的字体大小不会影响small标签的文本。

示例

以下是非嵌套small标签的示例：

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 15px;">HTML means </p>
   <small>Hyper Text Markup Language</small>
</body>
</html>

示例

现在考虑另一个例子，尝试更改段落的字体大小，并检查<small>标签的字体大小发生了什么变化。

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 30px;">HTML means </p>
   <small>Hyper Text Markup Language</small>
</body>
</html>

对<small>标签的CSS设置

现在，我们尝试使用small标签应用CSS属性来设置文本的字体大小。

<!DOCTYPE html>
<html>
<head>
   <style>
      span.small {
         font-size: smaller;
         color: blue;
      }
   </style>
</head>
<body>
   <h2>Demonstrating smaller text by applying CSS</h2>
   <p>HTML Means,</p>
   <p>
      <span class="small">Hyper Text Markup Language.</span>
   </p>
</body>
</html>

更新于：2023年10月10日

569 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告