導航連結區塊 <nav>

<nav> 是進入 HTML5 之後才加入的導航連結區塊元素，裡面會放入網頁的主要的導覽連結 ( navigational links )，這篇文章將會介紹 <nav> 導航連結區塊元素的用法。

認識 <nav>

<nav> 是 HTML 裡作為定義導航連結的元素，作用在標示主要的導覽連結，區塊裡面通常會放入清單、超連結...等。

• <nav> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <nav> 的顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，在網頁中會放入一個 <nav>，當中包含三個 <a> 超連結。

<nav>
  <a href="a.html">Google</a>
  <a href="b.html">Yahoo</a>
  <a href="c.html">Facebook</a>
</nav>

<nav> 裡面也常會出現 <ul> 和 <li> 搭配 <a> 的結構。

<nav>
  <ul>
    <li><a href="a.html">Google</a></li>
    <li><a href="b.html">Yahoo</a></li>
    <li><a href="c.html">Facebook</a></li>
  </ul>
</nav>

<nav> 支援屬性

<nav> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <nav> 加入 style 屬性改變背景顏色。

<nav style="background:#ccf;">
  <ul>
    <li><a href="a.html">Google</a></li>
    <li><a href="b.html">Yahoo</a></li>
    <li><a href="c.html">Facebook</a></li>
  </ul>
</nav>

<nav> 預設樣式

下方列出 <nav> 的預設樣式：

詳細樣式教學可參考：CSS 教學

nav {
  display: block;
}

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～