HTML - <link> 標籤

HTML <link> 標籤指定當前文件與外部資源之間的關係。

<link> 標籤主要用於連結樣式表。它也用於設定站點圖示（包括 favicon 樣式圖示以及移動裝置上的主螢幕和應用程式圖示）。

語法

<link href="..." rel=".."/>

屬性

HTML link 標籤支援 HTML 的全域性和事件屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
crossorigin	anonymous use-credentials	指定元素如何處理跨源請求。
href	URL	指定要連結的頁面。
hreflang	language_code	指定附加連結的語言。
media	media_query	指定連結文件針對的媒體/裝置。
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	指定要與連結一起傳送的引用程式資訊。
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	定義當前文件和連結文件之間的關係。
sizes	HeightxWidth any	指定連結資源的大小。僅限於 rel="icon"。
title		指定首選或備用樣式表。
type	media_type	指定連結文件的媒體型別。

HTML link 標籤示例

下面的示例將說明 link 標籤的用法。在哪裡、何時以及如何使用 link 標籤。在每個示例中，我們都嘗試展示了<link> 標籤的不同用例。

連結外部樣式表

在下面的示例中，我們使用<link> 標籤建立一個外部資源連結元素，以將 CSS 檔案連結到 HTML 檔案。我們將 CSS 檔名 "style.css" 作為源傳遞給 href 屬性，並將 "stylesheet" 傳遞給 rel 屬性源。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <!--create a link tag-->
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

style.css

body{
   background-color: green;
}
h1{
   color: white;
   font-size: 40px;
}

在選項卡上鍊接 favicon

以下是 HTML <link> 標籤的另一個示例。在這裡，我們使用 <link> 標籤及其 rel 和 href 屬性在瀏覽器上建立 favicon。我們將本地影像名稱 "download.png" 作為連結目標傳遞給 href 屬性，並將 rel 屬性源設定為 "icon"。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <!--create a link tag-->
   <link rel="icon" type="image/x-icon" href="download.png">
   <style>
      body {
         background-color: aquamarine;
         font-family: initial;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h1> The
      <pre>
         <link>
      </pre> tag with the favicon icon......
   </h1>
</body>
</html>

使用屬性連結外部資源

在此示例中，我們使用 <link> 標籤及其 rel、href 和 sizes 屬性建立一個外部資源連結，以在瀏覽器上建立和管理 favicon 的大小。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Link Tag</title>
   <!--create a link tag-->
   <link rel="icon" type="image/x-icon" 
         href="simply-easy-learning.png" sizes="500x500">
   <style>
      body {
         background-color: rgb(14, 116, 211);
         font-family: initial;
         font-size: 16px;
         color: white;
      }
   </style>
</head>
<body>
   <h1>favicon with
      <pre>
         <link>
      </pre> tag
   </h1>
</body>
</html>

定義列印媒體

您還可以提供媒體型別或查詢到 media 屬性中，然後只有在媒體條件為真時才會載入此資源。例如 -

如果列印此頁面或在列印預覽中開啟它，您將看到它使用media="print"樣式表進行樣式設定。“print”樣式表包含白色背景上的黑色文字。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Link Tag</title>
   <!--create a link tag-->
   <link href="print.css" rel="stylesheet" media="print" />
   <link href="style.css" rel="stylesheet" 
         media="screen and (max-width: 680px)" />
</head>
<body>
   <h1>The
      <pre>
         <link>
      </pre> tag with media attribute
   </h1>
</body>
</html>

print.css

body{
   background-color: aquamarine;
   color: white;
}

style.css

body{
   background-color: green;
}
h1{
   color: white;
   font-size: 40px;
}

支援的瀏覽器

標籤
link	是	是	是	是	是

html_tags_reference.htm

列印頁面