言

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

然而，「會(huì)用」超鏈接并不等于能「用好」超鏈接。或許是因?yàn)椴僮魈^容易，我們在添加超鏈接的時(shí)候往往頗為隨意，而不會(huì)仔細(xì)考慮做成超鏈接的內(nèi)容和地址是否合理。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這是因?yàn)椋?strong>超鏈接的質(zhì)量間接反映了寫作的質(zhì)量：如果你發(fā)現(xiàn)難以從文本中找出合適的部分做成鏈接，那么很可能是因?yàn)樾形谋硎霾粔蚓唧w、充分，信息標(biāo)注不夠明確、規(guī)范。

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

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

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

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

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

實(shí)際上，如果遵循法律引注的要求，提及判例應(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)邦政府訴微軟公司）、審理的時(shí)間地點(diǎn)（2001 年由聯(lián)邦法院哥倫比亞特區(qū)巡回法庭審理），主要的判決理由（法院可以通過衡量利弊判斷壟斷行為是否合法），而且如有興趣進(jìn)一步探究，還可以自己找到判決原文閱讀（《聯(lián)邦案例匯編》第三輯第 253 卷，第 34 頁以下，相關(guān)段落位于第 59 頁）。

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

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

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

一方面，做成超鏈接的地址應(yīng)當(dāng)盡量精簡，即在不影響鏈接功能的前提下，包含盡量少的無關(guān)信息。直接從瀏覽器地址欄復(fù)制的 URL 未必適合直接拿來做成鏈接，因?yàn)槠渲锌赡馨撕芏酂o關(guān)的參數(shù)（parameter）。

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

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

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

又如，在插入商品銷售頁的鏈接時(shí)，應(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)維基詞條的鏈接時(shí)，就可以具體到：

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

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

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

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

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

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

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

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

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

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

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

Practical Typography 的鏈接設(shè)計(jì)

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

beepb00p 的鏈接設(shè)計(jì)

結(jié)語

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

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

CSS 面試題

## 01. 盒模型
盒模型分為標(biāo)準(zhǔn)盒模型和怪異盒模型
- 標(biāo)準(zhǔn)盒模型：實(shí)際寬度由 寬度 + padding + border 組成(box-sizing: content-box)- 怪異盒模型：內(nèi)容寬度為 定義的寬度 - padding - border(box-sizing: border-box)
## 02. 什么是文檔流
文檔流是元素在 web 頁面上的一種呈現(xiàn)方式，按照出現(xiàn)的先后順序進(jìn)行排列
## 03. 什么是 BFC
BFC 即 Block Formatting Contexts(塊級(jí)格式上下文)。它是頁面中的一塊區(qū)域，它決定了子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
具有 BFC 特性的元素可以看做是隔離的容器，它的子元素在布局上不會(huì)影響到外面的元素
## 04. 觸發(fā) BFC 的條件
- float 不為 none- position 的值不是 static 或 relative- overflow 的值不是 visible- display 的值是 inline-block / table-cell / flex / inline-flex / table-caption
## 05. BFC 的作用
- 解決 margin-top 向上傳遞的問題- 解決 margin 上下疊加的問題- 清除浮動(dòng)
## 06. 清除浮動(dòng)的方式
同一層級(jí)的元素：另外的元素設(shè)置樣式 clear: both;
子元素清除父元素的浮動(dòng)：
- clear 屬性- BFC- 空元素- 給父元素設(shè)置 .clearfix::after{}
```css.clearfix::after { content: ""; display: block; clear: both;}```
## 07. 盒子里的文字上下居中
```css.box { height: 100px; line-height: 100px;}```
```css.box { display: table-cell; vertical-align: middle;}```
```css.box { display: flex; align-items: center;}```
```css.box { display: flex; flex-wrap: wrap; align-content: center;}```
## 08. 盒子里的盒子上下左右居中
```css.container { position: relative;}.box { display: absolute; top: 0; left: 0; transform: translate(-50%, -50%);}```
```css.container { display: flex; justify-content: center; align-items: center;}```
```css.container { display: grid; justify-content: center; align-content: center;}```
```css.container { display: flex; /* display: inline-flex; */}.box { margin: 0 auto;}```
```css.container { position: relative;}.box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}```
```css.container { display: table-cell; vertical-align: middle;}.box { margin: 0 auto;}```
## 09. rem 和 em 的區(qū)別
- rem 是相對于根元素(html)的 font-size 的，1rem=根元素的 font-size- em 如果元素自身定義了 font-size，1em=元素自身的 font-size，如果元素自身沒有定義 font-size，那么 1em=元素的父元素(設(shè)置了 font-size 的父元素)的 font-size- 如果元素自身的 font-size 設(shè)置的就是 em，那么元素自身的 font-size 就根據(jù)父元素的 font-size 計(jì)算得到