Web学习网站

Appearance

<nav> 标签 ​

<nav> 标签用于定义页面的导航链接部分。它表示页面中用于导航的一组链接。

概述 ​

<nav> 标签是 HTML5 中引入的语义化标签，用于定义页面的导航区域。它通常包含一组链接，用于在网站的不同页面或同一页面的不同部分之间进行导航。

语法 ​

html
<nav>
  <!-- 导航链接 -->
</nav>

基本用法 ​

主导航 ​

html
<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

面包屑导航 ​

html
<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/category">分类</a></li>
    <li>当前页面</li>
  </ol>
</nav>

实际示例 ​

水平导航菜单 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>nav 标签示例</title>
  <style>
    nav {
      background-color: #333;
      padding: 0;
    }
    
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }
    
    nav li {
      margin: 0;
    }
    
    nav a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 1rem 1.5rem;
      transition: background-color 0.3s;
    }
    
    nav a:hover {
      background-color: #555;
    }
    
    nav a.active {
      background-color: #007bff;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home" class="active">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#portfolio">作品</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
  
  <main>
    <h1>页面内容</h1>
    <p>主要内容...</p>
  </main>
</body>
</html>

垂直侧边栏导航 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>侧边栏导航</title>
  <style>
    .sidebar {
      width: 250px;
      background-color: #f8f9fa;
      height: 100vh;
      position: fixed;
      overflow-y: auto;
    }
    
    .sidebar nav {
      padding: 1rem 0;
    }
    
    .sidebar nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .sidebar nav li {
      border-bottom: 1px solid #dee2e6;
    }
    
    .sidebar nav a {
      display: block;
      padding: 0.75rem 1.5rem;
      color: #333;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .sidebar nav a:hover {
      background-color: #e9ecef;
      color: #007bff;
      border-left: 3px solid #007bff;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="#dashboard">仪表板</a></li>
        <li><a href="#profile">个人资料</a></li>
        <li><a href="#settings">设置</a></li>
        <li><a href="#messages">消息</a></li>
        <li><a href="#help">帮助</a></li>
      </ul>
    </nav>
  </div>
  
  <main style="margin-left: 250px; padding: 2rem;">
    <h1>主要内容区域</h1>
    <p>页面内容...</p>
  </main>
</body>
</html>

无障碍访问 ​

使用 aria-label ​

html
<nav aria-label="主导航">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>

<nav aria-label="辅助导航">
  <ul>
    <li><a href="#sitemap">网站地图</a></li>
    <li><a href="#privacy">隐私政策</a></li>
  </ul>
</nav>

跳过链接 ​

html
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 6px;
}
</style>

响应式导航 ​

移动端汉堡菜单 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航</title>
  <style>
    nav {
      background-color: #333;
      padding: 1rem;
    }
    
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    nav ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
      gap: 1rem;
    }
    
    nav a {
      color: white;
      text-decoration: none;
    }
    
    @media (max-width: 768px) {
      .nav-toggle {
        display: block;
      }
      
      nav ul {
        display: none;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
      }
      
      nav ul.active {
        display: flex;
      }
    }
  </style>
</head>
<body>
  <nav>
    <button class="nav-toggle">☰</button>
    <ul id="nav-menu">
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
  
  <script>
    document.querySelector('.nav-toggle').addEventListener('click', function() {
      document.getElementById('nav-menu').classList.toggle('active');
    });
  </script>
</body>
</html>

最佳实践 ​

  1. 语义化使用：只在真正表示导航区域时使用
  2. 主要导航：文档中的主要导航部分应使用 <nav> 标签
  3. 辅助导航：页脚中的链接组也可以使用 <nav> 标签
  4. 跳转链接：为键盘用户提供跳转到主要内容的链接
  5. ARIA 标签：使用 aria-label 区分多个导航区域

浏览器兼容性 ​

<nav> 标签在所有现代浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

注意事项 ​

  1. <nav> 标签是块级元素
  2. 不是所有链接组都需要使用 <nav> 标签
  3. 一个页面可以有多个 <nav> 元素
  4. <nav> 标签没有默认样式，需要通过 CSS 设置
  5. 考虑无障碍访问，为屏幕阅读器用户提供导航支持

相关标签 ​