css基礎(chǔ)篇08-超鏈接樣式

鏈接a標(biāo)簽是網(wǎng)頁最常用的一個元素，如何能夠把超鏈接的樣式外觀控制得完美也是一項前端必備技能。

目標(biāo)

四種超鏈接狀態(tài)
巧用hover偽類

在所有瀏覽器里，超鏈接的樣式幾乎都是一樣，尤其是在新聞類的網(wǎng)站里，更是如此。

新聞類網(wǎng)站

幾乎都是藍(lán)色的文字，點擊的瞬間變紅色，瀏覽過的超鏈接是紫色。因為這就是官方默認(rèn)的樣式。

官方樣式

超鏈接偽類

偽類就是不同狀態(tài)的名字。

語法：標(biāo)簽:偽類值

偽類值

link就是默認(rèn)樣式，在未被訪問時的樣式

link

visited是訪問后的樣式

visited

hover是鼠標(biāo)經(jīng)過顯示的樣式

hover

active是鼠標(biāo)單擊激活時的樣式

active

hover偽類

hover偽類不只限于a標(biāo)簽，幾乎所有的標(biāo)簽都可以用，是一個非常強(qiáng)大的偽類！

只要是需要鼠標(biāo)經(jīng)過，做出樣式改變的，就一定是hover偽類。

網(wǎng)上很多的需要鼠標(biāo)經(jīng)過做動畫效果的，就是靠hover偽類。

動畫效果

總結(jié)

思維導(dǎo)圖

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點內(nèi)容。

1.認(rèn)識<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過<map>的名字來驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。

分別添加三個形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對！注意是“對”！從左到右，兩個數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數(shù)變了，參數(shù)就不正確了），如圖：

這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個問題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點擊“文件”找到“打開”：

選擇要打開的圖片名字：

點擊名稱后，右邊會有圖像預(yù)覽，點擊“打開”即可：

打開后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請在空閑時找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過鏈接區(qū)域時提示讀者，如下：

title="殲20氣動外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時還有一些注意事項，我們下次再詳細(xì)討論。

使用碎片時間，學(xué)習(xí)完整知識！關(guān)注大魚師兄，一起精研技藝。

言

超鏈接是互聯(lián)網(wǎng)最突出的功能之一，添加超鏈接也是所有網(wǎng)絡(luò)用戶需要掌握的基本功。

然而，「會用」超鏈接并不等于能「用好」超鏈接。或許是因為操作太過容易，我們在添加超鏈接的時候往往頗為隨意，而不會仔細(xì)考慮做成超鏈接的內(nèi)容和地址是否合理。

回想一下，你是否遇到過下面這樣的超鏈接用法，或者自己這樣用過：

將操作指示作為鏈接文本：「點擊這里」「查看相關(guān)信息」「」
將網(wǎng)址作為鏈接文本：http://example.com/
為連續(xù)的詞語添加超鏈接作為列舉手段：「蘋果在過去幾個月和開發(fā)者可謂沖突不斷。」
將一長串話作為鏈接文本。

這些用法都是值得商榷的。

超鏈接的正確用法并不是個新話題。早在 2004 年，谷歌工程師 Jed Hartman 就撰文討論過鏈接文本的合理用法；上面列舉的幾種不當(dāng)用例正是來源于該文。

一些開發(fā)文檔也涉及了這個問題。谷歌的《開發(fā)文檔風(fēng)格指南》（Developer Documentation Style Guide）就為此專設(shè)一節(jié)，并指出鏈接文本應(yīng)該「描述讀者點擊鏈接后將會看到的內(nèi)容」，如被引文檔的標(biāo)題或?qū)ζ鋬?nèi)容的描述。Mozilla 維護(hù)的 MDN 文檔庫也討論了「鏈接最佳實踐」（link best practices），同樣建議回避上述幾種做法。

但正如我們所見，時至今日，超鏈接的使用在實踐中仍然是很隨意的；不少網(wǎng)站超鏈接的外觀設(shè)計也往往不盡人意。

