HTML标签<nav>基础实例教程

一、<nav>标签概述

<nav>标签是HTML5中新增的语义化标签，用于定义页面的导航链接部分。该标签通常包含一组导航链接，帮助用户在网站内或文档内进行导航。

二、基本语法

<nav>导航内容</nav>

三、<nav>标签属性

四、基本使用实例

1. 水平导航菜单

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系我们</a></li>
    <li><a href="#about">关于我们</a></li>
  </ul>
</nav>

2. 垂直导航菜单

<nav>
  <a href="#html">HTML教程</a>
  <a href="#css">CSS教程</a>
  <a href="#js">JavaScript教程</a>
  <a href="#python">Python教程</a>
</nav>

五、网站导航结构实例

1. 企业网站导航

<nav class="main-nav">
  <div class="nav-brand">
    <a href="/">公司Logo</a>
  </div>
  <ul class="nav-menu">
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/products">产品服务</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

2. 博客网站导航

<nav id="blog-navigation">
  <h3>博客分类</h3>
  <ul>
    <li><a href="/category/tech">技术文章</a></li>
    <li><a href="/category/life">生活随笔</a></li>
    <li><a href="/category/travel">旅行游记</a></li>
    <li><a href="/category/reading">读书笔记</a></li>
  </ul>
</nav>

六、<nav>标签的适用场景

七、复杂导航实例

1. 带下拉菜单的导航

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li>
      <a href="/products">产品</a>
      <ul>
        <li><a href="/products/software">软件产品</a></li>
        <li><a href="/products/hardware">硬件产品</a></li>
      </ul>
    </li>
    <li><a href="/services">服务</a></li>
  </ul>
</nav>

2. 面包屑导航实例

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/products/electronics">电子产品</a></li>
    <li>智能手机</li>
  </ol>
</nav>

八、最佳实践建议

九、可访问性考虑

1. ARIA标签使用

<nav aria-label="主导航菜单">
  <!-- 导航内容 -->
</nav>

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">网站导航</h2>
  <!-- 导航内容 -->
</nav>

2. 键盘导航支持

<nav>
  <ul>
    <li><a href="#home" tabindex="0">首页</a></li>
    <li><a href="#about" tabindex="0">关于</a></li>
    <li><a href="#contact" tabindex="0">联系</a></li>
  </ul>
</nav>

十、常见错误与纠正

十一、浏览器兼容性

<nav>标签在所有现代浏览器中都有很好的支持：

• Chrome 5+
• Firefox 4+
• Safari 5+
• Edge 12+
• Opera 11.5+

通过合理使用<nav>标签，可以提升网站的结构化程度和可访问性，同时有助于SEO优化。