搜尋

載入外部資源 <link>

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

HTML 教學 - 載入外部資源 <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">

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片