怎样在网页中展示联系人信息？Address标签定义联系方式区块-html教程-PHP中文网

标签仅用于标记网页作者或拥有者的联系信息，如页脚的运营方邮箱、地址、电话，不可用于客服电话、社交链接或表单旁的联系提示；错误使用会损害无障碍访问。

怎样在网页中展示联系人信息？address标签定义联系方式区块

Address 标签不是用来标记任意联系人信息的

<address></address> 的语义非常明确：它只用于表示**作者/拥有者**的联系信息，比如网页底部的网站运营方邮箱、物理地址或联系电话。它不适用于产品页的客服电话、文章作者的社交链接（除非是整页作者）、或表单旁的“联系我们”区块。浏览器不会为它添加特殊样式，但屏幕阅读器会将其识别为“联系信息区域”，错误使用会干扰无障碍访问。

常见误用场景和替代方案

以下情况不该用 <address></address>：

商品详情页里的“客服电话：400-123-4567” → 改用 <p></p> 或带 role="note" 的容器，配合 <a href="tel:4001234567"></a>
侧边栏“关注我们”图标链接 → 用 <div> 或 <code><nav aria-label="社交媒体"></nav> 更准确
表单上方的“有问题？发邮件到 support@example.com” → 用 <p></p> + <a href="mailto:support@example.com"></a>

真正该用 Address 的典型位置

仅在以下上下文中合理使用 <address></address>：

页面 <footer></footer> 中声明本页内容归属方，例如：

<footer><address>
    联系我们：<a href="mailto:admin@site.com">admin@site.com</a>｜
    地址：北京市朝阳区某某路1号
  </address>
</footer>

博客文章末尾署名区块（且该作者即整篇内容责任方）：

<article><h2>如何调试 CSS Grid</h2>
  <address>作者：<a href="https://www.php.cn/link/24d510a6f87403bf5b83f64726c3fd90">张三</a>
</address>
  <p>本文发布于 2024 年…</p>
</article>

兼容性和样式注意事项

<address></address> 在所有现代浏览器中默认显示为斜体（源于历史样式），但这只是 UA stylesheet 的默认行为，并非语义要求。如果你希望保持正体，必须显式重置：

address {
  font-style: normal;
}

另外注意：<address></address> 不能嵌套另一个 <address></address>，也不能直接包含 <h1>–<h6></h6> </h1>；若需结构化字段（如“电话”“邮箱”“地址”分项），应使用 <dl></dl> 或 <ul></ul> 配合 ARIA 标签，而不是强行拆解 <address></address>。

最容易被忽略的一点：语义错误比样式难修复——一旦用错 <address></address>，后期做无障碍审计或 SEO 优化时，得逐页排查 DOM 结构，而不是改一行 CSS 就能解决。