link（外部資源關係）

• 規定了外部資源與當前文檔的關係
  • 常於連接樣式表<link href="/media/examples/link-element-example.css" rel="stylesheet">
  • 用來建立站點圖標
    • 桌面標籤頁圖標<link rel="icon" href="favicon.ico">或<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    • 移動主屏圖標
• 若是使用了 itemprop 屬性, 則爲 flow content 和 phrasing content。
  • itemprop 屬性：微數據標記，採用鍵值對，用來讓機器識別某個數據的語義。例如個人名字是<span itemprop="name">王富強</span>產生鍵值對name = '王富強'讓機器識別‘王富強’爲姓名
  • flow content：流式元素，例如div等
  • phrasing content：短語元素，流式元素中的一種，例如span
• 這個元素可用來爲導航定義一個關係框架

屬性

• 可使用 全局屬性.

rel

• 此屬性指明被連接文檔對於當前文檔的關係。
• 這個屬性必定得是一個由空格分開的連接類型值的列表。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
• 這個屬性最一般的用法是指向一個鏈接到外部樣式表的連接：將rel的值設置爲stylesheet，href屬性設置爲外部樣式表的URL來構造網頁。
• 網絡電視還支持使用下一個rel的值在一系列頁面中預加載下一個頁面。

icon

• 蘋果的IOS系統並不支持這個屬性，因而蘋果的IPhone以及IPad使用非標準的類型值去定義：apple-touch-icon、apple-touch-startup-icon、apple-touch-startup-image

media

• 這個屬性規定了外部資源適用的媒體類型。（css媒體查詢）
• 它的值必須是"媒體查詢"。https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
• 能夠和 type and sizes 屬性配合，容許瀏覽器選擇其上下文中最合適的圖標.若是多種資源符合條件，瀏覽器會選擇最後一個。

type

• 這個屬性被用於定義連接的內容的類型。
• 這個屬性的值應該是像text/html，text/css等MIME類型。
• 這個屬性經常使用的用法是定義連接的樣式表，最經常使用的值是代表了CSS的text/css。

sizes

• 這個屬性定義了包含相應資源的可視化媒體中的icons的大小。
• 只有在rel包含 icon 時使用，有以下的規則
  • any，意味着這個icon可以被縮放到任意尺寸當它是矢量形式，好比image/svg+xml。
  • 一個由空白符分隔的尺寸列表。每個都以 width x height （以像素爲單位）給出。（尺寸列表中的每個尺寸都必須包含在資源裏？）
    • 大多數的icon格式只能存儲一個icon。所以絕大多數使用 sizes時只包含一個值。
• 蘋果iOS不支持 sizes 屬性

as

• 該屬性僅在<link>元素設置了 rel="preload" （預加載）時才能使用，規定了<link>元素加載的
  • 內容的類型
  • 內容的優先級
  • 請求匹配？
  • 正確的內容安全策略？
  • 正確的 Accept請求頭的設置（Accept請求頭：用來告知服務器可以接收的內容類型）

crossorigin

• 此枚舉屬性指定在加載相關圖片時是否必須使用 CORS.
• 啓用 CORS 的圖片 能夠在 <canvas> 元素中使用, 並避免其被污染。（不經過 CORS 就能夠在畫布中使用圖片，但會致使畫布被污染 toBlob(), toDataURL() 或 getImageData() 方法禁止調用）
• 可取的值以下:
  • anonymous：會發起一個跨域請求(即包含 Origin: HTTP 頭). 但不會發送任何認證信息 (即不發送 cookie, X.509 證書和 HTTP 基本認證信息). 若是服務器沒有給出源站憑證 (不設置 Access-Control-Allow-Origin: HTTP 頭), 這張圖片就會被污染並限制使用.
  • use-credentials：會發起一個帶有認證信息 (發送 cookie, X.509 證書和 HTTP 基本認證信息) 的跨域請求 (即包含 Origin: HTTP 頭). 若是服務器沒有給出源站憑證 (不設置 Access-Control-Allow-Origin: HTTP 頭), 這張圖片就會被污染並限制使用.
  • 當不設置此屬性時, 資源將會不使用 CORS 加載 (即不發送 Origin: HTTP 頭), 這將阻止其在 <canvas> 元素中進行使用. 若設置了非法的值, 則視爲使用 anonymous.

href

• 此屬性指定被連接資源的URL。 URL 能夠是絕對的，也能夠是相對的。

hreflang

• 此屬性指明瞭被連接資源的語言. 其意義僅供參考。
• 僅當設置了 href 屬性時才應設置該屬性。

示例

提供可替換的樣式表

• 用戶能夠在瀏覽器菜單 "查看>頁面樣式" 來選擇網頁的樣式。經過這一辦法，能夠用多種樣式瀏覽網頁。

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

樣式表加載事件

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

高分辨率圖標

• 這些元素涵蓋的東西提供一個高分辨率圖標，這些高分辨率圖標當網站保存到iPad的主屏幕時使用。？

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">