.jpg)
link標(biāo)簽常見用途包括引入css樣式表、定義網(wǎng)站圖標(biāo)、預(yù)加載資源、聲明rss訂閱源、指定替代樣式表、聲明作者信息。其最核心的用途是通過rel=”stylesheet”引入外部css文件，從而美化網(wǎng)頁并提升表現(xiàn)力；此外，使用rel=”icon”可設(shè)置瀏覽器標(biāo)簽頁顯示的小圖標(biāo)；rel=”preload”可用于預(yù)加載關(guān)鍵資源以優(yōu)化性能；rel屬性還支持prefetch、alternate、canonical等值，用于導(dǎo)航預(yù)獲取、多語言支持、SEO優(yōu)化等場景；media屬性可控制樣式表的應(yīng)用條件，如屏幕或打印樣式；link標(biāo)簽通常放在
中以確保渲染前加載樣式，但預(yù)加載資源也可置于中合適位置；引入外部資源時(shí)需注意安全問題，推薦啟用subresource integrity（sri）機(jī)制校驗(yàn)資源完整性，防止惡意篡改。
link標(biāo)簽主要用于在html文檔中鏈接外部資源，比如樣式表（CSS）、網(wǎng)站圖標(biāo)（favicon）、預(yù)加載資源等。它不直接在頁面上顯示任何內(nèi)容，而是告訴瀏覽器如何處理文檔或如何獲取額外的資源。
link標(biāo)簽的作用，可以理解為給HTML頁面“穿衣服”、“戴帽子”，讓它更漂亮、功能更完善。
將詳細(xì)介紹link標(biāo)簽的各種用途和屬性。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
link標(biāo)簽有哪些常見的用途？
link標(biāo)簽最常見的用途是引入外部CSS樣式表，這是網(wǎng)頁美化的基礎(chǔ)。除此之外，它還能用于：
- 定義網(wǎng)站圖標(biāo)（favicon）： 在瀏覽器標(biāo)簽頁或書簽欄顯示的小圖標(biāo)。
- 預(yù)加載關(guān)鍵資源： 提前加載圖片、字體等資源，優(yōu)化頁面加載速度。
- 聲明網(wǎng)站的RSS訂閱源： 方便用戶訂閱網(wǎng)站內(nèi)容。
- 指定替代樣式表： 允許用戶選擇不同的頁面樣式。
- 聲明網(wǎng)站的作者或版權(quán)信息： 雖然不常用，但可以提供一些元數(shù)據(jù)。
如何使用link標(biāo)簽引入CSS樣式表？
這是link標(biāo)簽最經(jīng)典的應(yīng)用。你需要將CSS文件保存在服務(wù)器上，然后在HTML文檔的
部分使用link標(biāo)簽引入它。
<!DOCTYPE html> <html> <head> <title>我的網(wǎng)頁</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>歡迎來到我的網(wǎng)站</h1> <p>這是一個(gè)段落。</p> </body> </html>
rel=”stylesheet” 告訴瀏覽器這是一個(gè)樣式表，href=”style.css” 指定了CSS文件的路徑。 注意文件路徑的正確性，相對(duì)路徑和絕對(duì)路徑都可以，但推薦使用相對(duì)路徑，方便網(wǎng)站遷移。
如何使用link標(biāo)簽設(shè)置網(wǎng)站圖標(biāo)（favicon）？
網(wǎng)站圖標(biāo)是網(wǎng)站的“名片”，能提升品牌形象。
<link rel="icon" href="favicon.ico" type="image/x-icon">
rel=”icon” 表示這是一個(gè)圖標(biāo)，href=”favicon.ico” 指定了圖標(biāo)文件的路徑。type=”image/x-icon” 指定了圖標(biāo)的MIME類型。現(xiàn)在更推薦使用PNG格式的圖標(biāo)，并使用type=”image/png”。 還可以根據(jù)不同設(shè)備設(shè)置不同大小的圖標(biāo)，使用sizes屬性。
link標(biāo)簽的rel屬性還有哪些其他值？
rel屬性定義了當(dāng)前文檔與被鏈接文檔之間的關(guān)系。除了stylesheet和icon之外，還有很多其他有用的值：
- preload: 預(yù)加載資源，提高頁面加載速度。
- prefetch: 預(yù)獲取資源，用于后續(xù)頁面導(dǎo)航。
- alternate: 定義替代樣式表或翻譯版本。
- canonical: 指定首選URL，避免重復(fù)內(nèi)容。
- pingback: 用于接收來自其他網(wǎng)站的pingback通知。
不同的rel值有不同的用途，合理使用可以優(yōu)化網(wǎng)站性能和SEO。
如何使用link標(biāo)簽進(jìn)行資源預(yù)加載？
預(yù)加載是一種優(yōu)化技術(shù)，可以提前加載關(guān)鍵資源，減少頁面加載時(shí)間。
<link rel="preload" href="image.png" as="image"> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="script.js" as="script">
rel=”preload” 告訴瀏覽器預(yù)加載資源，href 指定了資源路徑，as 屬性指定了資源類型，比如image、style、script等。 as屬性非常重要，瀏覽器需要知道資源類型才能正確處理。
link標(biāo)簽中的media屬性有什么作用？
media屬性允許你根據(jù)不同的媒體類型應(yīng)用不同的樣式表。例如，你可以為屏幕顯示和打印分別設(shè)置不同的樣式。
<link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="print.css" media="print">
media=”screen” 表示樣式表只應(yīng)用于屏幕顯示，media=”print” 表示樣式表只應(yīng)用于打印。 還可以使用更復(fù)雜的媒體查詢，例如media=”screen and (max-width: 600px)”，表示樣式表只應(yīng)用于屏幕寬度小于600像素的設(shè)備。
link標(biāo)簽應(yīng)該放在HTML文檔的哪個(gè)位置？
通常情況下，link標(biāo)簽應(yīng)該放在HTML文檔的
部分。這是因?yàn)闉g覽器在渲染頁面之前需要先加載樣式表，這樣可以避免頁面出現(xiàn)“閃爍”或“無樣式內(nèi)容”的情況。
不過，對(duì)于使用rel=”preload”進(jìn)行預(yù)加載的資源，可以放在
中，但要確保在需要使用資源之前加載完成。
使用link標(biāo)簽引入外部資源時(shí)，有哪些需要注意的安全問題？
引入外部資源存在一定的安全風(fēng)險(xiǎn)，比如跨站腳本攻擊（xss）。 要確保引入的資源來自可信的來源，避免引入惡意代碼。
可以使用Subresource Integrity (SRI) 來驗(yàn)證資源的完整性。SRI通過比較下載資源的哈希值和預(yù)期的哈希值，確保資源沒有被篡改。
<link rel="stylesheet" href="https://example.com/style.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Gqq8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous">
integrity 屬性指定了資源的哈希值，crossorigin=”anonymous” 表示以匿名模式加載資源。
.png)
