PHP小码农

Appearance

address 联系信息 ​

<address> 元素用于提供其最近的 <article> 或 <body> 祖先元素的联系人或联系信息。它通常包含作者姓名、邮箱地址、电话号码、物理地址等联系方式。

前置知识

阅读本节前，建议先了解：hgroup 标题组

基础概念 ​

什么是 address ​

<address> 是 HTML 语义化标签，专门用于标注联系信息。需要注意的是，<address> 不代表物理地址（postal address），而是联系信息（contact information），可以包含邮箱、电话、网站链接、社交媒体链接等。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>address 示例</title>
</head>
<body>
  <footer>
    <!-- 页面级联系信息 -->
    <address>
      <p>联系邮箱：<a href="mailto:info@example.com">info@example.com</a></p>
      <p>电话：<a href="tel:+8610123456789">010-12345678</a></p>
    </address>
  </footer>
</body>
</html>

address 的核心特征 ​

特征说明
作用范围其最近的 article 或 body 祖先
内容类型联系信息（邮箱、电话、链接等）
不可嵌套address 不能包含另一个 address
语义含义联系人信息，不是物理地址
默认样式斜体显示（font-style: italic）

address 的常见误解 ​

<address> 经常被误用为标注物理地址。实际上它表示的是"联系人信息"，不限于物理地址。如果要标注一个物理地址（如公司地址），应考虑使用 Schema.org 的结构化数据配合普通文本。

html
<!-- 错误用法：用 address 标注随意的物理地址 -->
<address>
  <p>北京市朝阳区建国路100号</p>
</address>

<!-- 正确用法：标注该区域的联系信息 -->
<address>
  <p>作者：张三</p>
  <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
</address>

<!-- 如果要标注物理地址，可以使用结构化数据 -->
<div itemscope itemtype="https://schema.org/Organization">
  <p itemprop="address">北京市朝阳区建国路100号</p>
</div>

语法与使用 ​

基本语法 ​

html
<address>
  <!-- 联系信息内容 -->
</address>

address 可以包含的内容 ​

内容类型标签示例说明
姓名<p>张三</p> 或 <strong>张三</strong>联系人姓名
邮箱<a href="mailto:...">...</a>电子邮箱
电话<a href="tel:...">...</a>电话号码
网站<a href="https://...">...</a>个人网站
社交链接<a href="https://...">...</a>社交媒体
物理地址<p>北京市...</p>实际地址（可包含）

address 的作用范围 ​

<address> 的联系信息作用于其最近的 <article> 或 <body> 祖先：

html
<body>
  <!-- 页面级 address：整个页面的联系信息 -->
  <footer>
    <address>
      <p>网站维护：<a href="mailto:admin@example.com">admin@example.com</a></p>
    </address>
  </footer>

  <main>
    <article>
      <header>
        <h1>文章标题</h1>
        <!-- 文章级 address：文章作者的联系信息 -->
        <address>
          <p>作者：<a href="mailto:author@example.com">张三</a></p>
        </address>
      </header>
      <p>正文内容...</p>
    </article>

    <article>
      <header>
        <h1>另一篇文章</h1>
        <!-- 文章级 address：另一篇文章作者的联系信息 -->
        <address>
          <p>作者：<a href="mailto:li@example.com">李四</a></p>
        </address>
      </header>
      <p>正文内容...</p>
    </article>
  </main>
</body>

详细说明 ​

页面级 address ​

