<nav>: The Navigation Section element

<nav> HTML 元素表示页面的一部分，其目的是提供当前文档内或其他文档的导航链接。导航部分的常见示例是菜单、目录和索引。

¥The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

Try it

属性

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

使用说明

¥Usage notes

  • 没有必要将所有链接都包含在 <nav> 元素中。<nav> 仅用于主要的导航链接块；通常，<footer> 元素通常具有不需要位于 <nav> 元素中的链接列表。
  • 一份文档可能有多个 <nav> 元素，例如，一个用于站点导航，一个用于页面内导航。在这种情况下可以使用 aria-labelledby 来提高可访问性，请参阅 example。
  • 用户代理（例如针对残疾用户的屏幕阅读器）可以使用此元素来确定是否省略仅导航内容的初始呈现。

示例

¥Examples

在此示例中，<nav> 块用于包含链接的无序列表 (<ul>)。使用适当的 CSS，可以将其呈现为侧边栏、导航栏或下拉菜单。

¥In this example, a <nav> block is used to contain an unordered list (<ul>) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.

html
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav 元素的语义是提供链接。但是 nav 元素不必包含列表，它也可以包含其他类型的内容。在此导航块中，以散文形式提供链接：

¥The semantics of the nav element is that of providing links. However a nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

html
<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>

结果

¥Result

技术总结

¥Technical summary

内容类别 流量内容， 分段内容，可触及的内容。
允许的内容 流量内容.
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 流动内容 的元素。
隐式 ARIA 角色 navigation
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-nav-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also