Html5 <nav>标签用法

来源：互联网发布：在淘宝上怎样联系客服编辑：程序博客网时间：2024/06/06 04:13

nav 字面上理解为“导航”，在html5中用于包裹一个导航链接组，用于显式的说明"这是一个导航组”，在同一个页面中可以同时存在多个nav。

不是所有的链接组都需要使用nav包裹，这主要看链接组是不是用于导航（可理解为是不是再页面中充当导航这一角色），链接可以是一些操作，如删除，编辑；可以是一些提示性元素，如链接到其他网站的解释。
导航，顾名思义，就是引导的路线，那么具有引导功能的都可以认为是导航，如网站的栏目，侧边栏的相关内容，翻页操作，一个本书的章节导航，一章书的分段导航。
导航可以页与页之间导航，也可以是页内的段与段之间导航。
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><ahref="#p1">段一</a></li>
                    <li><ahref="#p2">段二</a></li>
                    <li><ahref="#p3">段三</a></li>
                </ul>
            </nav>
        </h2></hgroup>
        <pid="p1">段一</p>
        <pid="p2">段二</p>
        <pid="p3">段三</p>
    </article>
    <footer>
    </footer>


转自http://www.html5zhan.com/html5/nav

0 0