<link>: 外链资源标签
最后更新：2026-10-13
<link>外链资源标签
定义当前文档与外部资源的关系，最常见是引入 CSS 样式表，也可做图标、预加载等。
| 分类 | 元数据 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 自闭合 — 无需闭合标签 |
| 状态 | 标准 |
📝 语法
<link rel="stylesheet" href="style.css">⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
rel | 关系类型：stylesheet、icon、preload、alternate 等。 | |
href | 外部资源的地址。 | |
type | 资源的 MIME 类型（如 text/css）。 | |
media | 资源适用的媒体/设备条件（如 print、screen）。 | |
sizes | 图标尺寸，用于 icon（如 32x32）。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <link> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： link 是空元素；rel=stylesheet 是最常用写法，决定页面外观。
❓ 常见问题
Qlink 的 rel 属性有哪些常用值？
A样式表
stylesheet、站点图标 icon、预加载 preload/prefetch/preconnect、规范链接 canonical、多语言标注 alternate、RSS alternate type='application/rss+xml'。rel 决定 link 的用途，是它的灵魂属性。Qpreload 和 prefetch 有什么区别？
A
preload：「当前页面马上要用」的关键资源（首屏字体、关键 CSS），高优先级立即加载；prefetch：「下一页可能要用」的资源，空闲时低优先级加载。用错会浪费带宽——当前页资源 preload，跨页资源 prefetch。Qfavicon 用 link 怎么配置？
A现代写法：
<link rel='icon' href='/favicon.ico' sizes='any'> 加 <link rel='icon' type='image/svg+xml' href='/icon.svg'>；苹果触屏图标用 rel='apple-touch-icon'。不写 link 时浏览器也会默认请求 /favicon.ico。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
