您现在的位置是：网站首页 > <link>-资源链接文章详情
<link>-资源链接
陈川
【
HTML
】
38066人已围观
2738字
<link> 标签是 HTML 中用于定义文档与外部资源关系的元素，通常出现在 <head> 部分。它不渲染任何内容，但对页面样式、图标、预加载等功能的实现至关重要。
<link> 标签的基本语法
<link> 是一个空元素，不需要闭合标签。它的核心属性包括 rel、href 和 type，其中 rel 和 href 是必填项。基本语法如下：
<link rel="stylesheet" href="styles.css" type="text/css">
rel：定义当前文档与链接资源的关系（如stylesheet、icon）。href：指定资源的 URL。type（可选）：资源的 MIME 类型（如text/css、image/x-icon）。
常见用途与示例
1. 引入外部样式表
最常见的用途是链接 CSS 文件：
<link rel="stylesheet" href="theme.css">
如果样式表针对特定媒体（如打印），可添加 media 属性：
<link rel="stylesheet" href="print.css" media="print">
2. 设置网站图标（Favicon）
通过 rel="icon" 指定浏览器标签页图标：
<link rel="icon" href="favicon.ico" type="image/x-icon">
现代浏览器支持多种图标格式，还可指定尺寸：
<link rel="icon" href="icon-192.png" type="image/png" sizes="192x192">
3. 预加载关键资源
使用 rel="preload" 提前加载重要资源（如字体、脚本）：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
as 属性告知浏览器资源类型，优化加载优先级。
4. 定义规范 URL
防止重复内容 SEO 问题，指定页面的权威链接：
<link rel="canonical" href="https://example.com/page">
5. 替代样式表
提供用户可切换的样式（需浏览器支持）：
<link rel="alternate stylesheet" href="dark.css" title="Dark Mode">
高级用法与属性
跨域资源处理
通过 crossorigin 属性处理跨域请求（如字体文件）：
<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous">
响应式设计适配
结合 media 属性实现条件加载：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">
多平台图标配置
适配不同设备的主屏幕图标：
<link rel="apple-touch-icon" href="apple-icon-180x180.png">
<link rel="manifest" href="site.webmanifest">
实际开发中的注意事项
-
性能优化：
避免过多<link>请求，合并 CSS 或用preload优化关键路径。 -
缓存控制：
对静态资源添加版本号或哈希：<link rel="stylesheet" href="styles.a1b2c3.css"> -
失效备选方案：
当 CDN 资源不可用时回退本地文件：<link rel="stylesheet" href="https://unstable-cdn.com/style.css"> <script> window.onload = function() { if (!document.querySelector('link[href*="unstable-cdn"]').sheet) { const fallback = document.createElement('link'); fallback.rel = 'stylesheet'; fallback.href = 'local-style.css'; document.head.appendChild(fallback); } }; </script>
与其他标签的协作
<link> 常与 <meta> 或 <script> 配合使用。例如，预加载后立即执行脚本：
<link rel="preload" href="critical.js" as="script">
<script src="critical.js" defer></script>
浏览器兼容性差异
-
preload在旧版浏览器中可能无效，需用 polyfill：<link rel="preload" href="image.webp" as="image" type="image/webp"> <!-- 回退 --> <link rel="prefetch" href="image.webp"> -
Safari 对某些
rel值（如modulepreload）支持较晚。
上一篇： <base>-基准URL
下一篇： 安全加固与漏洞防护
