大家好我是落塵，一名新進晉級的菜鳥小編，也是一名前端開發攻城獅，從今天起帶大家重新理解前端，重新學習前端，讓大家有新的理解，每天都會更新些前端知識，如果小主們覺得還可以那就關注一下吧！
在前面的分享中，我講到了 HTML 的語義和元信息標籤，今天這一次分享，我們來講另一類 HTML 元素：連結。
連結這種元素可以說是佔據了整個網際網路。也正是因為無處不在的超連結，才讓我們的全球資訊網如此繁榮。沒有了超連結的 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 標籤。
超連結類 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。
這個標籤提示頁面它的變形形式，這個所謂的變形可能是當前頁面內容的不同格式、不同語言或者為不同的設備設計的版本，這種 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 型的 linkmodulepreload 型 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 一般用於頁面上顯示的連結，它們只能產生超連結。
大家好我是落塵，希望我分享的文章大家能夠喜歡，也希望大家多多支持，多多轉發；小主們若是喜歡，就掃碼關注一下我，每天都會給大家分享好的文章；