|
上文：標(biāo)記語言——短語元素
標(biāo)準(zhǔn)化設(shè)計解決方案 - 標(biāo)記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語法談起
Chapter 7 錨點
HTML中的鏈接,正確的說法應(yīng)該稱作"錨點",它不僅讓我們能指向文檔,還能指向頁面里的特定段落,更能當(dāng)作"精準(zhǔn)鏈接"的便利工具.讓鏈接對象接近焦點.在這一章里,我們將看到四種不同的錨點做法,說明每個方法的優(yōu)點,也會介紹title屬性如何能提升鏈接的易用性,另外也將使用CSS為鏈接設(shè)計樣式.
在需要指定到頁面的特定部分時,標(biāo)記錨點是最佳的方法
這是在設(shè)計網(wǎng)站時經(jīng)常遇到的情況,你想鏈接到某個頁面的特定部分,可是使用者正在閱讀的可能是在另外的一個頁面,接下來討論的四種方法之中任選一種都能讓你達(dá)成目標(biāo).
在示例中,假設(shè)我們打算鏈接到同一個頁面中的特定標(biāo)題:
方法A:空洞的名稱
<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
...更多文字...
使用一個內(nèi)容空白的錨點標(biāo)簽再配上name屬性,標(biāo)記特定的鏈接點,或許這是你熟悉的方法,在標(biāo)題前放一個內(nèi)容空白的<a>,并且連向它(使用#符號,后面加上name屬性的值),就能讓我們連到頁面的特定部分了,當(dāng)頁面包含了很長需要滾動的項目清單時,我們能通過這個方法十分方便的連到特定的項目.
圖7-1顯示了點擊"About Oranges"鏈接之后的結(jié)果,也就是跳到我們標(biāo)識<a name="oranges"></a>的地方,正好在標(biāo)題上面.
圖7-1.點擊連上具體錨點鏈接的示例
效果不錯,但是浪費一個內(nèi)容空白的標(biāo)簽來標(biāo)識鏈接位置有點不合語義,方法B能改進(jìn)這點.
方法B:全部在名稱之內(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)題外面,這么做看起來的確比較符合語義,在方法A里頭,我們的連接對象是...恩,什么都沒有,但是在方法B里,我們不僅說明了這段文字是標(biāo)題標(biāo)簽的一部分,同時也是這個頁面的連接錨點之一.
小心<a>的全局樣式
如果使用了方法B的話,有個地方必須要注意.如果你為所有的<a>元素指定了全局的CSS樣式的話(顏色,文字大小,文字裝飾等等),這些樣式就會覆蓋你為<h2>元素指定的樣式.會發(fā)生這種情況的原因是,在這個例子里頭,<a>標(biāo)簽是位于包圍它的<h2>標(biāo)簽之內(nèi)的子元素.
舉例來說,假如你的CSS內(nèi)有類似這樣的聲明:
a{
color:green;
font-weight:bold;
text-decoration:underline;
}
方法B配上這段CSS就會讓標(biāo)題與其他頁面內(nèi)的<a>一樣變成綠色,粗體,加上下劃線,或許與你期望的<h2>樣式不同.
我們能使用<a>的:link偽類以避免這種現(xiàn)象(同時也能獲得其他好處),在本章稍后的"技巧延伸"中會詳細(xì)討論.
更豐富的名稱屬性
使用方法B(以及方法A)的好處之一,就是name屬性可以處理更豐富的錨點名稱,具體來說,就是能在名稱之內(nèi)使用符號
舉例來說,如果使用方法B的話,你可以這么做(在此é代表符號"e"):
<p><a href="#resumé">My Resumé</a></p>
...一些文字...
<h2><a name="resumé">Dan's Resumé</a></h2>
...更多文字...
在處理不屬于英文字母的字符時,這個功能十分重要.
但是還有幾個方法值得一提,下面這個方法完全不需要使用<a>設(shè)定錨點,讓我們看看方法C.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 標(biāo)記語言——錨點 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 標(biāo)記語言——錨點 [1]
第 2 頁 
