鏈接這種元素可以說是占據了整個互聯網。也正是因為無處不在的超鏈接，才讓我們的萬維網如此繁榮。
沒有了超鏈接的 HTML，最多可以稱為富文本，沒法稱作超文本（hyper text）。
不過，除了肉眼可見的這些鏈接，其實 HTML 里面還規定了一些不可見鏈接的類型，這節課，我就來給你介紹鏈接家族的全員，讓你對它們有一個完整的認識。
鏈接是 HTML 中的一種機制，它是 HTML 文檔和其它文檔或者資源的連接關系，在 HTML 中，鏈接有兩種類型。一種是超鏈接型標簽，一種是外部資源鏈接。
鏈接的家族中有 a 標簽、area 標簽和 link 標簽。
link 標簽
提到鏈接，我們都知道 a 標簽可以成為超鏈接，但是我們今天的內容，要從一個大家不太熟悉的標簽開始，也就是 link 標簽。
我們已經介紹過元信息類標簽。實際上，我們並沒有介紹完全，有些 link 標簽也是元信息類標簽的一種。
我們已經講過，HTML 標准並沒有規定瀏覽器如何使用元信息，我們還講到了元信息中有不少是被設計成“無需被瀏覽器識別，而是專門用於搜索引擎看的”。
link 標簽也是元信息的一種，在很多時候，它也是不會對瀏覽器產生任何效果的，這也是很多人會忽略 link 標簽學習的原因。
link 標簽會生成一個鏈接，它可能生成超鏈接，也可能生成外部資源鏈接。
一些 link 標簽會生成超鏈接，這些超鏈接又不會像 a 標簽那樣顯示在網頁中。這就是超鏈接型的 link 標簽。
這意味着多數瀏覽器中，這些 link 標簽不產生任何作用。但是，這些 link 標簽能夠被搜索引擎和一些瀏覽器插件識別，從而產生關鍵性作用。比如，到頁面 RSS 的 link 標簽，能夠被瀏覽器的 RSS 訂閱插件識別，提示用戶當前頁面是可以 RSS 訂閱的。
另外一些 link 標簽則會把外部的資源鏈接到文檔中，也就是說，會實際下載這些資源，並且做出一些處理，比如我們常見的用 link 標簽引入樣式表。
除了元信息的用法之外，多數外部資源型的 link 標簽還能夠被放在 body 中使用，從而起到把外部資源鏈接進文檔的作用。
link 標簽的鏈接類型主要通過 rel 屬性來區分，在本篇文章中，我們提到 xx 型 link 即表示屬性 rel 為 xx 的 link，其代碼類似下面：
<link rel="xx" ...>
下面我們先來看看超鏈接型 link 標簽。
超鏈接類 link 標簽
超鏈接型 link 標簽是一種被動型鏈接，在用戶不操作的情況下，它們不會被主動下載。
link 標簽具有特定的 rel 屬性，會成為特定類型的 link 標簽。產生超鏈接的 link 標簽包括：具有 rel=“canonical” 的 link、具有 rel="alternate"的 link、具有rel=“prev” rel="next"的 link 等等。
canonical 型 link
這種 link 的代碼寫法是這樣：
<link rel="canonical" href="...">
這個標簽提示頁面它的主 URL，在網站中常常有多個 URL 指向同一頁面的情況，搜索引擎訪問這類頁面時會去掉重復的頁面，這個 link 會提示搜索引擎保留哪一個URL。
alternate 型 link
這種 link 的代碼寫法是這樣：
<link rel="alternate" href="...">
這個標簽提示頁面它的變形形式，這個所謂的變形可能是當前頁面內容的不同格式、不同語言或者為不同的設備設計的版本，這種 link 通常也是提供給搜索引擎來使用的。
alternate 型的 link 的一個典型應用場景是，頁面提供 rss 訂閱時，可以用這樣的 link 來引入：
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">
除了搜索引擎外，很多瀏覽器插件都能識別這樣的 link。
prev 型 link 和 next 型 link
在互聯網應用中，很多網頁都屬於一個序列，比如分頁瀏覽的場景，或者圖片展示的場景，每個網頁是序列中的一個項。
這種時候，就適合使用 prev 和 next 型的 link 標簽，來告訴搜索引擎或者瀏覽器它的前一項和后一項，這有助於頁面的批量展示。
因為 next 型 link 告訴瀏覽器“這是很可能訪問的下一個頁面”，HTML 標准還建議對 next 型 link 做預處理，在本課后面的內容，我們會講到預處理類的 link。
其它超鏈接類的 link
其它超鏈接類 link 標簽都表示一個跟當前文檔相關聯的信息，可以把這樣的 link 標簽視為一種帶鏈接功能的 meta 標簽。
- rel=“author” 鏈接到本頁面的作者，一般是 mailto: 協議
- rel=“help” 鏈接到本頁面的幫助頁
- rel=“license” 鏈接到本頁面的版權信息頁
- rel=“search” 鏈接到本頁面的搜索頁面（一般是站內提供搜索時使用）
到這里，我們已經講完了所有的超鏈接類的 link 標簽用法了。接下來我們講講外部資源類 link 標簽。
外部資源類 link 標簽
外部資源型 link 標簽會被主動下載，並且根據 rel 類型做不同的處理。外部資源型的標簽包括：具有 icon 型的 link、預處理類 link、modulepreload 型的 link、stylesheet、pingback。下面我們來一一介紹它們。
icon 型 link
這類鏈接表示頁面的 icon。多數瀏覽器會讀取 icon 型 link，並且把頁面的 icon 展示出來。
icon 型 link 是唯一一個外部資源類的元信息 link，其它元信息類 link 都是超鏈接，這意味着，icon 型 link 中的圖標地址默認會被瀏覽器下載和使用。
如果沒有指定這樣的 link，多數瀏覽器會使用域名根目錄下的 favicon.ico，即使它並不存在，所以從性能的角度考慮，建議一定要保證頁面中有 icon 型的 link。
只有 icon 型 link 有有效的 sizes 屬性，HTML 標准允許一個頁面出現多個 icon 型 link，並且用 sizes 指定它適合的 icon 尺寸。
預處理類 link
我們都知道，導航到一個網站需要經過 dns 查詢域名、建立連接、傳輸數據、加載進內存和渲染等一系列的步驟。
預處理類 link 標簽就是允許我們控制瀏覽器，提前針對一些資源去做這些操作，以提高性能（當然如果你亂用的話，性能反而更差）。
下面我來列一下這些 link 類型：
- dns-prefetch 型 link 提前對一個域名做 dns 查詢，這樣的 link 里面的 href 實際上只有域名有意義。
- preconnect 型 link 提前對一個服務器建立 tcp 連接。
- prefetch 型 link 提前取 href 指定的 url 的內容。
- preload 型 link 提前加載 href 指定的 url。
- prerender 型 link 提前渲染 href 指定的 url。
- modulepreload 型的 link
- modulepreload 型 link 的作用是預先加載一個 JavaScript 的模塊。這可以保證 JS 模塊不必等到執行時才加載。
這里的所謂加載，是指完成下載並放入內存，並不會執行對應的 JavaScript。
<link rel="modulepreload" href="app.js"> <link rel="modulepreload" href="helpers.js"> <link rel="modulepreload" href="irc.js"> <link rel="modulepreload" href="fog-machine.js"> <script type="module" src="app.js">
這個例子來自 HTML 標准，我們假設 app.js 中有 import “irc” 和 import “fog-machine”, 而 irc.js 中有 import “helpers”。這段代碼使用 moduleload 型link 來預加載了四個 js 模塊。
盡管，單獨使用 script 標簽引用 app.js 也可以正常工作，但是我們通過加入對四個 JS 文件的 link 標簽，使得四個 JS 文件有機會被並行地下載，這樣提高了性能。
stylesheet 型 link
樣式表大概是所有人最熟悉的 link 標簽用法了。它的樣子是下面這樣的。
<link rel="stylesheet" href="xxx.css" type="text/css">
基本用法是從一個 CSS 文件創建一個樣式表。這里 type 屬性可以沒有，如果有，必須是"text/css"才會生效。
rel 前可以加上 alternate，成為 rel=“alternate stylesheet”，此時必須再指定 title 屬性。
這樣可以為頁面創建一份變體樣式，一些瀏覽器，如 Firefox 3.0，支持從瀏覽器菜單中切換這些樣式，當然了，大部分瀏覽器不支持這個功能，所以僅僅從語義的角度了解一下這種用法即可。
pingback 型 link
這樣的 link 表示本網頁被引用時，應該使用的 pingback 地址，這個機制是一份獨立的標准，遵守 pingback 協議的網站在引用本頁面時，會向這個 pingback url發送一個消息。
以上就是 link 標簽的所有用法了。接下來我們來介紹一下最熟悉的 a 標簽，當然了，也可能你學過了本節課以后，覺得自己其實也沒那么熟悉。
a 標簽
a 標簽是“anchor”的縮寫，它是錨點的意思，所謂錨點，實際上也是一種比喻的用法，古代船舶用錨來固定自己的位置，避免停泊時被海浪沖走，所以 anchor 標簽的意思也是標識文檔中的特定位置。
a 標簽其實同時充當了鏈接和目標點的角色，當 a 標簽有 href 屬性時，它是鏈接，當它有 name 時，它是鏈接的目標。
具有 href 的 a 標簽跟一些 link 一樣，會產生超鏈接，也就是在用戶不操作的情況下，它們不會被主動下載的被動型鏈接。
重點的內容是，a 標簽也可以有 rel 屬性，我們來簡單了解一下，首先是跟 link 相同的一些 rel，包括下面的幾種。
- alternate
- author
- help
- license
- next
- prev
- search
這些跟 link 語義完全一致，不同的是，a 標簽產生的鏈接是會實際顯示在網頁中的，而 link 標簽僅僅是元信息。
除了這些之外，a 標簽獨有的 rel 類型：
- tag 表示本網頁所屬的標簽；
- bookmark 到上級章節的鏈接。
a 標簽還有一些輔助的 rel 類型，用於提示瀏覽器或者搜索引擎做一些處理：
- nofollow 此鏈接不會被搜索引擎索引；noopener 此鏈接打開的網頁無法使用 opener 來獲得當前頁面的窗口；
- noreferrer 此鏈接打開的網頁無法使用 referrer 來獲得當前頁面的 url；
- opener 打開的網頁可以使用 window.opener 來訪問當前頁面的 window 對象，這是 a 標簽的默認行為。
a 標簽基本解決了在頁面中插入文字型和整張圖片超鏈接的需要，但是如果我們想要在圖片的某個區域產生超鏈接，那么就要用到另一種標簽了——area 標簽。
area 標簽
area 標簽與 a 標簽非常相似，不同的是，它不是文本型的鏈接，而是區域型的鏈接。
area 標簽支持的 rel 與 a 完全一樣，這里就不多說了。
area 是整個 html 規則中唯一支持非矩形熱區的標簽，它的 shape 屬性支持三種類型。
圓形：circle 或者 circ，coords 支持三個值，分別表示中心點的 x,y 坐標和圓形半徑 r。
矩形：rect 或者 rectangle，coords 支持兩個值，分別表示兩個對角頂點 x1，y1 和 x2，y2。
多邊形：poly 或者 polygon，coords 至少包括 6 個值，表示多邊形的各個頂點。
因為 area 設計的時間較早，所以不支持含有各種曲線的路徑，但是它也是唯一一個支持了非矩形觸發區域的元素，所以，對於一些效果而言，area 是必不可少的。
area 必須跟 img 和 map 標簽配合使用。使用示例如下（例子來自 html 標准）。
<p> Please select a shape: <img src="shapes.png" usemap="#shapes" alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."> <map name="shapes"> <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box --> <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box."> <area shape=circle coords="200,75,50" href="green.html" alt="Green circle."> <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."> <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star."> </map> </p>
這個例子展示了在一張圖片上畫熱區並且產生鏈接，分別使用了矩形、圓形和多邊形三種 area。
結語
本節課我們介紹了幾種鏈接類型。在 HTML 中，鏈接有兩種類型。一種是超鏈接型標簽，一種是外部資源鏈接。
我們逐次講到了 link 標簽、a 標簽和 area 標簽，link 標簽一般用於看不見的鏈接，它可能產生超鏈接或者外部資源鏈接，a 和 area 一般用於頁面上顯示的鏈接，它們只能產生超鏈接。