HTML5 定義導(dǎo)航

    ■知識點

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

    主菜單導(dǎo)航。一般網(wǎng)站都設(shè)置了不同層級的導(dǎo)航條，其作用是在站內(nèi)快速切換，如主菜單、置頂導(dǎo)航條、主導(dǎo)航圖標(biāo)等。

    側(cè)邊欄導(dǎo)航?，F(xiàn)在主流博客網(wǎng)站及商品網(wǎng)站上都有側(cè)邊欄導(dǎo)航，其作用是將頁面從當(dāng)前文章或當(dāng)前商品跳轉(zhuǎn)到相關(guān)文章或商品頁面上去。

    頁內(nèi)導(dǎo)航。就是頁內(nèi)錨點鏈接，其作用是在本頁面幾個主要的組成部分之間進(jìn)行跳轉(zhuǎn)。

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

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

    ■實例設(shè)計

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

<nav draggable="true">

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

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

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

</nav>

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

    【示例2】下面的示例頁面由多部分組成，每部分都帶有鏈接，但只將最主要的鏈接放入了nav元素中。

    <hl>技術(shù)資料</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> 版權(quán)信息</small></p>

    </footer>

    在這個示例中，第一個nav元素用于頁面導(dǎo)航，將頁面跳轉(zhuǎn)到其他頁面上去，如跳轉(zhuǎn)到網(wǎng)站主頁或博客頁面；第二個nav元素放置在article元素中，表示在文章中內(nèi)進(jìn)行導(dǎo)航。除此之外，nav元素也可以用于其他所有你覺得是重要的、基本的導(dǎo)航鏈接組中。