（基礎）用於頁內導航的ID

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第2章。

用於頁內導航的ID

ID也可以用在頁內導航連結中。下面就是一個連結，其目標是同一頁的另一個位置。

<a href="#bio">Biography</a>

看到href屬性值開頭的#了嗎？它表示這個連結的目標在當前頁面中，因而不會觸發瀏覽器載入頁面（如果沒有#，瀏覽器就會嘗試載入bio目錄下的預設頁面了）。

使用與CSS選擇符裡相同的 #ID名語法，可以把連結導航到同一頁面中的目標ID。在這個頁面的下方，應該有對應的目標元素。

<h3 id="bio">Biography</h3>
<p>I was born when I was very young…</p>

同樣要注意，作為目標的ID值前面是沒有#的，就是一個普通的ID值。

使用者單擊前面的連結時，頁面會向下滾動到ID值為bio的h3元素的位置。如果連結的href屬性裡只有一個#，那麼點選該連結會返回頁面頂部。

<a href="#">Back to Top</a>

換句話說，要寫一個“返回頂部”連結，根本不需要ID為#的目標元素。

另外，如果你暫時不知道某個href應該放什麼URL，也可以用#作為佔位符，但不能把該屬性留空。因為href屬性值為空的連結的行為跟正常連結不一樣。這樣，團隊中的其他人將來可以用中間層（比如PHP）變數替換#，以便動態接收來自資料庫的URL。