PHP小码农

Appearance

small 小号文本 ​

<small> 标签用于表示附属细则（side comments）、免责声明、版权声明等附属信息。它的默认样式是将文字缩小显示，但核心语义是表示这些内容是辅助性的、不那么重要的。

前置知识

阅读本节前，建议先了解：mark 高亮

基础概念 ​

<small> 是 HTML5 中的语义标签，表示"旁注、附属细则"。它常用于版权声明、法律条款、免责声明、版本说明等。虽然浏览器默认以小号字体渲染 <small>，但其语义意义在于内容的重要性较低，而非视觉大小。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>small 示例</title>
</head>
<body>
  <!-- 版权声明 -->
  <footer>
    <small>&copy; 2025 版权所有。未经许可，不得转载。</small>
  </footer>

  <!-- 免责声明 -->
  <p>价格：<small>不含税费，运费另计</small></p>

  <!-- 版本信息 -->
  <h1>产品手册 <small>v2.1</small></h1>
</body>
</html>

详细说明 ​

small 的默认样式 ​

属性默认值（Chrome）说明
displayinline行内元素
font-sizesmaller（比父元素小一号）通常约为 0.83em

small 的典型使用场景 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>small 使用场景</title>
</head>
<body>
  <h1>small 标签的典型用法</h1>

  <!-- 版权声明 -->
  <footer>
    <p><small>&copy; 2025 某某科技有限公司。保留所有权利。</small></p>
  </footer>

  <!-- 法律免责声明 -->
  <p>本产品提供的投资建议仅供参考，<small>不构成任何投资承诺或收益保证</small>。</p>

  <!-- 附属条款 -->
  <p>促销价格：99 元 <small>（限新用户首单，每人限购一次）</small></p>

  <!-- 版本或日期标注 -->
  <h2>更新日志 <small>2025-01-10</small></h2>

  <!-- 技术限制说明 -->
  <p>支持格式：JPG、PNG、GIF <small>（单个文件不超过 5MB）</small></p>

  <!-- 归属信息 -->
  <p>照片由 <small>张三 / Unsplash</small> 提供。</p>
</body>
</html>

不要用 small 表示不重要的内容 ​

<small> 表示的是附属细则，而非"不重要"。即使内容很重要（如法律声明），只要它是附属信息，也可以使用 <small>。

html
<!-- 正确用法：法律声明虽然重要，但它是主内容的附属说明 -->
<p>参加本次活动即表示您同意以下条款，<small>包括但不限于数据使用协议和隐私政策</small>。</p>

实战示例 ​

产品价格页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品定价</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .price { font-size: 2rem; color: #e53935; font-weight: bold; }
    small { color: #888; }
  </style>
</head>
<body>
  <h1>专业版定价</h1>

  <p class="price">&yen;299/月 <small>（年付享 8 折优惠）</small></p>

  <ul>
    <li>无限存储空间</li>
    <li>优先技术支持</li>
    <li>API 调用无限制 <small>（每日不超过 10 万次）</small></li>
  </ul>

  <p><small>以上价格不含增值税。订阅到期后将自动续费，可随时取消。</small></p>
</body>
</html>

注意事项 ​

small 与 CSS font-size 的区别 ​

html
<!-- small：有语义，表示附属细则 -->
<p>价格：99 元 <small>（不含运费）</small></p>

<!-- span + CSS：纯视觉缩小，无语义 -->
<p>价格：99 元 <span style="font-size: 0.8em;">（不含运费）</span></p>

最佳实践 ​

  1. 用于附属信息：版权声明、免责声明、条款说明等
  2. 配合标题使用：版本号、日期等附属信息放在标题中
  3. 用于补充说明：主内容的附加条件、限制等
  4. CSS 自定义：可通过 CSS 调整颜色和字号

下一节

继续学习：del 与 ins

参考链接 ​