nav#
HTML 'nav' 标签表示页面的一部分， 用于提供导航链接。这些链接可以是页面内部的或者外部的。
导航部分的常见例子包括菜单、TOC 和索引。
例子#
HTML
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>nav exmaple</title> <style type="text/css"> html {background-color: white; } nav { border-bottom: 1px solid black; } .crumbs ol { list-style-type: none; padding-left: 0; } .crumb { display: inline-block; } .crumb a::after { display: inline-block; color: #000; content: ">"; font-size: 80%; font-weight: bold; padding: 0 3px; } </style></head><body><nav class="crumbs"> <ol> <li class="crumb"><a href="#">Bikes</a></li> <li class="crumb"><a href="#">BMX</a></li> <li class="crumb">Jump Bike 3000</li> </ol></nav> <h1>Jump Bike 3000</h1><p> This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p></body></html>用法说明#
-
不需要将所有链接都包含在
<nav>元素中。<nav>仅适用于主要导航链接块； 通常，<footer>元素通常包含一个链接列表，这些链接不需要出现在<footer>元素中。 -
一个文档可能包含多个
<nav>元素，例如，一个用于网站导航，一个用于页内导航。 -
用户代理，例如针对残障用户的屏幕阅读器，可以使用这个元素来决定是否跳过导航内容的初始渲染。
例子#
例1#
这个例子中， <nav> 用于包含一个无序的链接列表 (<ul>)。配合适当的 CSS, 可以将它改为边栏、导航栏或下拉菜单。
HTML
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>nav exmaple</title> <style type="text/css"> html {background-color: white; } </style></head><body><nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul></nav></body></html>例2#
nav 元素的语义是提供链接。然而，nav 元素不是必须包含列表，它也可以包含其他类型的内容。在这个导航块中，链接是以散文形式提供的：
HTML
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>nav exmaple</title> <style type="text/css"> html {background-color: white; } </style></head><body><nav> <h2>Navigation</h2> <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 this 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="https://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="https://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></body></html>