页面级 <address> 出现在 <footer> 中，表示整个网站或页面的联系信息：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面级 address 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; }

    .site-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }
    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }

    .site-footer {
      background: #1a1a2e; color: #a0aec0; padding: 2rem;
    }

    .footer-content {
      max-width: 800px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
    }

    /* address 样式：重置默认斜体 */
    address {
      font-style: normal;
    }

    .contact-info h3 {
      color: #fff; margin-bottom: 0.75rem;
      padding-bottom: 0.5rem; border-bottom: 2px solid #3498db;
    }

    .contact-info p {
      font-size: 0.85rem; margin-bottom: 0.5rem;
    }

    .contact-info a {
      color: #63b3ed; text-decoration: none;
    }

    .contact-info a:hover {
      text-decoration: underline;
    }

    .copyright {
      max-width: 800px; margin: 1.5rem auto 0;
      padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1);
      font-size: 0.8rem; text-align: center;
    }

    @media (max-width: 600px) {
      .footer-content { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <header class="site-header"><h1>MyCompany</h1></header>

  <main>
    <h1>关于我们</h1>
    <p>MyCompany 是一家专注于 Web 技术开发的公司。</p>
  </main>

  <!-- 页面级 footer + address -->
  <footer class="site-footer">
    <div class="footer-content">
      <div>
        <h3 style="color:#fff;margin-bottom:1rem">MyCompany</h3>
        <p style="font-size:0.85rem;line-height:1.6">
          致力于为客户提供最优质的 Web 开发解决方案。
        </p>
      </div>

      <!-- 页面级联系信息 -->
      <address class="contact-info">
        <h3>联系我们</h3>
        <p>邮箱：<a href="mailto:info@mycompany.com">info@mycompany.com</a></p>
        <p>电话：<a href="tel:+861012345678">010-1234-5678</a></p>
        <p>地址：北京市朝阳区建国路100号</p>
        <p>
          网站：<a href="https://mycompany.com">mycompany.com</a><br>
          GitHub：<a href="https://github.com/mycompany">github.com/mycompany</a>
        </p>
      </address>
    </div>

    <p class="copyright">&copy; 2024 MyCompany. 保留所有权利.</p>
  </footer>
</body>
</html>

文章级 address ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章级 address 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #f5f5f5; }

    .site-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }
    main { max-width: 700px; margin: 2rem auto; padding: 0 1rem; }

    .article {
      background: #fff; padding: 2rem; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .article header { margin-bottom: 1.5rem; }
    .article h1 { margin-bottom: 1rem; }

    /* 文章 address 样式 */
    .author-info {
      display: flex; align-items: flex-start; gap: 1rem;
      padding: 1rem; background: #f8fafc; border-radius: 8px;
    }

    address { font-style: normal; }

    .author-avatar {
      width: 50px; height: 50px; border-radius: 50%;
      background: #e0e0e0; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem; color: #666;
    }

    .author-details h3 { font-size: 1rem; margin-bottom: 0.25rem; }
    .author-details p { font-size: 0.85rem; color: #64748b; margin-bottom: 0.25rem; }
    .author-details a { color: #3b82f6; text-decoration: none; }
  </style>
</head>
<body>
  <header class="site-header"><h1>TechBlog</h1></header>

  <main>
    <article class="article">
      <header>
        <h1>TypeScript 5.0 新特性解析</h1>
        <p style="color:#64748b;font-size:0.85rem;margin-bottom:1rem">
          <time datetime="2024-01-25">2024 年 1 月 25 日</time> &middot; 10 分钟阅读
        </p>

        <!-- 文章级 address：作者联系信息 -->
        <address class="author-info">
          <div class="author-avatar">Z</div>
          <div class="author-details">
            <h3>张三</h3>
            <p>前端架构师，专注 TypeScript 和 React 开发</p>
            <p>
              <a href="mailto:zhangsan@example.com">邮箱</a> &middot;
              <a href="https://github.com/zhangsan">GitHub</a> &middot;
              <a href="https://twitter.com/zhangsan">Twitter</a>
            </p>
          </div>
        </address>
      </header>

      <p>TypeScript 5.0 带来了多项重要更新，包括装饰器的标准化、const 类型参数等...</p>
    </article>
  </main>
</body>
</html>

address 的嵌套限制 ​

<address> 不能嵌套在另一个 <address> 中：

html
<!-- 错误：address 嵌套 -->
<address>
  <p>张三</p>
  <address> <!-- 错误！address 不能嵌套 -->
    <p>李四</p>
  </address>
</address>

<!-- 正确：使用其他元素分组 -->
<address>
  <p>张三 - <a href="mailto:zhang@example.com">zhang@example.com</a></p>
  <p>李四 - <a href="mailto:li@example.com">li@example.com</a></p>
</address>

实战示例 ​

多作者页面的 address 使用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多作者 address 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; }
    .site-header { background: #1e293b; color: #fff; padding: 1rem 2rem; }
    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }

    .author-list {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1.5rem; margin-top: 1.5rem;
    }

    .author-card address {
      font-style: normal;
      background: #fff; padding: 1.25rem; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .author-card .author-name {
      font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem;
    }
    .author-card p { font-size: 0.85rem; color: #64748b; margin-bottom: 0.25rem; }
    .author-card a { color: #3b82f6; text-decoration: none; }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>TechBlog</h1>
    <nav aria-label="主导航"><a href="/" style="color:#94a3b8;text-decoration:none;margin-left:1rem">首页</a></nav>
  </header>

  <main>
    <h1>作者团队</h1>

    <div class="author-list">
      <!-- 每个作者卡片使用 address -->
      <div class="author-card">
        <address>
          <p class="author-name">张三</p>
          <p>前端工程师</p>
          <p><a href="mailto:zhang@example.com">邮箱</a></p>
          <p><a href="https://github.com/zhangsan">GitHub</a></p>
        </address>
      </div>

      <div class="author-card">
        <address>
          <p class="author-name">李四</p>
          <p>全栈工程师</p>
          <p><a href="mailto:li@example.com">邮箱</a></p>
          <p><a href="https://github.com/lisi">GitHub</a></p>
        </address>
      </div>

      <div class="author-card">
        <address>
          <p class="author-name">王五</p>
          <p>UI 设计师</p>
          <p><a href="mailto:wang@example.com">邮箱</a></p>
          <p><a href="https://dribbble.com/wangwu">Dribbble</a></p>
        </address>
      </div>
    </div>
  </main>
</body>
</html>

注意事项 ​

常见错误 ​

  1. 用 address 标注任意地址：address 是联系信息，不是物理地址标注
  2. address 内嵌套 address：违反规范
  3. address 包含非联系信息：不应该放入与联系人无关的内容
  4. 忘记重置斜体样式：address 默认是斜体，通常需要重置
html
<!-- 错误：address 内放非联系信息 -->
<address>
  <h2>关于我们</h2>
  <p>公司简介...</p> <!-- 非联系信息 -->
</address>

<!-- 正确：address 只包含联系信息 -->
<address>
  <p>联系：<a href="mailto:info@example.com">info@example.com</a></p>
  <p>电话：<a href="tel:+861012345678">010-1234-5678</a></p>
</address>

最佳实践 ​

  1. 重置默认斜体样式：通常需要 address { font-style: normal; }
  2. 使用 mailto 和 tel 协议：让联系信息可以直接点击操作
  3. 放在合适的位置：页面级放在 footer 中，文章级放在 article header 中
  4. 包含多种联系方式：邮箱、电话、网站、社交媒体等
  5. 配合结构化数据使用：使用 Schema.org 标注让搜索引擎更好理解

下一节

继续学习：search 搜索容器

参考链接 ​