nav标签全称navigation,顾名思义,是导航的意思。根据HTML5的相关标准定义如下: "A section of a page that links to other pages or to parts within the page:
a section with navigation links." 中文翻译大概意思是”页面中的一个用来链接到其它页面或者当前页面的区域:一个含有导航链接的区域”。 这里非常清楚的定义了nav标签的功能,这里和header类似并没有指定必须是主导航,也可以是页面其它部分的子导航。如下:
XML/HTML Code
复制内容到剪贴板
<h3>gbin1.com文章列表</h3>
<
nav
>
<
ul
>
<
li
>
<
a
href
=
"#html5"
>
HTML5文章介绍
</
a
>
</
li
>
<
li
>
<
a
href
=
"#css3"
>
CSS3文章介绍
</
a
>
</
li
>
<
li
>
<
a
href
=
"#jquery"
>
jQuery文章介绍
</
a
>
</
li
>
<
ul
>
</
nav
>
在上面这个例子中,我们看到这里只是一个区域的文章导航,同样也可以使用nav定义一个小型的页面内导航。 但并不是页面上的所有链接团体都需要放在nav标签内,它主要是由页面的主要导航块组成。例如,我们通常在网站的页脚里放一组链接,包括服务条款、网站介绍、版权声明等,这时,我们通常使用footer,而不是nav。
一个页面可可以包含多个nav标签,作为页面整体或者不同部分的导航。在下面的例子中,有两个nav标签,一个是网站的主体导航,另外一个是当前页面本身的辅助链接导航。
XML/HTML Code
复制内容到剪贴板
<h1>雨打浮萍</h1>
<
nav
>
<
ul
>
<
li
>
<
a
href
=
"/"
>
首页
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
html css
</
a
>
</
li
>
...more...
</
ul
>
</
nav
>
<
article
>
<
header
>
<
h1
>
html5语义化标签之结构标签
</
h1
>
<
p
>
<
span
>
发表于
</
span
>
2011-12-22
</
p
>
</
header
>
<
nav
>
<
ul
>
<
li
>
<
a
href
=
"#"
>
子导航
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
子导航
</
a
>
</
li
>
...more...
</
ul
>
</
nav
>
<
div
>
<
section
id
=
"public"
>
<
h1
>
section里面仍然可以再用h1标签
</
h1
>
<
p
>
...more...
</
p
>
</
section
>
<
section
id
=
"destroy"
>
<
h1
>
section里面仍然可以再用h1标签
</
h1
>
<
p
>
...more...
</
p
>
</
section
>
...more...
</
div
>
<
footer
>
<
p
>
<
a
href
=
"#"
>
关于我们
</
a
>
|
<
a
href
=
"#"
>
友情链接
</
a
>
|
<
a
href
=
"#"
>
杂七杂八
</
a
>
</
p
>
</
footer
>
</
article
>
<
footer
>
<
p
>
<
small
>
© copyright 2011
</
small
>
</
p
>
</
footer
>
nav标签本身并不要求包含一个列表,它还可以包含其它内容形式。
XML/HTML Code
复制内容到剪贴板
<nav>
<
h1
>
Navigation
</
h1
>
<
p
>
You are on my home page. To the north lies
<
a
href
=
"/blog"
>
my blog
</
a
>
, from whence the sounds of battle can be heard. To the east you can see a large mountain,
upon which many
<
a
href
=
"/school"
>
school papers
</
a
>
are littered. Far up thus mountain you can spy a little figure who appears to
be me, desperately scribbling a
<
a
href
=
"/school/thesis"
>
thesis
</
a
>
.
</
p
>
<
p
>
To the west are several exits. One fun-looking exit is labeled
<
a
href
=
"http://games.example.com/"
>
"games"
</
a
>
. Another more boring-looking exit is labeled
<
a
href
=
"http://isp.example.net/"
>
ISP™
</
a
>
.
</
p
>
<
p
>
To the south lies a dark and dank
<
a
href
=
"/about"
>
contacts page
</
a
>
. Cobwebs cover its disused entrance, and at one point you see a rat run quickly
out of the page.
</
p
>
</
nav
>