大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分
大家可能都知道，有很多HTML5中不存在的标签，比如header、nav、footer。 在此之前，我们在开发相关的页面布局时，经常使用CSS来定义相关的belly、navigation和页面的底部部分，如下所示：
#nav{ padding: 10px ... }
#header{ padding: 10px ... }
#footer{ padding: 10px ... }
定义好之后，我们使用div标签来组织页面结构，如下：
这种代码允许我们创建大量无样式的CSS定义，这使得代码结构复杂并且不直观和易于理解。
在新的HTML5标准中，我们定义了一系列标签来帮助您更语义地定义页面层次结构和逻辑。 您不需要自己定义相关的DIV。 HTML5提供了现成的标签来完成上述结构定义。 如下：
使用以上标签，只需要在css文件中定义相关的真实样式信息即可。
明天这篇文章，我们将介绍相关的基本HTML5标签Header、nav和footer。
标头标签
在新标准中，header标签定义如下：
“一组介绍性或导航性的辅助工具。”
基本意思是“一组介绍性导航相关的辅助内容”。 从字面上理解，header标签不仅定义了页眉的内容，还可以定义页眉下方其他内容的引入。 这与我们传统的页眉定义并不完全一致。 例如：
HTML5基本标签使用，header，Nav和footer
在前面的结构中，我们可以看到使用 header 定义了文章的标题和内容。 这里使用的标题标签不是页面的标题，而是文章的标题。
因此，在HTML5中，标头的使用变得更加灵活，你可以根据自己的需要来定义和组织文档结构。
导航标签
Nav标签的全称是导航。 顾名思义，就是导航的意思。 根据HTML5的相关标准标签css3，定义如下：
“链接到其他页面或页面内部分的页面部分：带有导航链接的部分。”
中文翻译大致意思是“页面上用于链接到其他页面或当前页面的区域：富含导航链接的区域”。
nav标签的功能在这里定义得非常清楚。 与header类似，它并没有规定它一定是主导航，也可以是页面其他部分的子导航。 如下：
gbin1.com文章列表
在前面的例子中，我们听说这只是文章导航的一个区域。 您还可以使用 nav 定义大型页内导航。
页脚标签
最后一个是footer标签，即底部标签。 您可以使用此标签来定义页面的高端结构。 当然，就像我们前面介绍的header标签或者nav标签一样，它不仅仅用在整个页面的页脚处。 相关HTML5标准定义如下：
“页脚元素表示其最近祖先分段内容或分段根元素的页脚。页脚通常包含有关其部分的信息，例如谁编写的、相关文档的链接、版权数据等。”
中文意思是：“footer元素代表页面内容或区域内容的底部显示。典型的例子包括作者信息、文档链接或版权信息等”。
当然，我们这里看到的不限于整个页面的内容，还可以是一篇文章的页脚内容，例如出处或者作者信息等，如下：
在前面的反例中，我们在一篇简单的文章中定义了页脚信息。 您可以看到我们添加了来源和相关标签，这些标签经常出现在博客类型的网站中。
一个完整的HTML5页面
这里我们使用基本的 header、nav 和 footer 标签来编写一个响应式的 HTML5 页面，如果你使用旧版本的浏览器，比如 IE6、7 等，需要引入相关的 js 来帮助识别新元素。 当然，你也可以使用下面的js代码来简单生成。
/* * 创建HTML5标签 */
document.createElement("article");
document.createElement("section");
具体代码实现请下载阅读。 这里我们使用一个后端框架——Profound Grid。 如果有兴趣，可以阅读这篇文章——响应式网格系统——Profound Grid。
总结
与其他 HTML5 功能相比标签css3，页眉、导航和页脚并不是那么酷。 作为当时的后端开发人员，对于逻辑性很强、复杂的页面，如何正确组织页面结构呢？ 对于该项目来说，意义还是非常重大的。 希望明天的这篇文章能够帮助您简单直观地理解这个基本的 HTML5 标签。 如果您有任何疑问或建议，请在下方给我们留言或访问极客标签社区提问。 如果您对其他HTML5技术感兴趣，还可以阅读我们的HTML5专题教程。
来源：HTML5/CSS3教程系列：使用header、nav和footer的HTML5基本标签
