上文：標(biāo)記語(yǔ)言——短語(yǔ)元素
原文出處 Chapter 7 錨點(diǎn)
HTML中的鏈接,正確的說(shuō)法應(yīng)該稱(chēng)作"錨點(diǎn)",它不僅讓我們能指向文檔,還能指向頁(yè)面里的特定段落,更能當(dāng)作"精準(zhǔn)鏈接"的便利工具.讓鏈接對(duì)象接近焦點(diǎn).在這一章里,我們將看到四種不同的錨點(diǎn)做法,說(shuō)明每個(gè)方法的優(yōu)點(diǎn),也會(huì)介紹title屬性如何能提升鏈接的易用性,另外也將使用CSS為鏈接設(shè)計(jì)樣式. 在需要指定到頁(yè)面的特定部分時(shí),標(biāo)記錨點(diǎn)是最佳的方法
這是在設(shè)計(jì)網(wǎng)站時(shí)經(jīng)常遇到的情況,你想鏈接到某個(gè)頁(yè)面的特定部分,可是使用者正在閱讀的可能是在另外的一個(gè)頁(yè)面,接下來(lái)討論的四種方法之中任選一種都能讓你達(dá)成目標(biāo).
在示例中,假設(shè)我們打算鏈接到同一個(gè)頁(yè)面中的特定標(biāo)題: 方法A:空洞的名稱(chēng)

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

使用一個(gè)內(nèi)容空白的錨點(diǎn)標(biāo)簽再配上name屬性,標(biāo)記特定的鏈接點(diǎn),或許這是你熟悉的方法,在標(biāo)題前放一個(gè)內(nèi)容空白的<a>,并且連向它(使用#符號(hào),后面加上name屬性的值),就能讓我們連到頁(yè)面的特定部分了,當(dāng)頁(yè)面包含了很長(zhǎng)需要滾動(dòng)的項(xiàng)目清單時(shí),我們能通過(guò)這個(gè)方法十分方便的連到特定的項(xiàng)目.
圖7-1顯示了點(diǎn)擊"About Oranges"鏈接之后的結(jié)果,也就是跳到我們標(biāo)識(shí)<a name="oranges"></a>的地方,正好在標(biāo)題上面.

圖7-1.點(diǎn)擊連上具體錨點(diǎn)鏈接的示例
效果不錯(cuò),但是浪費(fèi)一個(gè)內(nèi)容空白的標(biāo)簽來(lái)標(biāo)識(shí)鏈接位置有點(diǎn)不合語(yǔ)義,方法B能改進(jìn)這點(diǎn). 方法B:全部在名稱(chēng)之內(nèi)

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

與方法A一樣,我們?nèi)匀皇褂?lt;a>標(biāo)簽配上name屬性,但這次我們把它包在我想要鏈接的標(biāo)題外面,這么做看起來(lái)的確比較符合語(yǔ)義,在方法A里頭,我們的連接對(duì)象是...恩,什么都沒(méi)有,但是在方法B里,我們不僅說(shuō)明了這段文字是標(biāo)題標(biāo)簽的一部分,同時(shí)也是這個(gè)頁(yè)面的連接錨點(diǎn)之一. 小心<a>的全局樣式
如果使用了方法B的話,有個(gè)地方必須要注意.如果你為所有的<a>元素指定了全局的CSS樣式的話(顏色,文字大小,文字裝飾等等),這些樣式就會(huì)覆蓋你為<h2>元素指定的樣式.會(huì)發(fā)生這種情況的原因是,在這個(gè)例子里頭,<a>標(biāo)簽是位于包圍它的<h2>標(biāo)簽之內(nèi)的子元素.
舉例來(lái)說(shuō),假如你的CSS內(nèi)有類(lèi)似這樣的聲明:

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

方法B配上這段CSS就會(huì)讓標(biāo)題與其他頁(yè)面內(nèi)的<a>一樣變成綠色,粗體,加上下劃線,或許與你期望的<h2>樣式不同.
我們能使用<a>的:link偽類(lèi)以避免這種現(xiàn)象(同時(shí)也能獲得其他好處),在本章稍后的"技巧延伸"中會(huì)詳細(xì)討論. 更豐富的名稱(chēng)屬性
使用方法B(以及方法A)的好處之一,就是name屬性可以處理更豐富的錨點(diǎn)名稱(chēng),具體來(lái)說(shuō),就是能在名稱(chēng)之內(nèi)使用符號(hào)
舉例來(lái)說(shuō),如果使用方法B的話,你可以這么做(在此&#233;代表符號(hào)"e"):

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

在處理不屬于英文字母的字符時(shí),這個(gè)功能十分重要.
但是還有幾個(gè)方法值得一提,下面這個(gè)方法完全不需要使用<a>設(shè)定錨點(diǎn),讓我們看看方法C.

方法C:丟掉名稱(chēng)

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

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

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

...很多文字...

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

同時(shí),如果你的頁(yè)面很長(zhǎng),那么你在底部加上鏈接到頂部錨點(diǎn)的鏈接,以便用戶(hù)"回到頂部".
值得一提的是:雖然看起來(lái)十分合適,但最好避免在指定錨點(diǎn)名稱(chēng)時(shí)使用"top",有些瀏覽器保留這個(gè)名稱(chēng)做為特殊用途,那么使用這個(gè)名稱(chēng)可能會(huì)造成不一致的結(jié)果,最好選擇一個(gè)類(lèi)似,但又不會(huì)造成問(wèn)題的名稱(chēng),或許用#gemesis?還是用#utmost?你自己拿主意了.
古老瀏覽器與id屬性
只使用id屬性當(dāng)作錨點(diǎn)時(shí),有個(gè)重要的缺點(diǎn)值得一提,那就是某些古老的瀏覽器并不支持這個(gè)方法.哦喔,在標(biāo)識(shí)你自己的錨點(diǎn)時(shí)這的確是個(gè)必須考慮的問(wèn)題,同時(shí)這也是向前兼容的不幸示例.讓我們看看最后一個(gè)實(shí)例,方法D. 方法D:合而為一

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

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

共享名稱(chēng)
如果你選擇使用方法D的話,為id與name屬性選用相同名稱(chēng)完全可以被接受(可能也十分便利),但是只在它們位于相同標(biāo)簽時(shí)才能這樣.此外,也只有幾個(gè)特定的標(biāo)簽允許這么做,精確來(lái)說(shuō),包含了<a>,<applet>,<frame>,<img>,<map>.因此,我們把id="oranges"從<h2>移到錨點(diǎn)標(biāo)簽之內(nèi).
現(xiàn)在我們已經(jīng)看過(guò)了四種建立錨點(diǎn)的方法,讓我們歸納一下每種方法的優(yōu)劣.

最新評(píng)論