在HTML中， link標籤是一個自閉合元素，通常位於文件的head部分。它用於建立與外部資源的關聯，如樣式表、圖示等。 link標籤具有多個屬性，其中rel和href是最常用的。
rel屬性定義了目前文件與連結資源之間的關係。常見的rel屬性值有：
stylesheet ：表示連結到一個外部CSS樣式表。 icon ：表示連結到網站的圖標，如favicon。 href屬性用於指定連結資源的URL。
一個典型的link標籤範例是：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Website</title> <!-- 連結到外部CSS樣式表--> <link rel="stylesheet" href="styles.css"> <!-- 連結到網站圖示--> <link rel="icon" href="favicon.ico"> </head> <body> <h1>Link!</h1> <p>這是一段link的介紹。 </p> </body> </html>
在這個範例中，我們使用了兩個link標籤。第一個link標籤將HTML文件與外部的CSS樣式表styles.css關聯起來，用於定義頁面的樣式。第二個link標籤將HTML文件與網站圖示favicon.ico關聯起來，當使用者在瀏覽器中開啟這個網站時，會顯示這個圖示。
當然， link標籤還有其他屬性和用途，以下列舉了一些常見的屬性和用例：
type ：此屬性用於指定連結資源的MIME類型。例如，當連結到一個CSS樣式表時，可以指定其類型為text/css 。大多數情況下，瀏覽器可以自動識別資源類型，所以type屬性不是必需的。範例：
<link rel="stylesheet" href="styles.css" type="text/css">
media ：此屬性可讓您指定樣式表適用於哪些媒體類型。例如，您可以建立專門針對列印的樣式表，當使用者列印頁面時使用。範例：
<link rel="stylesheet" href="print.css" media="print">
sizes ：當使用link標籤連結到多個尺寸的圖示時，可以使用sizes屬性指定圖示的大小。這對於根據裝置顯示不同大小圖示的情況很有用。範例：
<link rel="icon" href="icon-48x48.png" sizes="48x48"> <link rel="icon" href="icon-96x96.png" sizes="96x96">
crossorigin ：當連結到跨域資源時，可以使用crossorigin屬性指定資源的CORS（跨來源資源共用）設定。範例：
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity ：此屬性用於確保外部資源的完整性，可與crossorigin屬性一起使用。透過為資源提供一個基於內容的雜湊值（如SHA-256），您可以確保資源未被篡改。範例：
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integrity="sha256-base64-encoded-hash">
preload ： rel="preload"可用於事先載入重要的資源，例如字型、圖片或腳本。這可以優化頁面載入效能。範例：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
這些是link標籤的一些常見屬性和用途。
除了前面提到的， rel還有更多的屬性值：
alternate ：使用rel="alternate"可以提供文件替代版本，例如不同語言的頁面或適用於不同裝置的頁面。範例：
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="only screen and (max-width: 640px)" href="https://link.com/mobile/a">
dns-prefetch ：透過rel="dns-prefetch"可以預先解析域名，以減少DNS查找時間並加快資源載入速度。範例：
<link rel="dns-prefetch" href="//link.com">
preconnect ：與dns-prefetch類似， rel="preconnect"可以預先建立連接到第三方資源的TCP連接，減少建立連接所需的時間。範例：
<link rel="preconnect" href="https://link.com">
prefetch ：使用rel="prefetch"可以預先取得並快取資源，以便在後續頁面中使用。這對於預先載入頁面中可能使用的資源很有用。範例：
<link rel="prefetch" href="pre-page.html">
canonical ：使用rel="canonical"可以為搜尋引擎提供一個頁面的規範URL，有助於避免重複內容問題。範例：
<link rel="canonical" href="https://link.com/a/post">
license ：使用rel="license"可以指定文件的許可證URL。範例：
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest ：使用rel="manifest"可以將Web應用的清單檔案（通常是JSON格式）連結到HTML文件。清單檔案包含了網路應用程式的元數據，如名稱、描述、圖示等。範例：
<link rel="manifest" href="manifest.json">
請注意，不同的瀏覽器對於這些屬性和功能的支援程度可能會有所不同。建議在使用新功能時查閱相關文檔，以確保相容性和功能性。
到此這篇關於HTML中link標籤屬性的具體用法的文章就介紹到這了,更多相關HTML link標籤屬性內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！