Link rel意思

在HTML中，link rel是一個用於定義文檔與外部資源之間關係的屬性。它通常用於指定樣式表、favicon、JavaScript檔案或其他文檔的連結。rel屬性是<link>元素的一個屬性，該元素用於在HTML文檔的頭部（head部分）創建這些連結。

以下是一些常見的link rel值及其含義：

stylesheet - 指定外部樣式表。

<link rel="stylesheet" href="style.css">

icon - 指定網站的圖示，通常是一個favicon。

<link rel="icon" href="favicon.ico" type="image/x-icon">

alternate - 指定文檔的另一種版本，比如不同語言或格式的版本。
```
<link rel="alternate" hreflang="en" href="/en/page.html">
```
preconnect - 用於提前建立與外部域名的連線，以減少延遲。
```
<link rel="preconnect" href="https://fonts.gstatic.com">
```

dns-prefetch - 用於提前解析外部域名。

<link rel="dns-prefetch" href="https://fonts.gstatic.com">

preload - 用於提示瀏覽器預載入關鍵資源，以最佳化頁面載入速度。
```
<link rel="preload" href="critical-resource.js" as="script">
```
canonical - 指定網頁的權威版本，用於解決重複內容問題。
```
<link rel="canonical" href="https://example.com/canonical-page.html">
```
apple-touch-icon - 指定用於iOS設備的主螢幕圖示。
```
<link rel="apple-touch-icon" href="apple-touch-icon.png">
```
manifest - 指定一個Web應用程式清單檔案，用於實現離線功能和套用內導航。
```
<link rel="manifest" href="manifest.json">
```
mask-icon - 指定一個mask-icon，用於創建Material Design風格的圖示。
```
 <link rel="mask-icon" href="mask-icon.svg" color="#ff4444">
```
shortcut - 指定一個書籤圖示，用於瀏覽器書籤欄。
```
 <link rel="shortcut icon" href="shortcut-icon.ico">
```

link rel屬性的值可以是非常特定的，也可以是通用的，具體取決於上下文和需求。在HTML文檔中，你可以包含多個<link>元素，每個元素都可以有不同的rel值，以滿足不同的連結需求。