為此，我想從鏈接文本和鏈接地址的選擇、鏈接外觀的設(shè)計等方面，討論自己認(rèn)為較優(yōu)的用法，希望能為超鏈接的規(guī)范使用提供一些參考。

鏈接文本的選擇——追求「名副其實」

從 HTML 標(biāo)準(zhǔn)看鏈接文本的要求

要回答鏈接文本如何設(shè)置，首先要從什么是超鏈接說起。

根據(jù) HTML 標(biāo)準(zhǔn)，超鏈接是「指向其他資源的鏈接，通常由用戶代理（一般即為瀏覽器——筆者注）展示給用戶，使用戶可以令用戶代理導(dǎo)航到這些資源」。

此外，超鏈接通常是通過「錨」（anchor）元素（a）構(gòu)造的；當(dāng)一個錨元素含有 href 屬性時，該元素就代表一個由其內(nèi)容標(biāo)記（label）的超鏈接。

這些定義固然晦澀，但我們?nèi)匀豢梢詮闹械贸鲆恍┯杏媒Y(jié)論：

HTML 元素是有「語義」（semantics）、也即內(nèi)在含義的。例如，錨元素的存在就說明「此處有鏈接，點擊可跳轉(zhuǎn)到相關(guān)信息」。
錨元素的內(nèi)容（即鏈接文本）和其 href 屬性（即鏈接地址）之間是標(biāo)記和被標(biāo)記的關(guān)系。換言之，鏈接文本要「名副其實」，能夠說明鏈接地址的內(nèi)容。

在此基礎(chǔ)上，我們就可以說明為什么前面提到的幾種「流行」用法是有待商榷的：

第一種用法（將操作指示作為鏈接文本）的主要問題在于贅余。既然錨元素的存在本身就說明有鏈接、可點擊，再加入「點擊」「更多」之類的描述，就好像是在說「這是一個有鏈接的鏈接」一樣，成了同義反復(fù)。

早年，并非人人都「認(rèn)識」超鏈接，這么寫或許還有些教育用戶的意義，但這在今天已經(jīng)不是個問題了。此外，這樣的鏈接文本也無法說明被鏈接的內(nèi)容。因此，不妨刪去「點擊」「更多」，代之對被引內(nèi)容的說明：

要進(jìn)一步了解某話題，可以參閱某文章。

第二種用法（將網(wǎng)址作為鏈接文本）同樣會讓讀者無從知曉其內(nèi)容。此外，從排版角度，冗長的網(wǎng)址也會給斷行、對齊的處理造成不便，影響版面的整潔度。因此，更好的做法仍然是描述鏈接地址的內(nèi)容，而不是直接把地址寫進(jìn)正文（當(dāng)然，因行文需要展示鏈接地址的場合除外）。

第三種用法（將超鏈接的連用作為列舉手段）可謂有利有弊。一方面，這么做確實具有一定「修辭」功能，可以傳達(dá)俏皮、諷刺等意味。但正如那些被濫用的「梗」一樣，其新意和趣味會隨著反復(fù)使用而磨損，最終引起讀者的厭倦；這么做也違反了「名副其實」的原則，給閱讀造成不便。因此，最好還是把「文采」留給別處，用更清晰的方式來列舉超鏈接。

例如，與其使用上述那種抖機(jī)靈寫法：「蘋果在過去幾個月和開發(fā)者可謂沖突不斷」，不如原原本本地把具體內(nèi)容呈現(xiàn)給讀者：

蘋果在過去幾個月和開發(fā)者可謂沖突不斷，先后拒收了電郵服務(wù) Hey 的官方 app、下架了人氣游戲 Fortnite、強(qiáng)迫 WordPress 通過內(nèi)購銷售域名，并「言而有信」地關(guān)停了 Epic 的開發(fā)者賬號。

