在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 標簽還有其他屬性和用途，下面列舉了一些常見的屬性和用例：
1. type ：該屬性用于指定鏈接資源的MIME型別，例如，當鏈接到一個CSS樣式表時，可以指定其型別為 text/css ，大多數情況下，瀏覽器可以自動識別資源型別，所以 type 屬性不是必需的，示例：
<link rel="stylesheet" href="styles.css" type="text/css">
2. media ：該屬性允許您指定樣式表適用于哪些媒體型別，例如，您可以創建專門針對列印的樣式表，當用戶列印頁面時使用，示例：
<link rel="stylesheet" href="print.css" media="print">
3. sizes ：當使用 link 標簽鏈接到多個尺寸的圖示時，可以使用 sizes 屬性指定圖示的大小，這對于根據設備顯示不同大小圖示的情況很有用，示例：
<link rel="icon" href="icon-48x48.png" sizes="48x48"> <link rel="icon" href="icon-96x96.png" sizes="96x96">
4. crossorigin ：當鏈接到跨域資源時，可以使用 crossorigin 屬性指定資源的CORS（跨源資源共享）設定，示例：
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
5. integrity ：該屬性用于確保外部資源的完整性，可以與 crossorigin 屬性一起使用，通過為資源提供一個基于內容的哈希值（如SHA-256），您可以確保資源未被篡改，示例：
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integrity="sha256-base64-encoded-hash">
6. preload ： rel="preload" 可以用于提前加載重要的資源，例如字體、圖片或腳本，這可以優化頁面加載性能，示例：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
這些是 link 標簽的一些常見屬性和用途，
除了前面提到的， rel 還有更多的屬性值：
1. 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">
2. dns-prefetch ：通過 rel="dns-prefetch" 可以預先決議域名，以減少DNS查找時間并加快資源加載速度，示例：
<link rel="dns-prefetch" href="//link.com">
3. preconnect ：與 dns-prefetch 類似， rel="preconnect" 可以預先建立連接到第三方資源的TCP連接，減少建立連接所需的時間，示例：
<link rel="preconnect" href="https://link.com">
4. prefetch ：使用 rel="prefetch" 可以預先獲取并快取資源，以便在后續頁面中使用，這對于預加載頁面中可能用到的資源很有用，示例：
<link rel="prefetch" href="pre-page.html">
5. canonical ：使用 rel="canonical" 可以為搜索引擎提供一個頁面的規范URL，有助于避免重復內容問題，示例：
<link rel="canonical" href="https://link.com/a/post">
6. license ：使用 rel="license" 可以指定檔案的許可證URL，示例：
<link rel="license" href="https://link.org/licenses/by/4.0/">
7. manifest ：使用 rel="manifest" 可以將Web應用的清單檔案（通常是JSON格式）鏈接到HTML檔案，清單檔案包含了Web應用的元資料，如名稱、描述、圖示等，示例：
<link rel="manifest" href="manifest.json">
請注意，不同的瀏覽器對于這些屬性和功能的支持程度可能會有所不同，建議在使用新功能時查閱相關檔案，以確保兼容性和功能性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551652.html
標籤：Html/Css
上一篇：2023前端面試題一
下一篇：返回列表