重學前端學習筆記（二十四）--HTML裏的連接元素

時間 2019-12-05

原文原文鏈接

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。

1、介紹

連接是 HTML 中的一種機制，它是 HTML 文檔和其它文檔或者資源的鏈接關係。連接兩種類型：一種是超連接型標籤，一種是外部資源連接。

2、link 標籤

2.一、超連接型 link 標籤

超連接型 link 標籤是一種被動型連接。 link 標籤具備特定的 rel 屬性，會成爲特定類型的 link 標籤。

一、`canonical 型 link`

提示頁面它的主 URL，在網站中經常有多個 URL 指向同一頁面的狀況，搜索引擎訪問這類頁面時會去掉重複的頁面，這個 link 會提示搜索引擎保留哪個 URL。

<link rel="canonical" href="...">

二、`alternate 型 link`

提示頁面它的變形形式，就是當前頁面內容的不一樣格式、不一樣語言或者爲不一樣的設備設計的版本，也能夠提供給搜索引擎來使用的。

<link rel="alternate" href="...">

典型應用場景：頁面提供 rss 訂閱時css

<link rel="alternate" type="application/rss+xml" title="RSS" href="...">

三、`prev 型 link 和 next 型 link`

用來告訴搜索引擎或者瀏覽器它的前一項和後一項，這有助於頁面的批量展現。

四、其它超連接類的 `link`

rel="author"：連接到本頁面的做者，通常是 mailto: 協議
rel="help"：連接到本頁面的幫助頁
rel="license"：連接到本頁面的版權信息頁
rel="search"：連接到本頁面的搜索頁面（通常是站內提供搜索時使用）

2.二、外部資源類 link 標籤

外部資源型 link 標籤會被主動下載，而且根據 rel 類型作不一樣的處理。

一、`icon 型 link`

惟一一個外部資源類的 元信息 link，其它元信息類 link 都是超連接， icon 型 link 中的圖標地址默認會被瀏覽器下載和使用。

注意：多數瀏覽器會使用域名根目錄下的 favicon.ico，即便它並不存在，從性能的角度考慮，建議頁面中有 icon 型的 link。html

二、`預處理類 link`

預處理類 link 標籤就是容許咱們控制瀏覽器，提早針對一些資源去作這些操做，以提升性能（ 亂用性能反而更差）。

dns-prefetch 型：link 提早對一個域名作 dns 查詢
preconnect 型：link 提早對一個服務器創建 tcp 鏈接
prefetch 型：link 提早取 href 指定的 url 的內容
preload 型：link 提早加載 href 指定的 url
prerender 型：link 提早渲染 href 指定的 url

三、`modulepreload 型的 link`

預先加載一個 JavaScript 的模塊，這樣能保證 JS 模塊沒必要等到執行時才加載。所謂加載，是指完成下載並放入內存，並不會執行對應的 JavaScript。

<!-- 預加載這兩個js，提升性能 -->
<link rel="modulepreload" href="app.js">
<link rel="modulepreload" href="kaimo.js">
<!-- 好比app.js裏import了kaimo.js -->
<script type="module" src="app.js">

四、`stylesheet 型 link`

<link rel="stylesheet" href="xxx.css" type="text/css">

五、`pingback 型 link`

表示本網頁被引用時，應該使用的 pingback 地址，這個機制是一份獨立的標準，遵照 pingback 協議的網站在引用本頁面時，會向這個 pingback url 發送一個消息。

3、a 標籤

3.一、有 `rel` 屬性的種類

下面的跟 link 語義徹底一致，不一樣的是，a 標籤產生的連接是會實際顯示在網頁中的，而 link 標籤僅僅是元信息。

alternate
author
help
license
next
prev
search

3.二、獨有的 rel 類型

tag：表示本網頁所屬的標籤
bookmark：到上級章節的連接·

3.三、輔助的 rel 類型

用於提示瀏覽器或者搜索引擎作一些處理

nofollow：此連接不會被搜索引擎索引
noopener：此連接打開的網頁沒法使用 opener 來得到當前頁面的窗口
noreferrer：此連接打開的網頁沒法使用 referrer 來得到當前頁面的 url
opener：打開的網頁可使用 window.opener 來訪問當前頁面的 window 對象，這是 a 標籤的默認行爲。

4、area 標籤

與 a 標籤很是類似，不一樣的是，它不是文本型的連接，而是 區域型的連接。 area 是整個 html 規則中惟一支持 非矩形熱區的標籤。

shape 屬性支持三種類型前端

圓形：circle 或者 circ，coords 支持三個值，分別表示中心點的 x,y 座標和圓形半徑 r
矩形：rect 或者 rectangle，coords 支持兩個值，分別表示兩個對角頂點 x1，y1 和 x2，y2
多邊形：poly 或者 polygon，coords 至少包括 6 個值，表示多邊形的各個頂點

<!-- area 必須跟 img 和 map 標籤配合使用 -->
<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>

總的來講：a 標籤基本解決了在頁面中插入文字型和整張圖片超連接的須要，若是想要在圖片的某個區域產生超連接，就要用到area 標籤。瀏覽器