第四種用法（鏈接文本過長）是否不值得鼓勵，現(xiàn)有討論并未達(dá)成共識，但我的觀點仍然是應(yīng)該盡量避免。理由是，如果鏈接文本很長，它很可能是在摘錄或描述被引內(nèi)容的局部，而非全文；如果給這樣的局部引用加上指向原文整體的超鏈接，不僅不具有對應(yīng)關(guān)系，也不便于讀者跳轉(zhuǎn)之后找到相關(guān)段落。

因此，更好的做法是把鏈接加在文章標(biāo)題上（同時說明被引段落的位置），然后用普通文本做摘錄和總結(jié)：

根據(jù)某文章 [某節(jié)] 的觀點，「……」。

另外，不合規(guī)范的鏈接用法還會產(chǎn)生一些較為間接、但同樣不容忽視的負(fù)面影響。例如，這會降低網(wǎng)頁的可訪問性（accessibility），給依賴于讀屏器的用戶造成不便，使他們很難通過聽到的鏈接文本判斷目標(biāo)頁面的內(nèi)容（參見不同讀屏器對于鏈接文本的處理方式）。又如，搜索引擎在索引網(wǎng)站時，常常通過鏈接來判斷網(wǎng)站的關(guān)鍵詞。如果一個網(wǎng)站的鏈接文本都是「跑題」的，它給搜索引擎的「印象分」就會大打折扣，導(dǎo)致搜索排名降低。

先問「加不加」，再問「加在哪」

從上文的討論可以看出，要修正超鏈接的「問題用法」，只靠給鏈接換個位置可能是不夠的，往往還需要調(diào)整甚至重寫相關(guān)表述。

這是因為，超鏈接的質(zhì)量間接反映了寫作的質(zhì)量：如果你發(fā)現(xiàn)難以從文本中找出合適的部分做成鏈接，那么很可能是因為行文表述不夠具體、充分，信息標(biāo)注不夠明確、規(guī)范。

這里，超鏈接的便捷再次埋下了隱患。過去，我們用括號、腳注提示相關(guān)信息，用引注、參考文獻(xiàn)表明內(nèi)容來源。到了面向網(wǎng)頁的寫作中，這些傳統(tǒng)注記方式的職能在很大程度上被超鏈接包攬了。但與此同時，那些原本需要研究、檢索支撐的工作，被簡化成了復(fù)制粘貼網(wǎng)址；原本寫成白紙黑字、受讀者審視的引文，被藏到了鏈接背后。在方便的同時，這也為我們提供了「縱容」自己降低寫作標(biāo)準(zhǔn)、濫用超鏈接的借口。

因此，比起「在哪里添加超鏈接」，一個更優(yōu)先的問題或許還是「要不要添加超鏈接」。

如果文章討論的話題線索復(fù)雜、眾說紛紜，那么我們就有責(zé)任先梳理、溯源，篩選出盡可能一手、高質(zhì)量的來源做成鏈接，而不是將大把鏈接一股腦塞給讀者，同時產(chǎn)生「內(nèi)容充實」的良好自我感覺。如果被引文章篇幅較長、內(nèi)容艱深，或與當(dāng)前段落的關(guān)系并不一目了然，那么我們也有責(zé)任作出必要的標(biāo)注和解釋，而不是拋出一個超鏈接，讓讀者自己點開「細(xì)品」「領(lǐng)悟」。

例如，前段時間，美國國會召集四大科技公司 CEO 的反壟斷聽證會受到了媒體的廣泛關(guān)注（可參閱我介紹此事的文章）。不少報道在行文中提及了微軟 20 年前受到的司法部指控，以此介紹美國法院的反壟斷判案標(biāo)準(zhǔn)。

這個案例引用當(dāng)然是切題的，但到了為其添加超鏈接時，很多文章就頗為隨意，一般都選擇鏈接到自己網(wǎng)站的其他文章，或是當(dāng)年的媒體報道。然而，這并不符合前面介紹的「名副其實」原則（最相關(guān)的文件應(yīng)當(dāng)是判決書，或至少是對判決結(jié)果的報道），也不足以使讀者了解判決邏輯是什么、從何而來。

