當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


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。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。