科技猎【投稿】html5基本标签使用header，nav和footer – web前端开发
日期：2013-1-15 来源：gbin1.com
大家可能都知道html5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用css来定义相关的头部，导航及其页底部分，如下：
#nav{ padding: 10px ... }
#header{ padding: 10px ... }
#footer{ padding: 10px ... }
定义完之后呢，我们使用div标签来组织页面结构，如下：
<div id="header"></div> <div id="nav"></div> <div id="footer"></div>
这样的代码让我们创建了很多的非样式的css定义，是的代码结构复杂并且不直观易懂。
在新的html5标准中，我们定义了一系列的标签，帮助你更语义化的定义页面层次和逻辑，你不需要自己定义相关的div，html5提供了现成的标签来完成上述的结构化定义，如下：
<header></header> <nav></nav> <footer></footer>
使用以上的标签，你只需要在css文件中定义相关的真正的样式信息即可。
在今天的这篇文章中，我们将介绍相关的基本html5标签header，nav和footer。
header标签
在新的标准中header标签定义如下：
“a group of introductory or navigational aids.”
基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容，也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如：
<header> <h1>html5基本标签使用，header，nav和footer</h1> <div> <p>作者信息:gbin1.com</a> <span>文章创建类别：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> <span>相关标签</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> <div>来源：<a href="http://gbin1.com">html5/css3教程</a></div> </div> </footer>
在上面的例子中，我们定义了一个简单的文章内的页尾信息，可以看到我们添加了来源和相关标签，这在博客类型的网站中经常出现。
一个完整的html5页面
在这里我们使用基本的header，nav和footer标签书写了一个响应式的html5页面，如果你使用老版本的浏览器，例如ie6,7等等。需要引入相关的js来帮助识别新的元素，当然，你也可以使用下面js代码来简单生成。
/* * 创建html5标签 */
document.createelement("article");
document.createelement("section");
具体代码实现，请下载后阅读。这里我们使用了一个前端框架 - profound grid ，如果你兴趣可以阅读这篇文章 -响应式网格系统 – profound grid。
总结
相 对于其它的html5特性来说，header，nav和footer显得不是那么的酷，当时作为一个前端开发人员来说，如何能够正确的组织页面结构对于一 个逻辑性很强，页面也很复杂的项目来说，意义依旧是非常重大的。希望今天的这篇文章能够帮助大家简单直观的了解这些基本的html5标签，如果你有任何的 问题或者建议，请在下面给我们留言或者访问极客标签社区提问。
来源：html5/css3系列教程：html5基本标签使用header，nav和footer
声明: 本文采用 by-nc-sa 协议进行授权 | web前端开发
转载请注明转自《【投稿】html5基本标签使用header，nav和footer》