HTML address 标签

HTML address 语法

在 HTML 中，address 标签用于定义文档或文章的作者的联系信息，比如姓名、邮箱、电话号码、网站地址等信息。

默认情况下，address 标签通常会以斜体显示，并与周围内容隔开。

语法：

<address>联系信息</address>

说明：

address 标签主要为 “整个页面” 或 “某个 article 标签” 添加地址信息。

当 address 标签应用于整个页面时：它一般放于整个页面的底部（比如 footer 标签内部），表示该网站所有者的地址信息。
当 address 标签应用于 article 标签时：它一般放在 article 标签内部的 footer 元素内，表示该篇文章所有者的地址信息。需要清楚的是，一个页面可以由多个 article 元素，比如有些页面就有好几篇文章。

HTML address 摘要

属于	HTML 语义化
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML address 示例

接下来，我们通过几个简单的例子来讲解一下 HTML address 标签是如何使用的。

示例 1：address 应用于整个页面

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <header></header>
    <nav></nav>
    <article></article>
    <aside></aside>
    <footer>
        如果你有任何建议，请联系我们：
        <address>
            <a href="mailto:lvyenet@qq.com">lvyenet@qq.com</a><br>
            <a href="tel:+13288888888">13288888888</a>
        </address>
    </footer>
</body>
</html>

页面效果如下图所示。

HTML address标签应用于整个页面

示例 2：address 应用于 article 元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <header></header>
    <nav></nav>
    <article>
        <header>作者：Jack</header>
        <p>这是第1篇文章的内容</p>
        <footer>
            <address>
                你可以通过<a href="mailto:aaa@qq.com"> aaa@qq.com </a>联系Jack。
            </address>
        </footer>
    </article>
    <hr>
    <article>
        <header>作者：Lucy</header>
        <p>这是第2篇文章的内容</p>
        <footer>
            <address>
                你可以通过<a href="mailto:bbb@qq.com">bbb@qq.com</a>联系Lucy。
            </address>
        </footer>
    </article>
    <aside></aside>
    <footer>
    </footer>
</body>
</html>

页面效果如下图所示。

HTML address标签应用于article元素