源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 中的 small

2026/02/07
13
0

学习目标

  • 理解 HTML <small> 标签的基本用途与语义

  • 掌握 <small> 标签在嵌套与非嵌套场景下的字体表现差异

  • 了解如何使用 CSS 实现类似 <small> 的视觉效果

  • 明确 <small> 标签的适用场景及最佳实践

正文内容

什么是 <small>

HTML 中的 <small> 标签是一个行内元素，用于将文本以较小的字号显示，通常用于呈现次要信息、法律声明、版权声明或注释等内容。

需要注意的是：

  • <small> 不改变文本的语义含义，仅在视觉上弱化其重要性；

  • 它支持所有 HTML 全局属性和事件属性；

  • 虽然该标签未被废弃，但现代开发中常推荐使用 CSS（如 font-size: smaller）来实现更灵活的控制。

基本语法如下：

<small>此处为次要内容</small>

嵌套形式

当 <small> 标签嵌套在其他文本元素（如 <p>、<div>）内部时，其字体大小会相对于父元素的字体大小进行缩放。这意味着如果父元素的字号变大，<small> 内的文本也会按比例放大，保持相对比例不变。

示例 1

父元素字体为 18px

<!DOCTYPE html>
<html>
<head>
    <title>HTML small 标签示例</title>
</head>
<body>
    <h2>欢迎来到 CodeHub</h2>
    <p style="font-size: 18px;">
        CodeHub
        <small>
            一个学习编程与计算机科学概念的平台。
        </small>
    </p>
</body>
</html>

示例 2

父元素字体增大至 32px

<!DOCTYPE html>
<html>
<head>
    <title>CodeHub</title>
</head>
<body>
    <h2>欢迎来到 CodeHub</h2>
    <p style="font-size: 32px">
        CodeHub
        <small>
            您学习编程与计算机科学的首选平台。
        </small>
    </p>
</body>
</html>

在嵌套使用时，<small> 的字体大小始终与父元素保持固定比例关系（通常约为父元素的 80% 左右，具体取决于浏览器默认样式）。

非嵌套形式

当 <small> 作为独立元素直接出现在文档流中（例如紧跟在段落之后），它的字体大小不再受其他元素影响，而是基于浏览器默认的根字体大小（通常是 <body> 的字体大小）进行计算。

独立使用

<!DOCTYPE html>
<html>
<head>
    <title>HTML small 标签</title>
</head>
<body>
    <h2>欢迎来到 CodeHub</h2>
    <p style="font-size: 32px">
        CodeHub
    </p>
    <small>
        一个学习编码、数据结构与算法的平台。
    </small>
</body>
</html>

注意：此时即使 <p> 的字体设为 32px，<small> 的字体仍保持其默认的小号尺寸，不会随之变化。

使用 CSS 替代

现代 Web 开发中，更推荐使用 CSS 来控制字体大小，以获得更好的可维护性和灵活性。

<!DOCTYPE html>
<html>
<head>
    <title>small 标签与 CSS 对比</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .small-text {
            font-size: smaller; /* 相对于父元素缩小一级 */
        }
    </style>
</head>
<body>
    <h1>CodeHub</h1>
    <h2>font-size: smaller</h2>

    <!-- 使用 CSS -->
    <div class="small-text">
        欢迎来到 CodeHub！（使用 CSS 实现）
    </div>

    <!-- 使用 <small> 标签 -->
    <p>
        <small>
            欢迎来到 CodeHub！（使用 &lt;small&gt; 标签）
        </small>
    </p>
</body>
</html>

在大多数浏览器中，font-size: smaller 与 <small> 的默认渲染效果非常接近，但 CSS 方式更具语义清晰性和样式控制能力。

重点总结

特性

说明

标签类型

行内元素（inline）

语义作用

视觉弱化，不改变语义

典型用途

版权信息、免责声明、注释、次要说明

嵌套行为

字体大小相对于父元素缩放

独立使用

字体大小基于根字体（如 body）

替代方案

推荐使用 font-size: smaller 或具体像素值通过 CSS 控制

思考题

  1. 为什么说 <small> 标签“不具有语义重要性”？它与 <em> 或 <strong> 在语义上有何本质区别？

  2. 在响应式网页设计中，使用 <small> 标签可能带来哪些布局或可访问性问题？如何用 CSS 更优雅地解决？

  3. 如果希望在移动端和桌面端对“小字”有不同的显示策略，应优先选择 <small> 还是 CSS？为什么？