HTML <nav>用法及代码示例

<nav>标记用于声明HTML文档中的导航部分。网站通常具有专用于导航链接的部分，这使用户可以导航站点。这些链接可以放在导航标签中。
换句话说，nav元素表示页面的一部分，其目的是提供当前文档或其他文档中的导航链接。导航元素中的链接可能指向其他网页或同一网页的不同部分。它是语义元素。导航元素的常见示例是菜单，表，内容和索引。

用法:

<nav>
Links...
</nav>

例：

<!DOCTYPE html> 
<html> 
   <head> 
      <title>nav tag</title> 
      <style> 
          .gfg { 
              font-size:40px; 
              color:#090; 
              font-weight:bold; 
              text-align:center; 
          } 
          .nav_tag { 
              text-align:center; 
              margin:30px 0; 
          } 
      </style> 
   </head> 
   <body> 
      <div class = "gfg">GeeksforGeeks</div> 
      <div class = "nav_tag">Nav Tag Example</div> 
      <nav> 
         <a href = "#">Home</a> | 
         <a href = "#">Interview</a> | 
         <a href = "#">Languages</a> | 
         <a href = "#">Data Structure</a> | 
         <a href = "#">Algorithm</a>  
      </nav> 
   </body> 
</html>

输出：
nav tag examples

例：

<!DOCTYPE html> 
<html> 
   <head> 
      <title>nav tag</title> 
      <style> 
          nav { 
              border:1px; 
              background-color:#090; 
              color:white; 
              padding:6px; 
          } 
          a { 
              text-decoration:none; 
              color:white; 
              font-size:20px; 
          } 
          .gfg { 
              font-size:40px; 
              color:#090; 
              font-weight:bold; 
              text-align:center; 
          } 
          .nav_tag { 
              text-align:center; 
              margin:30px 0; 
          } 
      </style> 
   </head> 
   <body> 
      <div class = "gfg">GeeksforGeeks</div> 
      <div class = "nav_tag">Nav Tag Example</div> 
      <nav> 
         <a href =  
"https://www.geeksforgeeks.org/"> 
                          Home</a> | 
         <a href =  
"https://www.geeksforgeeks.org/company-interview-corner/"> 
                     Interview</a> | 
         <a href =  
"https://www.geeksforgeeks.org/gate-cs-notes-gq/"> 
                          Gate</a> | 
         <a href =  
"https://www.geeksforgeeks.org/data-structures/"> 
                Data Structure</a> | 
         <a href =  
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/"> 
                      Algorithm</a>  
      </nav> 
   </body> 
</html>

输出：
nav tag examples

导航标签的使用：导航标签保留用于主要导航区域，例如页面或部分顶部的主菜单。一个文档可以具有多个导航元素，例如，站点导航和一个用于页面内导航的元素。 nav标签中的链接可以是ul列表中的代码，也可以简单地编码为单独的链接，而无需ul元素。该元素使创建导航菜单，创建文本链接的整齐水平菜单变得更加容易，并有助于屏幕阅读软件正确识别文档中的主要导航区域。

浏览器支持：支持nav标签的浏览器是：

Google chrome 6.0及更高版本
Internet Explorer 9.0及以上
Mozilla 4.0及更高版本
Safari 5.0及更高版本
Opera 11.1及更高版本

相关用法

注：本文由纯净天空筛选整理自Sathwika123大神的英文原创作品 HTML | <nav> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。