HTML5 定義導航

    ■知識點

    nav表示導航條，用來標識頁面導航的鏈接組。一個頁面中可以擁有多個nav，作為頁面整體或不同部分的導航。具體應用場景如下。

    主菜單導航。一般網站都設置了不同層級的導航條，其作用是在站內快速切換，如主菜單、置頂導航條、主導航圖標等。

    側邊欄導航。現在主流博客網站及商品網站上都有側邊欄導航，其作用是將頁面從當前文章或當前商品跳轉到相關文章或商品頁面上去。

    頁內導航。就是頁內錨點鏈接，其作用是在本頁面幾個主要的組成部分之間進行跳轉。

     翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。

  并不是所有的鏈接組都要被放進nav中，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，包括服務條款、首頁、版權聲明等，這時使用footer元素最恰當。

    ■實例設計

    【示例1】在HTML5中，只要是導航性質的鏈接，就可以很方便地將其放入nav元素中。該元素可以在一個文檔中多次出現，作為頁面或部分區(qū)域的導航。

<nav draggable="true">

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

    <a href="book.html">圖書</a> 

    <a href="bbs.html">論壇</a> 

</nav>

    上述代碼創(chuàng)建了一個可以拖動的導航區(qū)域，nav元素中包含了 3個用于導航的超級鏈接，即“首頁”“圖書”和“論壇”。該導航可用于全局導航，也可放在某個段落，作為區(qū)域導航。

    【示例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元素也可以用于其他所有你覺得是重要的、基本的導航鏈接組中。