您现在的位置是：网站首页 > <link>-外部资源链接文章详情
<link>-外部资源链接
陈川
【
HTML
】
4040人已围观
2595字
<link> 标签在 HTML 中用于定义文档与外部资源之间的关系，通常用于链接样式表、图标或其他元数据。它的灵活性和多样性使其成为前端开发中不可或缺的一部分。
<link> 标签的基本语法
<link> 是一个空元素，不需要闭合标签。它必须位于 <head> 部分，通过属性来定义资源类型和位置。基本语法如下：
<link rel="stylesheet" href="styles.css">
核心属性
rel：定义当前文档与链接资源的关系，例如stylesheet、icon等。href：指定外部资源的路径。type（可选）：定义资源的 MIME 类型，例如text/css。media（可选）：指定资源适用的设备或媒体类型，如screen或print。
常见用途与示例
链接外部样式表
最常见的用途是链接 CSS 文件：
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
如果针对打印设备单独设计样式，可以添加 media="print"：
<link rel="stylesheet" href="print.css" media="print">
添加网站图标（Favicon）
通过 rel="icon" 指定浏览器标签页或书签显示的图标：
<link rel="icon" href="favicon.ico" type="image/x-icon">
现代浏览器支持多种图标格式（如 PNG、SVG），甚至可以根据设备特性选择不同图标：
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
预加载关键资源
使用 rel="preload" 提前加载重要资源（如字体、脚本），提升页面性能：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
多平台适配
通过 rel="alternate" 提供不同格式或语言的文档版本：
<link rel="alternate" href="feed.xml" type="application/rss+xml" title="RSS Feed">
<link rel="alternate" hreflang="es" href="es/">
高级应用场景
使用 media 属性实现响应式设计
根据屏幕宽度加载不同的 CSS 文件：
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 601px)">
链接多个样式表实现模块化
拆分 CSS 功能模块，按需加载：
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">
动态切换主题
通过 JavaScript 修改 <link> 的 href 实现主题切换：
<link id="theme" rel="stylesheet" href="light-theme.css">
<button onclick="document.getElementById('theme').href='dark-theme.css'">
切换暗黑模式
</button>
兼容性与注意事项
旧版本浏览器的处理
IE6-9 对 <link> 的支持有限，需注意：
- 使用
<!--[if IE]>条件注释加载额外样式。 - 避免过多
<link>标签（早期浏览器有并行加载限制）。
性能优化建议
- 合并文件：减少 HTTP 请求数量。
- 使用 CDN：加速资源加载。
- 添加
crossorigin：当加载字体等跨域资源时需声明：
<link rel="preload" href="https://cdn.example.com/font.woff2" as="font" crossorigin>
其他资源类型
链接文档的授权信息
通过 rel="license" 声明版权许可：
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
关联 PWA 应用清单
渐进式 Web 应用（PWA）中链接 manifest.json：
<link rel="manifest" href="/manifest.json">
预连接关键域名
使用 rel="preconnect" 提前建立 DNS 查询和 TCP 握手：
<link rel="preconnect" href="https://api.example.com">
上一篇： <meta>-文档元数据
下一篇： <style>-内嵌CSS样式