實際上，如果遵循法律引注的要求，提及判例應(yīng)當(dāng)附上相關(guān)案件的完整索引信息和必要的解釋說明：

United States v. Microsoft Corp., 253 F.3d 34, 59 (D.C. Cir. 2001) (holding that a balancing approach under the rubric of the “rule of reason” is applied for the analysis under §2 of the Sherman Act).

這樣，讀者不僅能了解案件的當(dāng)事方（聯(lián)邦政府訴微軟公司）、審理的時間地點（2001 年由聯(lián)邦法院哥倫比亞特區(qū)巡回法庭審理），主要的判決理由（法院可以通過衡量利弊判斷壟斷行為是否合法），而且如有興趣進(jìn)一步探究，還可以自己找到判決原文閱讀（《聯(lián)邦案例匯編》第三輯第 253 卷，第 34 頁以下，相關(guān)段落位于第 59 頁）。

誠然，出于效率和簡潔的考慮，網(wǎng)上寫作沒有必要像學(xué)術(shù)寫作那樣一板一眼地遵循引注規(guī)范（Bluebook 等引注標(biāo)準(zhǔn)確實也因為繁瑣、封閉而頗受詬病）。但功夫有時需要下在那些看不見的地方；如果下筆前對寫作對象做了充分的研究，寫作時做了充分的說明和標(biāo)注，「超鏈接加在哪」幾乎不會是個問題。

鏈接地址的選擇——精簡而不失具體

要做出好的超鏈接，除了關(guān)注鏈接文本的選擇，鏈接地址的規(guī)范性也不應(yīng)忽視。

一方面，做成超鏈接的地址應(yīng)當(dāng)盡量精簡，即在不影響鏈接功能的前提下，包含盡量少的無關(guān)信息。直接從瀏覽器地址欄復(fù)制的 URL 未必適合直接拿來做成鏈接，因為其中可能包含了很多無關(guān)的參數(shù)（parameter）。

例如，搜索結(jié)果頁和郵件通訊中很多 URL 都含有 utm_source 等用于流量分析的參數(shù)：

https://example.com?utm_source=news4&utm_medium=email&utm_campaign=spring-summer

將其留在超鏈接中不僅沒有實際功能，而且不利于保護(hù)讀者的隱私。

又如，在插入商品銷售頁的鏈接時，應(yīng)當(dāng)從中刪除無關(guān)的引薦代碼（affiliate token）；如果要加入自己的引薦代碼，則應(yīng)當(dāng)作出明確披露。

另一方面，鏈接地址又應(yīng)當(dāng)足夠具體，即盡可能精準(zhǔn)定位到相關(guān)資源。如果引述的內(nèi)容集中于文章的某一節(jié)，那么插入的 URL 最好具體到片段（fragment）。

例如，如果撰文討論常見的網(wǎng)頁標(biāo)準(zhǔn)，那么在插入相關(guān)維基詞條的鏈接時，就可以具體到：

https://en.wikipedia.org/wiki/Web_standards#Common_usage

這樣，讀者在點擊后就可以直接跳轉(zhuǎn)到其中最相關(guān)的「Common Usage」一節(jié)。

類似地，如果文章涉及 GitHub 代碼或 YouTube 視頻，也不妨利用它們?yōu)樘囟ㄐ刑柣驎r間戳創(chuàng)建鏈接的功能。

前不久，谷歌還為 Chrome 瀏覽器開發(fā)了一個名為「鏈接到文本片段」（Link to Text Fragment）的插件，可以幫助用戶制作出指向頁面上任意文本的鏈接。遺憾的是，這個插件背后的標(biāo)準(zhǔn)仍處于早期草案階段。在它被廣泛采納之前，更務(wù)實的做法或許還是像上文建議的那樣，不怕啰嗦地向讀者盡量具體描述引文的位置。

鏈接外觀的設(shè)計——平衡謹(jǐn)慎與活潑

