載入外部資源 <link>
<link> 是 HTML 裡負責「載入外部資源」的元素，該元素不會在頁面裡顯示，通常作為標記 favicon 圖示與載入 CSS 檔案使用，這篇教學會介紹 <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 | 全部媒體都可用。 |
| 列印。 | |
| 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">
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～