web前端分享HTML5中的nav标签学习笔记

2019-08-19 10:51:34

web 前端分享 HTML5 中的 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定义一个小型的页面内导航。但并不是页面上的所有链接团体都需要放在nav标签内，它主要是由页面的主要导航块组成。例如，我们通常在网站的页脚里放一组链接，包括服务条款、网站介绍、版权声明等，这时，我们通常使用footer，而不是nav。一个页面可可以包含多个 nav标签，作为页面整体或者不同部分的导航。在下面的例子中，有两个nav标签，一个是网站的主体导航，另外一个是当前页面本身的辅助链接导航。

<h1> 雨打浮萍 </h1>  

<nav>  

   <ul>  

    <li><a href="/"> 首页 </a></li>  

   <li><a href="#">html+css</a></li>  


   </ul>  

</nav>  

<article>  

   <header>  

      <h1>html5 语义化标签之结构标签 </h1>  

     <p><span> 发表于 </span>2011-12-22</p>  

  </header>  

  <nav>  

     <ul>  

     <li><a href="#"> 子导航 </a></li>  

        <li><a href="#"> 子导航 </a></li>  

        ...more...   

     </ul>  

   </nav>  

   <div>  

      <section id="public">  
      <h1>section 里面仍然可以再用 h1 标签 </h1>  
    <p>...more...</p>  

</section>  

    <section id="destroy">  

    <h1>section 里面仍然可以再用 h1 标签 </h1>  

         <p>...more...</p>  

      </section>  

     ...more... </div>  

   <footer>  

     <p><a href="#"> 关于我们 </a> |   

        <a href="#"> 友情链接 </a> |   

        <a href="#"> 杂七杂八 </a></p>  

 </footer>  

</article>  

<footer>  

  <p><small>© copyright 2011 </small></p>  

</footer>

nav标签本身并不要求包含一个列表，它还可以包含其它内容形式。

<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>