<nav>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

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

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;
}
内容分类 流式内容, 区块内容, 可视的内容。
允许的内容 流式内容.
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 所有允许流式内容的元素
允许的 ARIA roles None
DOM 接口 HTMLElement

属性

这个元素只包含全局属性.

使用说明

  • 并不是所有的链接都必须使用<nav>元素，它只用来将一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到，没必要加入<nav>的链接列表。
  • 一个网页也可能含有多个<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。
  • 对于屏幕阅读障碍的人，可以使用这个元素来确定是否忽略初始内容。

示例

xml
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

规范

Specification
HTML
# the-nav-element

浏览器兼容性

更多