在 HTML 中创建小字体

htmlweb developmentfront end technology更新于 2025/8/14 5:32:17

如果我们想在 HTML 文档中设置小字体，请使用 标签。此标签用于将字体大小从中号减小到小号，或从特大号减小到大号。在 HTML 中，我们可以通过两种方式使用 标签:

嵌套形式
非嵌套形式

语法

以下是 HTML 中小字体标签的用法 -

<small>text… </small>

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

示例

以下示例演示了小标签的用法 −

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

嵌套形式

如果我们在嵌套形式中使用小标签，它会根据父标签的字体大小改变其间的字体大小。假设我们自动增加父标签文本的字体大小，小标签的字体大小也会随之增加。

示例

以下示例演示了如何添加标题、正文和其他 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>

示例

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

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

注意嵌套小文本的字体大小与父元素文本的字体大小比例相同。

什么是非嵌套形式?

非嵌套形式是指，我们可以在 HTML 中使用小标签作为单独的元素，这样父元素的字体大小就不会影响小标签文本。

示例

以下是非嵌套小标签的示例 –

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

示例

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

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

标签的 CSS 设置

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

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