html中link标簽的屬性總結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- 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

  類型。