HTML nav 语法
在 HTML 中,nav 标签用于定义网页中的导航链接,主要用于 3 个地方:顶部导航、侧栏导航、分页导航。
需要注意的是,当 nav 标签用于顶部导航时,nav 标签可以放到 header 标签内部,也可以放到 header 标签外部。具体放在哪里,取决于实际开发需求。
语法:
<nav>
……
</nav>说明:
nav 标签内一般包含一个无序列表,或者多个 a 标签。一个文档中可以有多个 nav 标签。例如,一个用于主导航,另一个用于页脚的辅助导航。
HTML nav 摘要
| 属于 | HTML 语义化 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML nav 示例
一般情况下,主导航主要是使用无序列表来实现。在 HTML5 之前,都是使用一个 div 来包含着无序列表,而现在我们可以使用 nav 元素来代替 div 元素,以使得结构更具有语义。
以前的导航结构如下:
<div id="top-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>现在的导航结构如下:
<nav id="top-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>此外别忘了,nav 元素并不只是可以用于顶部导航,还可以用于侧栏导航以及分页导航,如下图所示。



HTML5 语义化标签
HTML5 新增了非常多结构性的语义化标签,以提高代码的可读性和利于 SEO,主要包括:
