Html5 標籤用法



nav  字面上理解爲“導航”,在html5中用於包裹一個導航鏈接組,用於顯式的說明"這是一個導航組”,在同一個頁面中可以同時存在多個nav。

  1. 不是所有的鏈接組都需要使用nav包裹,這主要看鏈接組是不是用於導航(可理解爲是不是再頁面中充當導航這一角色),鏈接可以是一些操作,如刪除,編輯;可以是一些提示性元素,如鏈接到其他網站的解釋。
  2. 導航,顧名思義,就是引導的路線,那麼具有引導功能的都可以認爲是導航,如網站的欄目,側邊欄的相關內容,翻頁操作,一個本書的章節導航,一章書的分段導航。
  3. 導航可以頁與頁之間導航,也可以是頁內的段與段之間導航。
  4. nav是一個明確定義功能的元素,所以從文檔的意義比功能的意義更大。【html5zhan

情景一:
頁面導航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<title>html5zhan nav元素情景一</title>
 
    <header>
        <h1>html5zhan nav元素情景一<h1>
        <nav>
            <ul>
                <li>鏈接1</li>
                <li>鏈接2</li>
                <li>鏈接3</li>
            </ul>
        </nav>
    </h1></header>
    <article>
     
    </article>
    <footer>
    </footer>

情景二:

段內導航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<title>html5zhan nav元素情景二</title>
 
    <header>
         
    </header>
    <article>
        <hgroup>
            <h2>文章的標題<h2>
            <nav>
                <ul>
                    <li><a href="#p1">段一</a></li>
                    <li><a href="#p2">段二</a></li>
                    <li><a href="#p3">段三</a></li>
                </ul>
            </nav>
        </h2></hgroup>
        <p id="p1">段一</p>
        <p id="p2">段二</p>
        <p id="p3">段三</p>
    </article>
    <footer>
    </footer>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章