html nav标签的作用与使用的详解-html教程-PHP中文网

html nav标签的作用与使用的详解

黄舟

发布： 2017-06-29 14:19:45

原创

9063人浏览过

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>元素，作为页面整体或不同部分的导航；下面是W3C给出的一个代码示例：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<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>标签内，作为单篇文章内容的相关导航链接到当前页面的其他位置。

立即学习“前端免费学习笔记（深入）”；

以上就是html nav标签的作用与使用的详解的详细内容，更多请关注php中文网其它相关文章！