HTML <nav> 元素

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

一个导航链接实例：

<nav>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#">JavaScript</a> |
  <a href="#">jQuery</a>
</nav>

尝试一下 »

截图

一个导航链接实例

特性

内容类别 流式内容，章节内容，可触知内容。
允许的内容 流式内容。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。
允许的 ARIA 角色 无
DOM 接口 HTMLElement

属性

该元素只包含全局属性。

事件属性

<nav> 元素支持所有 HTML事件属性。

使用注意

  • 不是文档的所有链接都必须在 <nav> 元素中，仅用于导航链接的主要区块; 通常 <footer> 元素具有不需要放在 <nav> 元素中的链接列表。
  • 文档可能有几个 <nav> 元素，例如一个用于站点导航，一个用于页内导航。
  • 用户代理（例如针对有阅读障碍用户的屏幕阅读器）可以使用该元素来确定是否忽略渲染其内容。
  • 在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

更多实例

在这个例子中，一个 <nav> 块被用来包含无序列表（<ul>）的链接。使用适当的 CSS，可以将其显示为侧栏，导航栏或下拉菜单。

<nav class="menu">
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

尝试一下 »

截图

在这个例子中，一个 <nav> 块被用来包含无序列表（<ul>）的链接。使用适当的 CSS，可以将其显示为侧栏，导航栏或下拉菜单。

规范

规范 状态 备注
HTML Living Standard
<nav> 的定义		 现行的标准 自最新 W3C 快照以来没有变化。
HTML5
<nav> 的定义		 推荐 初始定义

HTML 4.01 与 HTML5 中的差异

<nav> 是 HTML5 的新元素。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 5 支持 4 9 11.1 4.1

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 4 9 11 4.2

相关链接