HTML中link标签的常见用途与属性说明-html教程-PHP中文网

link标签是html中声明文档与外部资源关系的唯一标准空元素，必须位于内，其rel属性决定浏览器如何处理资源，位置错误或rel值误用将导致预加载失效、图标不显示等问题。

html中link标签的常见用途与属性说明

link 标签不是用来“插入内容”的，而是告诉浏览器：“这个外部资源和当前页面有某种关系，你该按什么方式处理它”。用错 rel 值、乱放位置、忽略 MIME 类型或跨域策略，都会导致样式不生效、图标不显示、预加载失效，甚至触发 CSP 拦截。

这是最常出问题的用法。看似简单，但实际部署中常因路径、MIME 类型或加载时机翻车：

href 路径必须可被浏览器直接请求 —— 相对路径以 HTML 文件所在位置为基准，不是以当前 JS 或 CSS 文件为基准
type 属性虽在 HTML5 中可省略，但若服务端返回的 CSS 响应头里 Content-Type 不是 text/css（比如返回了 application/octet-stream），部分旧版 Safari 或严格模式下的浏览器会拒绝解析
必须放在中，且最好在其他依赖样式的元素（如 <style></style> 或内联 class）之前 —— 放在底部会导致 FOUC（Flash of Unstyled Content）

现代浏览器对图标支持远不止 favicon.ico，但不同 rel 值和 sizes 组合行为差异很大：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

rel="icon" 默认匹配所有尺寸，但 Chrome 120+ 开始优先使用 sizes="32x32" 或 sizes="any" 的条目；没写 sizes 时，某些安卓 WebView 可能忽略 PNG 图标
rel="apple-touch-icon" 是 iOS 专用，不写 sizes 会被强制缩放到 180×180，图像可能模糊；推荐显式声明 sizes="180x180"
多个 link 并存时，浏览器按顺序匹配第一个满足条件的 —— 把 rel="icon" sizes="16x16" 放在最前，可能让高分屏设备错过更清晰的 32×32 版本

这两个都用于资源预加载，但触发时机、缓存策略和浏览器支持度完全不同：

rel="preload" 是“马上就要用”，浏览器会在当前导航中**立即发起请求**，并按 as 属性（如 as="font"）设置正确优先级和 CORS 行为；漏写 as 会导致字体被当成 fetch 处理，触发跨域失败
rel="prefetch" 是“以后可能会用”，浏览器只在空闲时加载，且**不保证执行** —— Chrome 95+ 已默认禁用非同源 prefetch，Edge 也逐步限制；它不会提升当前页性能，仅影响后续跳转
两者都不能用 onload 或 onerror 监听 —— 它们是声明式指令，不是脚本资源；想控制加载逻辑，得用 fetch() + document.fonts.load() 等组合

media 控制的是“是否下载该资源”，而不是“是否应用样式”：

<link rel="stylesheet" href="print.css" media="print"> 在屏幕浏览时**根本不会发请求**，打印预览时才加载 —— 这能节省带宽，但也意味着无法用 JS 动态切换到该样式表（因为资源压根没下载）
media="(max-width: 768px)" 在桌面 Chrome 中加载后，窗口缩小时不会自动卸载；再放大也不会重新加载 desktop.css —— 它只管初始匹配，不监听媒体变化
若需运行时切换，应改用 matchMedia() + 动态创建/移除 link 元素，或统一用单个 CSS 文件配合 @media 规则

最容易被忽略的是：所有 link 的加载都是无序的，浏览器不保证执行顺序 —— 即使你把 A.css 放在 B.css 前面，B.css 若体积小、服务器响应快，仍可能先解析完成。CSS 层叠规则只看选择器权重和源码顺序，跟 link 标签出现顺序无关。