最后，超鏈接的質(zhì)量并不只取決于文章作者；網(wǎng)站的設(shè)計者對此也有一份責(zé)任，那就是合理地設(shè)計超鏈接的外觀。

傳統(tǒng)網(wǎng)頁中的超鏈接是其貌不揚(yáng)的，始終以藍(lán)色文字加下劃線的形態(tài)示人。但在近年，給鏈接文本加粗、添加夸張的下劃線、換用高飽和度的顏色似乎蔚然成風(fēng)；超鏈接儼然成了很多網(wǎng)站彰顯個性的秀場。

Vox 的超鏈接；彩色粗體的設(shè)計在鏈接密集時讓版面不整潔且缺乏層次

然而，網(wǎng)頁元素的外觀應(yīng)該與其功能相匹配。正如前文反復(fù)強(qiáng)調(diào)的，超鏈接只能說明鏈接文本存在一個關(guān)聯(lián)頁面，而不能說明它相對于上下文更加重要。因此，也就沒有理由使其在視覺上過分突出。此外，過度設(shè)計超鏈接還會進(jìn)一步放大前述濫用行為的危害，讓版面效果變得凌亂而沒有層次。

當(dāng)然，這并不是說超鏈接的設(shè)計就只能是死氣沉沉的。我就曾見過不少既恰如其分、又不失新意的超鏈接設(shè)計。試舉兩例：

一是排版設(shè)計師 Matthew Butterick 的 Butterick’s Practical Typography 網(wǎng)站。這個網(wǎng)站實際是一本電子書，深入淺出地講解了很多實用的排版技巧和關(guān)注點。它的設(shè)計拋棄了「下劃線 = 超鏈接」的傳統(tǒng)做法，轉(zhuǎn)而通過 CSS 的 :after 在每個超鏈接之后加上一個小紅圈，同時鏈接文本會在鼠標(biāo)懸停時被淡紅底色高亮。這樣的設(shè)計既降低了侵略感，又保留了視覺提示功能，與中國傳統(tǒng)的「圈點」批注有著微妙的相似。

Practical Typography 的鏈接設(shè)計

二是軟件工程師 Jestem Króliczkiem 的個人博客 beepb00p。作為一個技術(shù)向、長篇說明文為主的博客，它的設(shè)計亮點在于為常用的外部網(wǎng)站（例如 GitHub、維基百科等）的鏈接添加了 SVG 圖標(biāo)，并為跳轉(zhuǎn)到文內(nèi)其他段落的鏈接添加了上下箭頭。這些圖標(biāo)的加入不僅使鏈接對象一目了然，也給原本「素面朝天」的文本頁面平添了幾分趣味。

beepb00p 的鏈接設(shè)計

結(jié)語

你可能已經(jīng)注意到，本文在討論各種鏈接用法時，一直回避使用「正確」「錯誤」等定性的標(biāo)簽，而代之以「合適」「更好」等評價。的確，超鏈接的用法和設(shè)計并沒有成文的標(biāo)準(zhǔn)，而更多是一種「風(fēng)格」（style）。既然是風(fēng)格，就沒有絕對的對錯之分，而是會隨著時代、技術(shù)、觀念等外部因素而變，并且體現(xiàn)著不同寫作者、設(shè)計者的個性。

然而，隨性不等于隨意。從小處說，鏈接的質(zhì)量體現(xiàn)了作者的態(tài)度，反映了文章的質(zhì)量。往大處說，互聯(lián)網(wǎng)是由超鏈接織成的，它的價值也很大程度上取決于超鏈接的廣度、深度和精度。在筑籬修渠成為科技巨頭的發(fā)展要務(wù)、互聯(lián)網(wǎng)的開放價值備受威脅的今天，用高質(zhì)量的超鏈接拓展信息的邊界，或許就是我們作為普通用戶守護(hù)互聯(lián)網(wǎng)為數(shù)不多的方式之一。

在線咨詢

上一篇：css控制字?jǐn)?shù)，超出部分就顯示省略號
下一篇：在html5頁面中如何使用vue3