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>