<link>-外部资源链接
<link> 标签在 HTML 中用于定义文档与外部资源之间的关系，通常用于链接样式表、图标或其他元数据。它的灵活性和多样性使其成为前端开发中不可或缺的一部分。
<link> 标签的基本语法
<link> 标签是一个空元素，不需要闭合标签。它必须位于 <head> 部分，并且可以包含多个属性来定义其行为。基本语法如下：
<link rel="relationship" href="resource-url" type="mime-type" />
其中：
rel属性定义当前文档与链接资源之间的关系。href属性指定链接资源的 URL。type属性（可选）指定链接资源的 MIME 类型。
常见用途
链接外部样式表
最常见的用途是链接外部 CSS 文件：
<link rel="stylesheet" href="styles.css" type="text/css" />
rel="stylesheet" 告诉浏览器这是一个样式表，href 指向 CSS 文件的路径。type="text/css" 在现代浏览器中可以省略，因为 CSS 是默认类型。
链接网站图标（Favicon）
<link> 标签也常用于指定网站图标：
<link rel="icon" href="favicon.ico" type="image/x-icon" />
现代浏览器还支持多种图标格式和尺寸：
<link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180" />
预加载资源
使用 rel="preload" 可以告诉浏览器提前加载重要资源：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
as 属性指定资源类型，帮助浏览器设置正确的优先级和请求头。
链接替代样式表
可以定义多个样式表，允许用户选择：
<link rel="stylesheet" href="default.css" title="Default" />
<link rel="alternate stylesheet" href="high-contrast.css" title="High Contrast" />
<link rel="alternate stylesheet" href="dark-mode.css" title="Dark Mode" />
用户可以通过浏览器界面切换这些样式表。
高级用法
使用媒体查询
media 属性允许根据设备特性加载不同资源：
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)" />
链接文档的规范版本
防止内容重复的 SEO 问题：
<link rel="canonical" href="https://example.com/preferred-url" />
链接 RSS 订阅
<link rel="alternate" type="application/rss+xml" href="feed.xml" title="RSS Feed" />
链接 PWA 清单文件
渐进式 Web 应用使用：
<link rel="manifest" href="app.webmanifest" />
跨域资源处理
crossorigin 属性用于处理跨域资源：
<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
性能优化技巧
DNS 预解析
<link rel="dns-prefetch" href="//cdn.example.com" />
预连接
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
预获取
<link rel="prefetch" href="next-page.html" as="document" />
浏览器兼容性注意事项
虽然大多数现代浏览器都支持 <link> 标签的各种功能，但某些特性需要注意：
- IE11 及更早版本对某些
rel值支持有限 - 移动浏览器可能对预加载资源的处理方式不同
- 某些资源类型可能需要特定的 MIME 类型配置服务器
实际应用示例
完整的头部链接示例
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<link rel="stylesheet" href="/css/main.css">
<link rel="alternate" type="application/rss+xml" href="/feed.xml" title="RSS Feed">
<link rel="canonical" href="https://example.com/current-page">
</head>
动态加载样式表
通过 JavaScript 动态创建 <link> 元素：
function loadStylesheet(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
loadStylesheet('dynamic-styles.css');
安全考虑
使用 <link> 标签时需要注意：
-
确保外部资源来自可信来源
-
使用
integrity属性验证资源完整性：<link rel="stylesheet" href="https://example.com/style.css" integrity="sha384-..." crossorigin="anonymous"> -
谨慎使用
prefetch，避免浪费带宽
调试技巧
在开发者工具中检查 <link> 标签：
- 查看 Network 面板确认资源是否加载
- 检查是否出现 404 错误
- 验证
rel和type属性是否正确 - 使用 Lighthouse 审核预加载效果
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：-文档元数据
下一篇：<style>-内嵌CSS样式
