Web学习网站

Appearance

<small> 标签 ​

<small> 标签用于定义小号文本，通常用于免责声明、法律条文、版权信息等次要内容。

概述 ​

<small> 标签是 HTML 中的语义化标签，用于定义小号文本。它表示附属细则，如版权信息、法律条文、免责声明等次要内容。

语法 ​

html
<small>小号文本</small>

基本用法 ​

版权信息 ​

html
<p>© 2023 我的网站. 保留所有权利。</p>
<p><small>版权所有 © 2023 我的网站. 保留所有权利。</small></p>

免责声明 ​

html
<p>投资有风险，入市需谨慎。</p>
<p><small>以上内容仅供参考，不构成投资建议。投资有风险，入市需谨慎。</small></p>

实际示例 ​

网站页脚 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>small 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 2rem;
    }
    
    footer {
      background-color: #f8f9fa;
      padding: 2rem;
      margin-top: 2rem;
      border-top: 1px solid #dee2e6;
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    
    .footer-links a {
      color: #6c757d;
      text-decoration: none;
    }
    
    .footer-links a:hover {
      color: #007bff;
    }
    
    small {
      color: #6c757d;
      font-size: 0.875em;
    }
  </style>
</head>
<body>
  <main>
    <h1>网站内容</h1>
    <p>这里是网站的主要内容...</p>
  </main>
  
  <footer>
    <div class="footer-content">
      <div class="footer-links">
        <a href="#about">关于我们</a>
        <a href="#contact">联系我们</a>
        <a href="#privacy">隐私政策</a>
        <a href="#terms">使用条款</a>
      </div>
      
      <p><small>版权所有 © 2023 我的网站. 保留所有权利。</small></p>
      
      <p><small>本网站内容仅供参考，不构成任何形式的投资建议。投资有风险，入市需谨慎。</small></p>
      
      <p><small>备案号：京ICP备12345678号</small></p>
    </div>
  </footer>
</body>
</html>

产品信息 ​

html
<section>
  <h2>产品详情</h2>
  
  <div class="product">
    <h3>智能手机 X1</h3>
    <p>价格：¥2999</p>
    <p>配置：6.1英寸屏幕，128GB存储，4800万像素摄像头</p>
    
    <p><small>价格可能因市场波动而变化，具体以实际购买时为准。</small></p>
    
    <p><small>本产品享受一年有限保修服务，详情请参阅保修条款。</small></p>
  </div>
  
  <div class="product">
    <h3>笔记本电脑 Y2</h3>
    <p>价格：¥5999</p>
    <p>配置：14英寸屏幕，512GB固态硬盘，Intel i7处理器</p>
    
    <p><small>价格不含税，如需发票请另加税费。</small></p>
    
    <p><small>促销活动截止至2023年12月31日。</small></p>
  </div>
</section>

与相关标签的区别 ​

与 <sub> 和 <sup> 标签的区别 ​

html
<!-- small 标签：表示次要内容 -->
<p>价格：<small>¥2999</small></p>

<!-- sub 标签：表示下标 -->
<p>化学式：H<sub>2</sub>O</p>

<!-- sup 标签：表示上标 -->
<p>数学公式：E = mc<sup>2</sup></p>

与 CSS 样式字体大小的区别 ​

html
<!-- small 标签：具有语义含义 -->
<p>免责声明：<small>以上内容仅供参考</small></p>

<!-- CSS 样式：仅视觉效果 -->
<p>免责声明：<span style="font-size: 0.8em;">以上内容仅供参考</span></p>

样式化 ​

自定义小号文本样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 small 样式 */
    small {
      font-size: smaller;
    }
    
    /* 法律条文样式 */
    .legal-text {
      font-size: 0.75em;
      color: #6c757d;
      line-height: 1.4;
    }
    
    /* 免责声明样式 */
    .disclaimer {
      font-size: 0.8em;
      color: #dc3545;
      font-style: italic;
    }
    
    /* 注释样式 */
    .footnote {
      font-size: 0.85em;
      color: #495057;
      background-color: #e9ecef;
      padding: 0.5rem;
      border-radius: 4px;
      margin: 0.5rem 0;
    }
  </style>
</head>
<body>
  <p>默认样式：<small>这是默认的小号文本</small></p>
  
  <p>法律条文：<small class="legal-text">本协议受中华人民共和国法律管辖</small></p>
  
  <p>免责声明：<small class="disclaimer">投资有风险，入市需谨慎</small></p>
  
  <p>脚注说明：<small class="footnote">1. 数据来源：国家统计局 2023年报告</small></p>
</body>
</html>

在不同语境中的使用 ​

表格中的注释 ​

html
<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td>¥299</td>
      <td>有货</td>
    </tr>
    <tr>
      <td>产品B</td>
      <td>¥399</td>
      <td>缺货</td>
    </tr>
  </tbody>
</table>

<p><small>* 价格不含运费，满¥500免运费。</small></p>

表单中的说明 ​

html
<form>
  <label for="email">邮箱地址：</label>
  <input type="email" id="email" required>
  <small>请输入有效的邮箱地址</small>
  
  <br><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" required>
  <small>密码至少包含8个字符</small>
  
  <br><br>
  
  <button type="submit">注册</button>
  
  <p><small>点击注册即表示您同意我们的<a href="#">使用条款</a>和<a href="#">隐私政策</a>。</small></p>
</form>

无障碍访问 ​

屏幕阅读器支持 ​

html
<p>价格：<small aria-label="价格说明">不含税费</small>¥2999</p>

最佳实践 ​

  1. 语义化使用：只在表示次要内容时使用 <small> 标签
  2. 适用场景：常用于版权信息、法律条文、免责声明、注释说明等
  3. 样式化：通过 CSS 为小号文本提供合适的样式
  4. 可读性：确保小号文本仍然具有良好的可读性
  5. 一致性：在整个网站中保持小号文本样式的一致性

浏览器兼容性 ​

<small> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <small> 标签是内联元素
  2. 浏览器默认将其字体大小设置为 smaller
  3. 主要用于表示附属细则或次要内容
  4. 不要仅为了样式效果而使用 <small> 标签
  5. 可以通过 CSS 自定义小号文本的外观

相关标签 ​