nav
HTML 'nav' 标签表示页面的一部分, 用于提供导航链接。这些链接可以是页面内部的或者外部的。
导航部分的常见例子包括菜单、TOC 和索引。
例子
<!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, 可以将它改为边栏、导航栏或下拉菜单。
<!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
元素不是必须包含列表,它也可以包含其他类型的内容。在这个导航块中,链接是以散文形式提供的:
<!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>