|
方法C:丟掉名稱
<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2 id="oranges">Oranges Are Tasty</h2>
...更多文字...
啊哈,id屬性的功能就像name屬性,同樣能為頁面指定錨點,除此之外,方法C還消除了方法A,B使用name屬性是需要的額外<a>標(biāo)簽,我們減少了源代碼,這向來是好事.
由于id屬性可以加到任何標(biāo)簽里,因此我們能輕易地在頁面內(nèi)任意為需要的元素加上錨點.在這個例子中,我們選擇為標(biāo)題加上錨點,但我們也能同樣輕易的為<div>,<form>,<p>,<ul>...還有其他所有標(biāo)簽加上錨點.
一石二鳥
事實上,在大多數(shù)情況下,我們都能為先前存在id屬性添加樣式或者scripting,這是方法C的另一個好處.由于這個緣故,我們不需要為僅僅設(shè)定錨點而加上額外的代碼.
舉例來說,讓我們假設(shè)你在很長的頁面底部有一個用來留下評論的表單,而你想在頁首加上鏈接,這個表單已經(jīng)為了指定獨特樣式而設(shè)了id="comments".這是我們能直接把id當(dāng)作錨點進行連接,而不必再加上有name屬性的<a>標(biāo)簽.
代碼看起大概類似這樣:
<p><a href="#comments">Add a Comment!</a></p>
...很多文字...
<form id="comments" action="/path/to/script">
...表單元素...
</form>
同時,如果你的頁面很長,那么你在底部加上鏈接到頂部錨點的鏈接,以便用戶"回到頂部".
值得一提的是:雖然看起來十分合適,但最好避免在指定錨點名稱時使用"top",有些瀏覽器保留這個名稱做為特殊用途,那么使用這個名稱可能會造成不一致的結(jié)果,最好選擇一個類似,但又不會造成問題的名稱,或許用#gemesis?還是用#utmost?你自己拿主意了.
古老瀏覽器與id屬性
只使用id屬性當(dāng)作錨點時,有個重要的缺點值得一提,那就是某些古老的瀏覽器并不支持這個方法.哦喔,在標(biāo)識你自己的錨點時這的確是個必須考慮的問題,同時這也是向前兼容的不幸示例.讓我們看看最后一個實例,方法D.
方法D:合而為一
<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>
...更多文字...
如果在標(biāo)記錨點時,你希望達到向前兼容和向后兼容,那么你大概會喜歡這種方法.不管是古老的或是未來的瀏覽器都能正確的辨識具名錨點標(biāo)簽,但是由于W3C在XHTML1.0建議書中不推薦使用name屬性(http://www.w3.org/TR/xhtml1/#C_8),因此你也用id屬性支持未來的瀏覽器.
與方法B相同,我們必須留意對<a>標(biāo)簽造成影響的全局樣式.
共享名稱
如果你選擇使用方法D的話,為id與name屬性選用相同名稱完全可以被接受(可能也十分便利),但是只在它們位于相同標(biāo)簽時才能這樣.此外,也只有幾個特定的標(biāo)簽允許這么做,精確來說,包含了<a>,<applet>,<frame>,<img>,<map>.因此,我們把id="oranges"從<h2>移到錨點標(biāo)簽之內(nèi).
現(xiàn)在我們已經(jīng)看過了四種建立錨點的方法,讓我們歸納一下每種方法的優(yōu)劣.
歸納
雖然我覺得有兩種方法略占優(yōu)勢(C和D),但是這一章里頭大概沒有明顯的優(yōu)勝者,每個方法都有用各自的優(yōu)缺點,讓我們回顧一下每種方法:
方法A:
-
應(yīng)該能在大多數(shù)瀏覽器上正常運作.
-
內(nèi)容空白,因此無法為標(biāo)簽提供結(jié)構(gòu),語義.
-
需要額外的標(biāo)簽.
-
由于XHTML1.0不推薦使用name屬性,因此必須考慮向后兼容.
方法B:
方法C:
-
標(biāo)簽較少.
-
可以使用已經(jīng)具備的id屬性.
-
能夠向后兼容.
-
需要最近的瀏覽器才能正常運作.
方法D:
-
同時具備向前兼容和向后兼容.
-
必須留意<a>的全局樣式有可能覆蓋外層標(biāo)簽的樣式設(shè)定.
-
需要額外的標(biāo)簽.
-
看來方法C與D是比較好的選擇,具備向后兼容,較少的標(biāo)簽,與額外標(biāo)簽,完全兼容型形成對比,我的建議是考慮讀者群,并且以此進行適當(dāng)?shù)臎Q定.
舉例來說,如果你正在構(gòu)建一套需要最新瀏覽器才能使用的網(wǎng)絡(luò)應(yīng)用程序或是內(nèi)部網(wǎng)站,那么方法C大概是最棒的選擇.這個方法不需要額外的標(biāo)簽,但是已知某些4.X版本的瀏覽器無法正常處理這個方法.
如果你設(shè)計一個會被任何人,在任何時間瀏覽的網(wǎng)站,你或許會選擇方法D,這個方法能夠確保向前兼容以及向后兼容,但是必須背負錨點標(biāo)簽的些許包袱.
選擇權(quán)在你,希望在看過每個方法后,能在適當(dāng)時機選擇適當(dāng)?shù)姆椒ㄊ褂?
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——錨點 [1] 下一頁 標(biāo)記語言——錨點 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 標(biāo)記語言——錨點 [2]
