導航連結區塊 <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;
}
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~