( Day 9.3 ) HTML 載入外部資源 <link>

2023 iThome 鐵人賽

DAY 9

Modern Web

跟著 OXXO 一起學 HTML系列第 17 篇

15th鐵人賽 html html教學

oxxo

2023-09-09 00:05:13

440 瀏覽

分享至

<link> 是 HTML 裡負責「載入外部資源」的元素，該元素不會在頁面裡顯示，通常作為標記 favicon 圖示與載入 CSS 檔案使用，這篇教學會介紹 <link> 載入外部資源元素。

原文參考：載入外部資源 link

認識 `<link>`

<link> 是 HTML 裡負責「載入外部資源」的元素，通常作為標記 favicon 圖示與載入 CSS 檔案使用，*該元素會放在 HTML <head> 元素裡，例如下方的 HTML 開啟後，會使用 <link> 載入 CSS 和 favicon 圖示。

<link> 屬於「空元素」，只需要「起始標籤」。

<link> 的內容由一個 rel 屬性搭配 href 屬性所組成。

<!DOCTYPE html>
<html>
<head>
  <title>網頁標題</title>
  <link rel="stylesheet" href="test.css" >
  <link rel="icon" href="/favicon.ico">
</head>
<body>
  <p>網頁內容</p>
</body>
</html>

`<link>` 支援屬性

<link> 並不會在頁面裡顯示，所以雖然支援「全域屬性」卻很少使用，反而都是使用專門的屬性，常用的屬性如下：

屬性	說明
rel	連結資源和頁面的關係。
href	連結資源的網址。
hreflang	連結資源的語系。
media	在何種媒體中連結資源。
referrerpolicy	限制 Referer 送出過多的資訊。
sizes	當 rel="icon" 時，該圖片的尺寸大小。

`<link>` rel 屬性

rel 是 <link> 的必須屬性，表示連結資源和頁面的關係，常用的屬性值如下表所示 ( 完整屬性值參考：Link types )：

屬性值	說明
stylesheet	網頁樣式表的網址。
canonical	網頁的標準網址 ( 如果這個網頁和另外的網頁重複，可將這個頁面指向到另外的網頁，或宣告自己是原始頁面 )。
author	網頁作者的網址。
icon	網頁圖示 Favicon 的網址 ( Favicon 是出現在瀏覽器頁籤或書籤的小圖示 )。
apple-touch-icon	Apple 行動裝置儲存頁面到桌面的圖示網址。
next	下一個頁面的網址。
prev	前一個頁面的網址。
preload	瀏覽器預先載入的資源網址，需要搭配 as 屬性聲明預載類型。
license	版權信息的網址。

下方的 HTML 開啟後，會預先載入外部 CSS 和 JavaScript 檔案、設定 Favicon 圖示以及宣告這個頁面的標準網址。

<!DOCTYPE html>
<html>
<head>
  <title>網頁標題</title>
  <!-- 預載 CSS 和 JavaScript -->
  <link rel="preload" href="test.css" as="style" >
  <link rel="preload" href="test.js" as="script" >
  <!-- 載入 CSS -->
  <link rel="stylesheet" href="test.css" >
  <!-- 載入 Favicon 圖示 -->
  <link rel="icon" href="/favicon.ico">
  <!-- 宣告這個頁面的標準網址 -->
  <link rel="canonical" href="https://steam.oxxostudio.tw">
</head>
<body>
  <p>網頁內容</p>
  <!-- 載入 JavaScript -->
  <script src="test.js" ></script>
</body>
</html>

`<link>` href 屬性

<link> 的 href 屬性表示要載入的網址，會在指定 rel 後進行設定。

`<link>` hreflang 屬性

<link> 的 hreflang 屬性表示連結網址的語系，通常會搭配 rel 標示上一頁、下一頁、作者資訊或版權頁面使用 ( 讓瀏覽器預先知道語系 )，以下方的 HTML 為例，標示下一頁是中文語系，前一頁是英文語系。

<!DOCTYPE html>
<html>
<head>
  <title>網頁標題</title>
  <link rel="next" href="a03.html" hreflang="zh-tw">
  <link rel="prev" href="a01.html" hreflang="en">
</head>
<body>
  <p>網頁內容</p>
</body>
</html>

`<link>` media 屬性

<link> 的 media 屬性表示特定的「媒體」( 列印、裝置或解析度...等 )，可以載入特定連結的網址，常用的屬性值如下：

屬性值	說明
all	全部媒體都可用。
print	列印。
screen	螢幕顯示。
speech	語音讀取。
orientation	裝置方向，可設定 portrait 垂直或 landscape 水平。
min-aspect-ratio	最小螢幕長寬比例，例如 4/3。
max-aspect-ratio	最大螢幕長寬比例，例如 16/9。
min-width	最小螢幕寬度，例如 1024px。
max-width	最大螢幕寬度，例如 1920px。
min-height	最小螢幕高度，例如 768px。
max-height	最大螢幕高度，例如 960px。
min-resolution	最小解析度，例如 96dpi。
max-resolution	最大解析度，例如 300dpi。

以下方的 HTML 為例，印刷時會使用 print.css，在大螢幕瀏覽時使用 big.css，其他狀態瀏覽時使用 default.css。

<!DOCTYPE html>
<html>
<head>
  <title>網頁標題</title>
  <link rel="stylesheet" href="print.css" media="print">
  <link rel="stylesheet" href="big.css" media="screen and (min-width:1024px)">
  <link rel="stylesheet" href="default.css" media="screen">
</head>
<body>
  <p>網頁內容</p>
</body>
</html>

屬性值支援 and、or ( 使用逗號 )、not 的寫法，以下方的 HTML 為例，印刷和大螢幕瀏覽時會使用 print.css，其他狀態瀏覽時使用 default.css。

<!DOCTYPE html>
<html>
<head>
  <title>網頁標題</title>
  <link rel="stylesheet" href="print.css" media="print and (min-width:1024px)">
  <link rel="stylesheet" href="default.css" media="screen">
</head>
<body>
  <p>網頁內容</p>
</body>
</html>

`<link>` referrerpolicy 屬性

當使用者訪問網站時，會發送請求 ( request ) 給網站的伺服器，發出請求的 header 中會有包含 Referrer 訊息，當中會紀錄這個網頁是從哪裡連結以及一些使用者資訊，<link> 的 referrerpolicy 屬性主要用來限制回傳的網址詳細程度，相關屬性值如下：

屬性值	說明
no-referrer	不發送 referrer info。
no-referrer-when-downgrade	HTTPS 到 HTTP 時，不發送 referrer info。
origin	只發送 scheme、host 和 port。
origin-when-cross-origin	跨網域時只發送 scheme、host 和 port，同網域包含 path。
same-origin	只有同網域時發送 referrer info。
strict-origin	安全級別相同時 ( HTTPS 到 HTTPS ) 發送 referrer info。
strict-origin-when-cross-origin	不向安全性較低的目的地發送 header。
unsafe-url	發送 origin、path 和 query string。

`<link>` sizes 屬性

如果設定了 <link> 的 Favicon 圖示，則可以使用 sizes 屬性定義該圖示原始大小，例如下方的 HTML 所使用的圖示尺寸就是 16x16。

<link rel="icon" href="/favicon.ico" sizes="16x16">

跟著 OXXO 一起學 HTML系列第 17 篇