首页 > 网页制作 >HTML link标签rel属性汇总：外部资源引入指南

HTML link标签rel属性汇总：外部资源引入指南

来源：互联网 2026-06-22 11:49:01

在 link 标签中，rel 属性绝不是“随便填的描述词”。填错了，浏览器要么直接忽略，要么加载错误类型，严重时甚至会触发安全漏洞。真正能触发资源加载的，其实只有四个值：stylesheet、icon、preload 和 modulepreload。其他值要么被忽略，要么执行的是完全不同的功能。真

在 link 标签中，rel 属性绝不是“随便填的描述词”。填错了，浏览器要么直接忽略，要么加载错误类型，严重时甚至会触发安全漏洞。真正能触发资源加载的，其实只有四个值：stylesheet、icon、preload 和 modulepreload。其他值要么被忽略，要么执行的是完全不同的功能。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

真正能触发资源下载的 `rel` 值

`stylesheet`

这是唯一能加载并应用 CSS 的值。如果写成 style、css 或直接漏掉 rel，样式表根本不会生效。

`icon`

用于触发 favicon 下载。但必须搭配 type（如 image/x-icon）和 sizes（如 32x32）。如果未明确指定，大多数浏览器会回退到根目录下的 /favicon.ico，而且不一定能正常显示。

`preload`

用来提前加载资源。但它有硬性要求——必须带上 as 属性（例如 as="script" 或 as="font"），否则会降级为普通的 link，预加载效果完全失效。

`modulepreload`

只对 ES 模块 JS 有效。仅写 as="script" 不行，必须是模块语法的脚本（即带 type="module" 的脚本）才能触发预加载。

`rel="prefetch"` 和 `rel="preconnect"`，切勿用反

这两个值看起来都像是“提前做点什么”，但实际行为差异很大，混用反而会拖慢首屏速度。

`prefetch`

在浏览器空闲时以低优先级下载整个响应体——HTML、JS、JSON 均可。适用场景是用户下一步大概率要访问的页面。若用它预取一个 2MB 的大图，纯粹是浪费带宽。

`preconnect`

只建立 TCP + TLS 连接，不发 HTTP 请求。目标必须是完整的“协议+域名”（如 https://cdn.example.com），不能带路径（如 /fonts/xxx.woff2，否则直接失败）。多个域名必须拆成多个 link 标签；写成 rel="preconnect" href="https://a.com https://b.com" 会被当作非法 URL 而被忽略。

`dns-prefetch`

比 preconnect 更轻量，只查询 DNS 记录。不过，对于 HTTPS 站点，现代浏览器已自动优化同域 DNS 查询，因此该值的实际收益相当有限。

`noopener` 和 `noreferrer` 写在 `link` 上？徒劳无功

很多人误以为将 noopener、noreferrer 放到 link 标签上能防 XSS，但实际情况是：它们只在 a[target="_blank"] 场景下真正起作用。

这两个值仅用于切断 window.opener 对原页面的访问，以及防止 referrer 泄露。
写在或上，浏览器会直接忽略，既不报错也不生效。
另外，noreferrer 和 no-referrer 是两个不同的东西：后者是的 content 值，协议层级完全不同，不能互换使用。
想让外链更安全？正确的做法是在 a 标签上加上 rel="noopener noreferrer"，而不是 link。

被文档带偏但实际已失效或无意义的值

不少教程仍在列举这些值，但它们要么被规范移除，要么浏览器压根不实现：

next / prev：Chrome 曾尝试预取这些值指向的 URL，但现已明确弃用。搜索引擎也不再用于分页识别。正确的分页方案应使用 rel="canonical" 加上 JSON-LD 结构化数据。
alternate：如果单独使用（没有 hreflang 或 type 属性），对 SEO 完全无效。Google 明确表示不识别纯 rel="alternate"。
author、help、license：这些是 HTML5 保留的语义值，但浏览器既不加载资源，也不暴露 API，更不参与渲染或索引。
shortlink：RFC 4287 定义过，但没有任何浏览器行为。GitHub 等平台使用它只是内部约定，而非标准执行。