html5基本标签 header,footer,nav

02 Mar 2015

想必大家深有体会吧，只重h5的流行开始，html中出现了很多以前没有过的标签，例如 header,footer,nav 记得面试的时候面试官问我，html5最重要的是什么。我个人的理解 (html5语义化最重要)。

在html5 之前我们开发页面相关布局的时候，都是采用css来定义网站的头部，导航和其他部分如下

     .header{width:100%;heihgt:40px;margin 10px auto;....}
     .footer{width:100%;heihgt:40px;margin 10px auto;....}
     .nav{width:100%;heihgt:40px;margin 10px auto;.....}

定义玩了之后，我们的布局结构是这样的

     <div class="header"></div>
     <div class="nav"></div>
     <div class="footer"></div>

这样的代码让我们创建了很多的非样式的CSS定义，是的代码结构复杂并且不直观易懂。

在新一代的html标准html5中，我们定义了一系列的标签，帮助你更语义化的定义页面层次和逻辑，你不需要自己定义相关的DIV，HTML5提供了现成的标签来完成上述的结构化定义，如下：
```
  <header></header>
  <nav></nav>
  <footer></footer>
```
使用以上的标签，你只需要在css样式中定义相关的真正的样式信息即可。

现在我来好好说说基本HTML5标签Header，nav和footer。

在新的标准中是这样解释的

“A group of introductory or navigational aids.”

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

<header>
<h1>HTML5基本标签使用，header，Nav和footer</h1>
<div class="post-meta">
	<p>作者信息:leborn.me</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定义一个小型的页面内导航。

页底标签。使用这个标签你可以定义页面的低端结构，当然，和上面我们介绍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>
      </footer>
```
在上面的例子中，我们定义了一个简单的文章内的页尾信息，可以看到我们添加了来源和相关标签，这在博客类型的网站中经常出现。

注意

在这里我们使用基本的header，nav和footer标签书写了一个响应式的HTML5页面，如果你使用老版本的浏览器，例如IE6,7等等。不过因为XP这老定西的退出，现在不太考虑这几个浏览器，但还是说一下需要引入相关的js来帮助识别新的元素，当然，你也可以使用下面js代码来简单生成。
```
   /*   * 创建HTML5标签  */  
   document.createElement("article");
   document.createElement("header");
   document.createElement("footer")
   document.createElement("section");
```

Edit - Tweet

#html5

Super xing

html5基本标签 header,footer,nav

现在我来好好说说基本HTML5标签Header，nav和footer。

header标签

Nav标签

footer 标签

注意