HTML中link外部资源引用方法 HTML中link标签rel属性常用值解析
rel属性是浏览器行为的强制开关，决定资源加载、安全上下文及SEO语义：stylesheet必显式声明，preload需as属性且高优先级，prefetch低优先级后台预取，noopener/noreferrer仅对a标签有效防XSS。
rel 属性不是可有可无的装饰，它直接决定浏览器是否加载资源、如何加载、是否参与渲染、是否影响安全上下文，甚至被搜索引擎当作语义信号。用错值，轻则资源不加载，重则引入 XSS 风险或破坏预加载逻辑。rel="stylesheet" 是唯一全兼容且必须显式声明的值
所有浏览器都支持 rel="stylesheet"，但其他值支持度参差不齐——比如 rel="search" 在 Opera 和 Safari 中不生效，rel="sidebar" 在 IE/Safari/Chrome 中被忽略。
关键点在于：rel 是强制属性，<link> 没有 rel 就是无效标签，浏览器会跳过解析。即使你只写 <link href="theme.css">，也不会加载 CSS。
- 必须搭配
href，且路径需正确；相对路径以 HTML 文档位置为基准，不是以当前 JS 执行位置 - 不支持
disabled属性控制开关——设disabled="true"仍会发起请求，只是不应用样式 - 多个
rel="stylesheet"会按顺序级联，后加载的规则可覆盖前面同选择器的声明
rel="preload" 和 rel="prefetch" 容易混淆但行为完全不同
rel="preload" 是高优先级、强制、同步触发的资源提前加载；rel="prefetch" 是低优先级、空闲时才执行、不保证完成的后台预取。
常见错误是把字体或关键 JS 写成 prefetch，结果首屏渲染卡顿；或者给非关键图片加 preload，挤占带宽反而拖慢主资源。
立即学习“前端免费学习笔记（深入）”；
-
rel="preload"必须带as属性（如as="font"、as="script"），否则多数浏览器忽略 -
as="font"要求 CORS 支持，否则加载失败且不触发onerror -
rel="prefetch"不阻塞页面解析和渲染，适合下一屏可能访问的页面或 JS chunk - 两者都不改变文档结构或语义，仅影响资源获取时机
rel="icon"、rel="alternate"、rel="next"/"prev" 影响的是客户端工具链而非渲染
这些值不会让页面“看起来不同”，但会影响浏览器 UI、RSS 阅读器识别、分页预连接等隐性行为。
例如 rel="icon" 缺失，标签页显示默认图标；rel="alternate" 带 type="application/rss+xml"，Firefox 地址栏会出现 RSS 订阅按钮；rel="next" 被 Chrome 用于推测用户动线并预建立连接。
-
rel="icon"推荐同时提供.ico和.png（用sizes区分），避免在高 DPI 设备上模糊 -
rel="alternate"用于多语言时，必须配hreflang，否则搜索引擎无法区分语言版本 -
rel="next"和rel="prev"应成对出现，且href必须指向真实存在的页面，否则可能被爬虫降权
rel="noopener" 和 rel="noreferrer" 只对 a 标签有效，但常被误用在 link 上
rel="noopener" 和 rel="noreferrer" 是 <a></a> 标签的安全属性，**不能用于 <link>**。它们的作用是隔离新窗口上下文，防止通过 window.opener 反向控制原页面。
有人试图在 <link rel="noopener" href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"> 中使用，这完全无效，浏览器既不报错也不执行任何安全动作——因为 <link> 本来就不会打开新上下文。
- 只有
<a target="_blank"></a>才需要加rel="noopener noreferrer" -
rel="noreferrer"会同时禁用 Referer 头和隐式启用noopener，但会丢失来源分析数据 - 在
<link>中写这两个值，纯属冗余，还可能干扰自动化工具对 rel 语义的解析
rel 的语义刚性：它不是“建议”，而是浏览器行为的开关。一个拼写错误（比如 rel="stylehseet"）、一个缺失的 as（preload 场景）、或一个放错位置的 noreferrer，都会让预期效果彻底失效，而且往往没有明显报错。 
