Rumah > Artikel > hujung hadapan web > html nav标签的作用与使用的详解
html nav标签的作用与使用的详解
- 黄舟asal
- 2017-06-29 14:19:458603semak imbas
HTML5中的新元素标签c787b9a589a3ece771e842a6176cf8e9用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。
一直以来，我们习惯于使用形如8b1ac108cbaa4395859772f3c8fb2044或0c5950be5e5538ac3b6570830835ae1b这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到c787b9a589a3ece771e842a6176cf8e9标签中：
<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元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进c787b9a589a3ece771e842a6176cf8e9元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用c37f8231a37e88427e62669260f0074d元素是最恰当的，而不需要c787b9a589a3ece771e842a6176cf8e9元素。
一个页面中可以拥有多个c787b9a589a3ece771e842a6176cf8e9元素，作为页面整体或不同部分的导航；下面是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>
在这个示例中，我们可以看到c787b9a589a3ece771e842a6176cf8e9不仅可以用来作为页面全局导航，也可以放在23c3de37f2f9ebcb477c4a90aac6fffd标签内，作为单篇文章内容的相关导航链接到当前页面的其他位置。
Atas ialah kandungan terperinci html nav标签的作用与使用的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!