HTML5中的新元素标签用来将具有导航 性质的链接划分在一起,使代码结构在语义化 方面更加准确,同时对于屏幕阅读器等设备的支持也更好。 一直以来,我们习惯于使用形如或
这样的代码来写页面的导航;在HTML5中,我们可以直接将导航链接列表放到标签中:<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> Salin selepas log masuk
根据W3C的定义规范:
nav元素是一个可以用来作为页面导航 的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用
一个页面中可以拥有多个元素,作为页面整体或不同部分的导航;下面是W3C给出的一个代码示例:
<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> Salin selepas log masuk
在这个示例中,我们可以看到不仅可以用来作为页面全局导航,也可以放在标签内,作为单篇文章内容的相关导航链接到当前页面的其他位置。
Atas ialah kandungan terperinci html nav标签的作用与使用的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn