23. 联系信息 address 与小号文本 small

本节目标：学会用 address 标注联系信息，用 small 标记版权声明等附属内容。

address：联系信息

<address> 标签不是用来标记任何地址的。它有特定的语义：标记当前页面或文章的作者/所有者的联系信息。

<address>
  联系方式：<a href="mailto:hello@example.com">hello@example.com</a><br>
  网站：<a href="https://example.com">example.com</a>
</address>

浏览器默认把 <address> 显示为斜体。

address 用在哪

<address> 通常放在两个位置：

页面底部（整个网站的联系信息）：

<body>
  <!-- 页面主体内容 -->

  <footer>
    <address>
      © 2026 码上学<br>
      联系邮箱：<a href="mailto:contact@maxueshang.com">contact@maxueshang.com</a>
    </address>
  </footer>
</body>

文章内部（文章作者的联系信息）：

<article>
  <h1>HTML 标题标签详解</h1>
  <p>正文内容……</p>
  <address>
    作者：<a href="mailto:zhang@example.com">张三</a>
  </address>
</article>

address 不是万用地标

<address> 不能随便用来标记任何邮政地址、公司地址。它专门用于”怎么联系这篇文章/这个页面的人”。

small：小号文本

<p><small>© 2026 版权所有，未经许可不得转载。</small></p>

small 的语义

 不只是”小字”。它的语义是”这是附属信息，不是主要内容”。

典型场景：

版权声明
法律免责声明
注意事项
注释说明

<p>特价机票 999 元起。</p>
<p><small>* 价格不含税费，以实际出票为准。</small></p>

不要嵌套

 通常只放文本，不要嵌套标题、段落等块级元素。

<!-- 错误 -->
<small>
  <h3>免责声明</h3>
  <p>这里是内容……</p>
</small>

<!-- 正确 -->
<small>* 最终解释权归本公司所有。</small>

address + small 的经典组合

页面底部经常能看到这两个标签一起用：

<footer>
  <address>
    <p>
      <small>© 2026 码上学</small><br>
      <small>联系邮箱：<a href="mailto:hello@example.com">hello@example.com</a></small>
    </p>
  </address>
</footer>

和 CSS font-size 的区别

如果你只想让字变小，不表达”附属信息”的语义，用 CSS：

.footer-note {
  font-size: 0.85em;
}

 标签表示”这是附属的、不重要的信息”。视觉上恰好表现为小字号，但重点是语义。

小结

<address> 标记页面/文章作者的联系信息
<address> 不用于任意邮政地址
 标记版权声明、免责声明等附属信息
 的语义是”附属内容”，视觉表现为小字号
页面底部常组合使用 address 和 small
纯视觉调整用 CSS font-size，语义用标签