html标签如何引入外部资源_link标签rel属性汇总【指南】-html教程-PHP中文网

只有stylesheet、icon、preload、modulepreload能触发资源加载；prefetch和preconnect行为迥异，混用拖慢首屏；noopener/noreferrer在link上无效；next/prev等值已被弃用。

html标签如何引入外部资源_link标签rel属性汇总【指南】

link 标签引入外部资源，rel 值不是“随便填的描述”，填错就等于没写——浏览器要么忽略，要么加载错类型、触发错误策略、甚至埋下安全漏洞。

哪些 `rel` 值真能触发资源加载？

只有明确告诉浏览器“这是什么”的值，才会真正下载并处理资源：

stylesheet：唯一能加载并应用 CSS 的值；写成 style、css 或漏掉 rel，样式表不会生效
icon：会触发 favicon 下载，但必须配 type（如 image/x-icon）和 sizes（如 32x32），否则多数浏览器 fallback 到根目录 /favicon.ico，且不保证显示
preload：会提前加载资源，但必须带 as（如 as="script" 或 as="font"），否则降级为普通 link，不预加载
modulepreload：只对 ES 模块 JS 有效，as="script" 不够，必须是模块语法（含 type="module" 的脚本才能用它加载）

`rel="prefetch"` 和 `rel="preconnect"` 容易误配的边界

这两个值看起来都“提前做点事”，但行为差异极大，混用反而拖慢首屏：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

prefetch 是空闲时低优先级获取整个响应体（HTML、JS、JSON 都行），适合用户**下一步大概率访问的页面**；写成 prefetch 却指向一个 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 更轻量，只查 DNS，对 HTTPS 站点收益有限——现代浏览器已自动优化同域 DNS 查询

`rel` 写在 `link` 上却想防 XSS？别白费力气

noopener、noreferrer 这类值，在 link 标签上完全无效：

它们只在 a[target="_blank"] 场景下起作用，用于切断 window.opener 访问和 referrer 泄露
写在 <link rel="stylesheet"> 或 <link rel="icon"> 上，浏览器直接忽略，既不报错也不生效
混淆 noreferrer 和 no-referrer：后者是 <meta name="referrer"> 的 content 值，协议层级不同，不能互换
想让外链更安全？该加 rel="noopener noreferrer" 的是 a 标签，不是 link

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

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

next/prev：Chrome 曾尝试预取，现已被弃用；搜索引擎也明确表示不再用于分页识别——Pagination 应靠 rel="canonical" + JSON-LD 结构化数据
alternate 单独使用（无 hreflang 或 type）：对 SEO 零效果；Google 明确不识别纯 rel="alternate"
author、help、license：HTML5 保留语义，但浏览器既不加载、也不暴露 API、更不参与渲染或索引
shortlink：RFC 4287 定义，但无任何浏览器行为；GitHub 等平台用它只是内部约定，非标准执行