標記語言：錨點

點擊這裡返回腳本之家　HTML教程　欄目．
上文：標記語言——短語元素
原文出處 Chapter 7 錨點
HTML中的鏈接,正確的說法應該稱作"錨點",它不僅讓我們能指向文檔,還能指向頁面裡的特定段落,更能當作"精准鏈接"的便利工具.讓鏈接對 象接近焦點.在這一章裡,我們將看到四種不同的錨點做法,說明每個方法的優點,也會介紹title屬性如何能提升鏈接的易用性,另外也將使用CSS為鏈接 設計樣式. 在需要指定到頁面的特定部分時,標記錨點是最佳的方法
這是在設計網站時經常遇到的情況,你想鏈接到某個頁面的特定部分,可是使用者正在閱讀的可能是在另外的一個頁面,接下來討論的四種方法之中任選一種都能讓你達成目標.
在示例中,假設我們打算鏈接到同一個頁面中的特定標題: 方法A:空洞的名稱

<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
...更多文字...

使用一個內容空白的錨點標簽再配上name屬性,標記特定的鏈接點,或許這是你熟悉的方法,在標題前放一個內容空白的<a>,並且連 向它(使用#符號,後面加上name屬性的值),就能讓我們連到頁面的特定部分了,當頁面包含了很長需要滾動的項目清單時,我們能通過這個方法十分方便的 連到特定的項目.

圖7-1顯示了點擊"About Oranges"鏈接之後的結果,也就是跳到我們標識<a name="oranges"></a>的地方,正好在標題上面.

圖7-1.點擊連上具體錨點鏈接的示例

效果不錯,但是浪費一個內容空白的標簽來標識鏈接位置有點不合語義,方法B能改進這點. 方法B:全部在名稱之內

<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2><a name="oranges">Oranges Are Tasty</a></h2>
...更多文字...

與方法A一樣,我們仍然使用<a>標簽配上name屬性,但這次我們把它包在我想要鏈接的標題外面,這麼做看起來的確比較符合語義,在方法A裡頭,我們的連接對象是...恩,什麼都沒有,但是在方法B裡,我們不僅說明了這段文字是標題標簽的一部分,同時也是這個頁面的連接錨點之一. 小心<a>的全局樣式

如果使用了方法B的話,有個地方必須要注意.如果你為所有的<a>元素指定了全局的CSS樣式的話(顏色,文字大小,文字裝飾等 等),這些樣式就會覆蓋你為<h2>元素指定的樣式.會發生這種情況的原因是,在這個例子裡頭,<a>標簽是位於包圍它 的<h2>標簽之內的子元素.

舉例來說,假如你的CSS內有類似這樣的聲明:

a{
color:green;
font-weight:bold;
text-decoration:underline;
}

方法B配上這段CSS就會讓標題與其他頁面內的<a>一樣變成綠色,粗體,加上下劃線,或許與你期望的<h2>樣式不同.

我們能使用<a>的:link偽類以避免這種現象(同時也能獲得其他好處),在本章稍後的"技巧延伸"中會詳細討論. 更豐富的名稱屬性

使用方法B(以及方法A)的好處之一,就是name屬性可以處理更豐富的錨點名稱,具體來說,就是能在名稱之內使用符號

舉例來說,如果使用方法B的話,你可以這麼做(在此&#233;代表符號"e"):

<p><a href="#resum&#233;">My Resum&#233;</a></p>
...一些文字...
<h2><a name="resum&#233;">Dan's Resum&#233;</a></h2>
...更多文字...

在處理不屬於英文字母的字符時,這個功能十分重要.

但是還有幾個方法值得一提,下面這個方法完全不需要使用<a>設定錨點,讓我們看看方法C.

方法C:丟掉名稱

<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2 id="oranges">Oranges Are Tasty</h2>
...更多文字...

啊哈,id屬性的功能就像name屬性,同樣能為頁面指定錨點,除此之外,方法C還消除了方法A,B使用name屬性是需要的額外<a>標簽,我們減少了源代碼,這向來是好事.
由於id屬性可以加到任何標簽裡,因此我們能輕易地在頁面內任意為需要的元素加上錨點.在這個例子中,我們選擇為標題加上錨點,但我們也能同樣輕 易的為<div>,<form>,<p>,<ul>...還有其他所有標簽加上錨點. 一石二鳥
事實上,在大多數情況下,我們都能為先前存在id屬性添加樣式或者scripting,這是方法C的另一個好處.由於這個緣故,我們不需要為僅僅設定錨點而加上額外的代碼.
舉例來說,讓我們假設你在很長的頁面底部有一個用來留下評論的表單,而你想在頁首加上鏈接,這個表單已經為了指定獨特樣式而設了id="comments".這是我們能直接把id當作錨點進行連接,而不必再加上有name屬性的<a>標簽.
代碼看起大概類似這樣:

<p><a href="#comments">Add a Comment!</a></p>

...很多文字...

<form id="comments" action="/path/to/script">
...表單元素...
</form>

同時,如果你的頁面很長,那麼你在底部加上鏈接到頂部錨點的鏈接,以便用戶"回到頂部".
值得一提的是:雖然看起來十分合適,但最好避免在指定錨點名稱時使用"top",有些浏覽器保留這個名稱做為特殊用途,那麼使用這個名稱可能會造成不一致的結果,最好選擇一個類似,但又不會造成問題的名稱,或許用#gemesis?還是用#utmost?你自己拿主意了.
古老浏覽器與id屬性
只使用id屬性當作錨點時,有個重要的缺點值得一提,那就是某些古老的浏覽器並不支持這個方法.哦喔,在標識你自己的錨點時這的確是個必須考慮的問題,同時這也是向前兼容的不幸示例.讓我們看看最後一個實例,方法D. 方法D:合而為一

<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>
...更多文字...

如果在標記錨點時,你希望達到向前兼容和向後兼容,那麼你大概會喜歡這種方法.不管是古老的或是未來的浏覽器都能正確的辨識具名錨點標簽,但是由於W3C在XHTML1.0建議書中不推薦使用name屬性(http://www.w3.org/TR/xhtml1/#C_8),因此你也用id屬性支持未來的浏覽器.
與方法B相同,我們必須留意對<a>標簽造成影響的全局樣式.

共享名稱
如果你選擇使用方法D的話,為id與name屬性選用相同名稱完全可以被接受(可能也十分便利),但是只在它們位於相同標簽時才能這樣.此外,也 只有幾個特定的標簽允許這麼做,精確來說,包含 了<a>,<applet>,<frame>,<img>,<map>.因此,我們把 id="oranges"從<h2>移到錨點標簽之內.
現在我們已經看過了四種建立錨點的方法,讓我們歸納一下每種方法的優劣. 歸納
雖然我覺得有兩種方法略占優勢(C和D),但是這一章裡頭大概沒有明顯的優勝者,每個方法都有用各自的優缺點,讓我們回顧一下每種方法:
方法A: 應該能在大多數浏覽器上正常運作. 內容空白,因此無法為標簽提供結構,語義. 需要額外的標簽. 由於XHTML1.0不推薦使用name屬性,因此必須考慮向後兼容.
方法B: 應該能在所有浏覽器上正常運作. 需要額外的標簽. 必須留意<a>的全局樣式有可能會覆蓋外層標簽的樣式. 由於XHTML1.0不推薦使用name屬性,因此必須考慮向後兼容性.
方法C: 標簽較少. 可以使用已經具備的id屬性. 能夠向後兼容. 需要最近的浏覽器才能正常運作.
方法D: 同時具備向前兼容和向後兼容. 必須留意<a>的全局樣式有可能覆蓋外層標簽的樣式設定. 需要額外的標簽.
看來方法C與D是比較好的選擇,具備向後兼容,較少的標簽,與額外標簽,完全兼容型形成對比,我的建議是考慮讀者群,並且以此進行適當的決定.
舉例來說,如果你正在構建一套需要最新浏覽器才能使用的網絡應用程序或是內部網站,那麼方法C大概是最棒的選擇.這個方法不需要額外的標簽,但是已知某些4.X版本的浏覽器無法正常處理這個方法.
如果你設計一個會被任何人,在任何時間浏覽的網站,你或許會選擇方法D,這個方法能夠確保向前兼容以及向後兼容,但是必須背負錨點標簽的些許包袱.
選擇權在你,希望在看過每個方法後,能在適當時機選擇適當的方法使用.

技巧延伸
在這個單元內,我們會看看