html5中的header，nav，footer

最新推荐文章于 2025-01-08 20:00:00 发布

qq_38922435

最新推荐文章于 2025-01-08 20:00:00 发布

阅读量9.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 header nav footer

本文链接：https://blog.youkuaiyun.com/qq_38922435/article/details/80468311

HTML5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5中<header>、<nav>和<footer>三个标签的定义和使用场景。header标签不仅限于页头，可作为文章页头；nav标签用于表示导航链接，可以是主导航或子导航；footer标签则用于表示页面或文章的底部信息，常包含作者、版权等。

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

html5中的header，nav，footer

header标签

在新的标准中header标签定义如下：

"A group of introductory or navigational aids.”

基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容，也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如：

<header>
    <h1>HTML5基本标签使用，header，Nav和footer</h1>
    <div class="post-meta">
        <p>作者信息:gbin1.com</a> <span class="category">文章创建类别：HTML5/CSS3</span></p>  
    </div>
</header>
<article>
    <p>大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分</p>
</article>

在上面的结构中，我们可以看到使用header我们定义了一篇文章的标题和内容。这里header标签的使用并不是页面的页头，而是文章的页头。

所以在HTML5中，header的使用更加灵活，你可以根据你的需要来定义和组织document结构。

Nav标签

Nav标签全称navigation，顾名思义，是导航的意思。根据HTML5的相关标准定义如下：

"A section of a page that links to other pages or to parts within the page: a section with navigation links."

中文翻译大概意思是”页面中的一个用来链接到其它页面或者当前页面的区域：一个含有导航链接的区域”。

这里非常清楚的定义了nav标签的功能，这里和header类似并没有指定必须是主导航，也可以是页面其它部分的子导航。如下：

<h3>gbin1.com文章列表</h3>
<nav>
    <ul>
        <li><a href="#html5">HTML5文章介绍</a></li>
        <li><a href="#css3">CSS3文章介绍</a></li>
        <li><a href="#jquery">jQuery文章介绍</a></li>
    <ul>
</nav>

在上面这个例子中，我们看到这里只是一个区域的文章导航，同样也可以使用nav定义一个小型的页面内导航。

Footer标签

最后一个就是footer标签，即，页底标签。使用这个标签你可以定义页面的低端结构，当然，和上面我们介绍header标签或者nav标签一样，它并不是仅仅使用在整个页面的页尾处。相关的HTML5标准定义如下：

“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

中文意思是：”footer元素代表了页面内容或者区域内容最底端的展示。一个典型的例子是包含了作者信息，文档链接或者是版权信息等等“。

当然，这里我们看到并不局限于整个页面的内容，也可以是一个文章的页尾内容，例如，来源或者是作者信息等等。如下：

<footer>
    <div class="tags">
        <span class="tags-title">相关标签</span> <a href="#" rel="tag">html5</a>, <a href="#" rel="tag">nav</a>, <a href="#" rel="tag">header</a>, <a href="#" rel="tag">footer</a>
    </div>
    <div class="source">
        <div>来源：<a href="http://gbin1.com">html5/css3教程</a></div> 
    </div>
</footer>

在上面的例子中，我们定义了一个简单的文章内的页尾信息，可以看到我们添加了来源和相关标签，这在博客类型的网站中经常出现。