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