html中link標簽的屬性總結

Html中Link

link是html外部資源鏈接元素，規定了當前文檔與外部資源的關系

---

常用場景

1. 鏈接一個外部的樣式表

   <link href="main.css" rel="stylesheet">

2. 創建站點圖標

   <link rel="icon" href="favicon.ico">

   擴展用法：指定rel="apple-touch-icon"，當在ios設備上使用添加到主屏按鈕將網站添加到主屏幕上時，會使用該指定的圖標資源作為添加到主屏上的圖標。

   <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114.png" type="image/png">

   <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-114.png" type="image/png">

   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-icon-114.png" type="image/png">

   不同設備會自動選用相對應的sizes屬性的圖標，系統會自動對設置的圖標添加圓角和高光，如果不想用該效果，可以將apple-touch-icon改為apple-touch-icon-precomposed

3. 提供了media屬性，可以根據不同的媒體條件加載不同的資源

   <link href="print.css" rel="stylesheet" media="print">

   <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

4. rel屬性設置preload、prefetch預加載提升頁面加載性能，crossorigin屬性設置是否使用CORS請求提供安全特性

   <link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

屬性

• rel

  命名鏈接文檔和當前文檔的關系，常用值有下

  1. dns-prefetch
     提示瀏覽器該資源需要在用戶點擊鏈接之前進行DNS查詢和協議握手

  2. icon
     定義代表頁面的資源圖標，media，type和sizes屬性允許瀏覽器選擇其上下文中最合適的圖標.如果多種資源符合條件，瀏覽器會選擇最后一個

  3. modulepreload
     更早和更高優先級的加載模塊依賴腳本，可以極大提高大型依賴樹的解析請求效率。

     <link rel="modulepreload" href="lib.mjs">

     <script type="module" src="main.mjs"></script>

     // main.mjs

     import { func } from './lib.mjs'

  4. preload
     使瀏覽器預加載當前頁面所需的腳本、樣式等文件，而不是等到解析script和link標簽時才加載。可以使資源更早的下載並可用，更不易阻塞頁面的初步渲染，進而提升性能。實驗有效，需要使用as屬性指定資源類型。

     <link rel="preload" href="index.js" as="script"/>

  5. prefetch
     使瀏覽器預加載其他頁面會用到的資源，不會在當前頁面渲染時加載資源，而是利用瀏覽器空閑時間來下載，當進入下一頁面時就直接從disk cache里面取，既不影響當前頁面渲染，又提高了其他頁面加載渲染的速度。實驗有效，在其他頁面中會顯示該資源從prefetch cache中獲取，不用指定as屬性。

     <link rel="prefetch" href="next.js" />

  6. prerender
     建議瀏覽器事先獲取鏈接的資源，並建議將預取的內容顯示在屏幕外，以便在需要時可以將其快速呈現給用戶，使用chrome試驗沒有生效。

  7. subresource
     指定當前頁面最高優先級的資源，會優先加載該資源，實驗發現沒有效果.

     <link rel="subresource" href="styles.css">

  8. stylesheet
     定義要用作樣式表的外部資源

• as

  該屬性僅在<link>元素設置了 rel="preload" 時才能使用。它規定了<link>元素加載的內容的類型，對於內容的優先級、請求匹配、正確的內容安全策略的選擇以及正確的 Accept 請求頭的設置，這個屬性是必需的。

• crossorigin

  此枚舉屬性指定在加載相關資源時是否必須使用 CORS. 啟用 CORS 的圖片 可以在 <canvas> 元素中重復使用, 並避免其被污染. 可取的值如下:

  1. anonymous
     會發起一個跨域請求(即包含 Origin: HTTP 頭). 但不會發送任何認證信息 (即不發送 cookie, X.509 證書和 HTTP 基本認證信息). 如果服務器沒有給出源站憑證 (不設置 Access-Control-Allow-Origin: HTTP 頭), 資源就會被污染並限制使用。

  2. use-credentials
     會發起一個帶有認證信息 (發送 cookie, X.509 證書和 HTTP 基本認證信息) 的跨域請求 (即包含 Origin: HTTP 頭). 如果服務器沒有給出源站憑證 (不設置 Access-Control-Allow-Origin: HTTP 頭), 資源就會被污染並限制使用。

  3. 當不設置此屬性時，資源將會不使用 CORS 加載 (即不發送 Origin: HTTP 頭)，這將阻止其在 <canvas> 元素中進行使用。若設置了非法的值，則視為使用 anonymous。

• href

  此屬性指定被鏈接資源的URL。 URL 可以是絕對的，也可以是相對的。

• importance

  指示資源的相對重要性，只有存在rel=“preload”或rel=“prefetch”時，importance屬性才能用於<link>元素。 優先級提示使用以下值委托：

  1. auto 表示沒有偏好。 瀏覽器可以使用其自己的啟發式方法來確定資源的優先級。

  2. high 向瀏覽器指示資源具有高優先級。

  3. low 向瀏覽器指示資源的優先級較低。

• integrity

  是當前資源文件的哈希值，以base64編碼的方式加密，這樣用戶能用它來驗證一個獲取到的資源,在傳送時未被非法篡改。

• media

  這個屬性規定了外部資源適用的媒體類型。它的值必須是"媒體查詢"。這個屬性使得用戶代理能選擇最適合設備運行的媒體類型。

• sizes

  這個屬性定義了包含相應資源的可視化媒體中的icons的大小，它只有在rel包含icon的link類型值中生效。

• type

  這個屬性被用於定義鏈接的內容的類型，這個屬性的值應該是像text/html，text/css等MIME類型。