新增的非主体结构的元素—header，footer，address，adress

本文链接：https://blog.youkuaiyun.com/qq_40171918/article/details/80638338

本文详细介绍了HTML5中的结构标签<header>、<footer>和<address>的使用方法及应用场景。通过具体示例展示了这些标签如何帮助开发者更好地组织网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML <header> 标签

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <header>
        <h1>IT最新技术</h1>
        <a href="http://www.baidu.com">百度</a>
        <nav>
            <ul>
                <li><a href="#">学习</a></li>
                <li><a href="#">技术</a> </li>
                <li><a href="#">极客</a> </li>
            </ul>
        </nav>
    </header>


</body>
</html>

定义和用法

<header> 标签定义文档的页眉（介绍信息）。

2.HTML <footer> 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <article>
       <footer>
           这是一个文章的底部
       </footer>
   </article>
</body>
</html>

定义和用法

<footer> 标签定义文档或节的页脚。

<footer> 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

3.HTML 5 <address> 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>address</title>
</head>
<body>
    <address>
        <a href="#">iwen</a>
        <a href="#">iwww</a>
    </address>
    <footer>
        <div>
            <address>
                <a href="#">iwen</a>
                极客学院
            </address>
            <time datetime="2015-10-10">2015-10-10</time>
        </div>
    </footer>
</body>
</html>