address标签专用于声明页面或article的责任归属方联络方式，必须为body或article的直接子元素，仅允许内联级可交互联系内容，视觉样式需手动增强以维持语义识别。
address标签只回答“谁负责这个页面或文章”
它不是放“地址”的通用容器，而是 HTML 中唯一专用于声明责任归属的语义化元素：当前 body 或最近的 article 的作者、维护者、版权归属方的可联络方式。浏览器和屏幕阅读器靠它识别“这是联系谁”，搜索引擎也据此理解内容权属。写错作用域，等于向辅助技术撒谎。
合法作用域只有两种：body 直系子元素 or article 直系子元素
必须是 body 或 article 的**直接子元素**，否则语义失效：
- ✅
<body><address>...</address></body>→ 整个页面的维护者（如官网首页 footer 中的webmaster@company.com） - ✅
<article><address>...</address></article>→ 仅该文章的作者（如博客正文末尾的author@example.com） - ❌ 嵌套在
<section>、<div>、<header>或<main>里 → 浏览器忽略其语义，等同于普通div - ❌ 同一页面多个
address都放在body下 → 只有第一个被识别为页面级联系人，其余降级为无意义文本容器
能写什么？只允许“可联络 + 归属明确”的内联内容
HTML5 明确限定内容模型为 phrasing content，即只能包含内联级、可交互的联系项：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅
<a href="mailto:xxx@example.com">xxx@example.com</a>（必须带mailto:或tel:） - ✅
<a href="https://github.com/username">GitHub</a>（作者公开主页） - ✅
<strong>张三</strong>（作者名，需与联系方式并列） - ✅ 物理地址，但仅限“责任人办公地 + 联络用途”，例如：
来信请寄：北京市朝阳区XX路1号（前端组收） - ❌
<p>© 2026 XXX 公司</p>（版权是法律声明，不是联系渠道） - ❌
<h3>联系我们</h3>或<ul><li>客服电话</li></ul>（块级元素禁止嵌套） - ❌ 单独写“上海市浦东新区XX路XX号”（无责任人归属、无可交互性）
样式已清零，但语义不能靠视觉补
Chrome 120+、Firefox 125+ 等现代浏览器已移除 address 默认的 font-style: italic 和 margin。它现在视觉上和 div 几乎一样——但这不意味着它没用，只是你不能再依赖斜体来暗示语义。
立即学习“前端免费学习笔记（深入）”；
- 重置样式没问题：
address { font-style: normal; margin: 0; } - 但必须手动提供视觉区分：比如加
border-left: 2px solid #007bff;、缩进padding-left: 1rem;或配色color: #555; - 千万别用
display: block强行“恢复结构”——它本来就是块级元素，改了反而可能破坏小屏流式布局 - 真正难的从来不是怎么写，而是每次写之前都得问一句：这个信息，能不能准确回答“谁写了这篇？谁负责维护？出了问题找谁？”——答不上来，就别用
address。
