# HTML中`<link>`標簽的示例分析
## 引言
`<link>`標簽是HTML中用于建立文檔與外部資源關系的關鍵元素，通常出現在文檔的`<head>`部分。本文將通過多個示例詳細分析其功能、屬性及實際應用場景。
---
## 一、基本語法與核心屬性
```html
<link rel="relationship_type" href="resource_url" [attributes]>
rel：定義當前文檔與鏈接資源的關系
<!-- 引入CSS樣式表 -->
<link rel="stylesheet" href="styles.css">
href：指定資源路徑（絕對/相對URL）| 屬性 | 作用示例 |
|---|---|
type |
type="text/css" |
media |
media="print" |
sizes |
sizes="16x16"（配合圖標） |
crossorigin |
跨域請求控制 |
<head>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css">
</head>
<!-- 多尺寸favicon -->
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-icon.png">
<!-- 提前加載首屏關鍵資源 -->
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preload" href="critical.js" as="script">
<!-- 用戶可切換的主題 -->
<link rel="stylesheet" href="default.css" title="默認">
<link rel="alternate stylesheet" href="dark.css" title="暗黑模式">
media屬性實現響應式<!-- 打印樣式 -->
<link rel="stylesheet" media="print" href="print.css">
<!-- 屏幕寬度適配 -->
<link rel="stylesheet" media="(min-width: 1024px)" href="desktop.css">
<!-- DNS預解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">
<!-- 預連接 -->
<link rel="preconnect" href="https://api.example.com">
<!-- 預獲取 -->
<link rel="prefetch" href="next-page.html">
<!-- 中文版本 -->
<link rel="alternate" hreflang="zh" href="https://example.com/zh/">
<!-- 英文版本 -->
<link rel="alternate" hreflang="en" href="https://example.com/en/">
integrity進行子資源驗證<link rel="stylesheet"
href="https://cdn.example/bootstrap.css"
integrity="sha384-xxxxx">
<link rel="manifest" href="/app.webmanifest">
<link rel="alternate" type="application/rss+xml"
href="/feed.xml" title="最新文章">
<link>是自閉合標簽<link>放在<body>中（雖然HTML5允許但不符合最佳實踐）rel="preload"和rel="prefetch"preloadmedia或onload屬性
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
crossorigin正確加載CDN資源| 功能 | Chrome | Firefox | Safari |
|---|---|---|---|
基本<link>支持 |
1.0+ | 1.0+ | 1.0+ |
preload |
50+ | 56+ | 11+ |
modulepreload |
66+ | 不支持 | 不支持 |
<link>標簽作為HTML資源連接的樞紐，從基礎的樣式表加載到現代性能優化都發揮著重要作用。合理運用其多樣化功能可以顯著提升網頁性能和用戶體驗。建議開發者根據實際需求組合使用不同屬性，并定期關注新特性的瀏覽器支持情況。
“`
注：本文示例代碼已通過HTML5驗證，實際使用時請注意根據項目需求調整屬性值。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
