当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容

html5 nav标签有什么用?

减小字体 增大字体 作者：佚名  来源：网上搜集  发布时间：2019-1-4 8:46:37

-->

HTML5中的新元素标签<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。一直以来，我们习惯于使用形如<div id=”nav”>或<ul id=”nav”>这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到<nav>标签中：

<nav><ul><li><a href="index.html">Home</a></li><li><a href="/about/">About</a></li><li><a href="/blog/">Blog</a></li></ul></nav>

根据W3C的定义规范：
nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用<footer>元素是最恰当的，而不需要<nav>元素。

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

一个页面中可以拥有多个<nav>元素，作为页面整体或不同部分的导航；下面是W3C给出的一个代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
?<h1>The Wiki Center Of Exampland</h1>
?<nav>
?<ul>
?<li><a href="/">Home</a></li>
?<li><a href="/events">Current Events</a></li>
?...more...
?</ul>
?</nav>
?<article>
?<header>
?<h1>Demos in Exampland</h1>
?<p>Written by A. N. Other.</p>
?</header>
?<nav>
?<ul>
?<li><a href="#public">Public demonstrations</a></li>
?<li><a href="#destroy">Demolitions</a></li>
?...more...
?</ul>
?</nav>
?<div>
?<section id="public">
?<h1>Public demonstrations</h1>
?<p>...more...</p>
?</section>
?<section id="destroy">
?<h1>Demolitions</h1>
?<p>...more...</p>
?</section>
?...more...
?</div>
?<footer>
?<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
?</footer>
?</article>
?<footer>
?<p><small>? copyright 1998 Exampland Emperor</small></p>
?</footer>
?</body>

在这个示例中，我们可以看到<nav>不仅可以用来作为页面全局导航，也可以放在<article>标签内，作为单篇文章内容的相关导航链接到当前页面的其他位置。


html5 nav标签有什么用?



[] [返回上一页] [打 印]

文章评论评论内容只代表网友观点，与本站立场无关！