<address>仅用于标注页面或文章作者/拥有者的联系信息，应置于<article>或<body>末尾，内容限文本、<a>、<em>、<strong>、<br>，禁用<p>等块级元素，浏览器默认斜体，公司地址等非归属信息须改用<div role="complementary">等替代方案。
<address> 只用于标注“当前页面或文章的作者/拥有者”联系信息
它不是用来放任意地址、客服电话或公司总部位置的。浏览器和屏幕阅读器会把 <address> 当作语义化元数据处理，只适用于归属声明——比如这篇博客谁写的、这个文档归哪个团队维护。
常见误用现象：
• 把「北京市朝阳区某某大厦10层」直接包进 <address>
• 在页脚塞入「400-123-4567｜service@example.com」却不说明这是谁的联系方式
• 多个 <address> 块混用，但没对应到具体文章/区块的作者
- 每个
<article>或<body>最多一个<address>，且应放在末尾附近 - 内容建议包含：作者名（
<a href="mailto:...">或<a href="https://...">）、邮箱、个人博客、GitHub 主页等可指向“责任人”的链接 - 纯文本地址、电话、微信二维码等非归属型信息，改用
<p>或<div role="region" aria-label="联系方式">
嵌套规则：能用哪些标签？不能用哪些？
<address> 允许直接子元素只有文本、<a>、<em>、<strong>、<br> —— 注意：<div>、<p>、<ul> 都不合法，HTML5 规范明确禁止块级容器嵌套。
错误示例会导致验证失败，部分辅助技术可能跳过解析：
立即学习“前端免费学习笔记（深入）”；
<address> <p>作者：张三</p> <p><a href="mailto:zhang@example.com">zhang@example.com</a></p> </address>
正确写法（扁平化、无 <p>）：
<address> 作者：<strong>张三</strong> <br> <a href="mailto:zhang@example.com">zhang@example.com</a> <br> <a href="https://zhang.example.com">个人博客</a> </address>
CSS 样式与默认行为要注意什么？
多数浏览器会给 <address> 加上斜体（font-style: italic），这不是 bug，而是规范建议样式。如果你取消斜体，语义不会丢失，但需确认视觉上仍能区分其元信息属性。
- 避免用
display: block或margin破坏原有行内流布局，尤其在小屏下易撑开空白 - 不要用
text-align: center一概居中——作者信息通常左对齐更自然 - 若页面有深色模式，记得同步设置
<address> a:link的颜色对比度，否则邮箱链接可能不可读
替代方案：当真要放公司地址/客服电话时该用什么？
用普通语义容器 + ARIA 补充说明更稳妥。例如页脚的实体地址：
<div role="complementary" aria-label="公司办公地址"> <p>北京市朝阳区建国路88号SOHO现代城A座10层</p> <p>电话：<a href="https://www.php.cn/link/c36c440058793ea4dc91347ea01c6727">010-8765-4321</a></p> </div>
关键点：
• 不强行套 <address>
• 用 role="complementary" 表明这是辅助性区域
• aria-label 明确用途，让屏幕阅读器用户一听就懂
• tel: 和 mailto: 协议保留可点击性
真正容易被忽略的是：很多人以为加了结构标签就等于做好了无障碍，其实 <address> 的语义非常窄，用错反而干扰理解。标联系信息前，先问一句——这个信息到底是在回答「谁负责这个页面？」，还是仅仅「我们公司在哪？」
