HTML5 定义导航

    ■知识点

    nav表示导航条，用来标识页面导航的链接组。一个页面中可以拥有多个nav，作为页面整体或不同部分的导航。具体应用场景如下。

    主菜单导航。一般网站都设置了不同层级的导航条，其作用是在站内快速切换，如主菜单、置顶导航条、主导航图标等。

    侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到相关文章或商品页面上去。

    页内导航。就是页内锚点链接，其作用是在本页面几个主要的组成部分之间进行跳转。

     翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

  并不是所有的链接组都要被放进nav中，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素最恰当。

    ■实例设计

    【示例1】在HTML5中，只要是导航性质的链接，就可以很方便地将其放入nav元素中。该元素可以在一个文档中多次出现，作为页面或部分区域的导航。

<nav draggable="true">

    <a href="index.html”>首页</a> 

    <a href="book.html">图书</a> 

    <a href="bbs.html">论坛</a> 

</nav>

    上述代码创建了一个可以拖动的导航区域，nav元素中包含了 3个用于导航的超级链接，即“首页”“图书”和“论坛”。该导航可用于全局导航，也可放在某个段落，作为区域导航。

    【示例2】下面的示例页面由多部分组成，每部分都带有链接，但只将最主要的链接放入了nav元素中。

    <hl>技术资料</hl>

    <nav>

    <ul>

    <lixa href="/">主页</a></li>

    <lixa href="/blog">博客</a></li>

    </ul>

    </nav>

    <article>

    <header>

    <hl>HTML5+CSS3</hl>

    <nav>

    <ul>

    <li><a href="#HTML5">HTML5</a></li>

    <lixa href="#CSS3">CSS3</a></li>

    </ul>

    </nav>

    </header>

    <section id="HTML5">

    <hl>HTML5</hl>

    <p>HTML5特性说明</p>

    </section>

    <section id="CSS3">

    <hl>CSS3</hl>

    <p>CSS3特性说明。</p>

    </section>

    <footer>

    <p> <a href="？edit">编辑</a> | <a href="?delete">删除</a> | <a href="?add"> 添加</a> </p>

    </footer>

    </article>

    <footer>

    <p><small> 版权信息</small></p>

    </footer>

    在这个示例中，第一个nav元素用于页面导航，将页面跳转到其他页面上去，如跳转到网站主页或博客页面；第二个nav元素放置在article元素中，表示在文章中内进行导航。除此之外，nav元素也可以用于其他所有你觉得是重要的、基本的导航链接组中。