link标签的href仅支持http:、https:、data:及相对路径，不支持mailto:、tel:、javascript:、file:、ftp:等协议；其加载受fetch规范约束，需满足cors、mime校验和协议白名单。
link 标签的 href 不是 a 标签，协议支持范围更窄
绝大多数人混淆了 <a></a> 和 <link> 的 href 行为：<link> 是文档级资源关联标签，不是导航工具。它的 href 值必须指向可被浏览器解析并加载的外部资源，且仅限于浏览器明确注册了处理器的协议类型——实际可用的只有 http:、https:、data: 和相对路径（含 / 开头的根相对）。
常见错误是把 mailto:、tel:、javascript: 甚至 file: 往 <link href="..."> 里塞，结果资源不加载、控制台无报错、样式或图标直接消失。
为什么 file:、ftp:、mailto: 在 link 中完全无效
<link> 的资源加载由 Fetch 规范驱动，必须满足 CORS、MIME 类型校验、协议白名单三重条件。而：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
file:协议在任何 HTTP(S) 页面中都会被 Fetch API 拒绝，Chrome/Firefox/Safari 均返回net::ERR_FAILED或静默失败，且不触发onerror -
ftp:自 Chrome 95 起默认禁用，Firefox 仅保留警告，Safari 已移除处理器；<link rel="stylesheet" href="ftp://...">直接跳过请求 -
mailto:和tel:根本没有对应的资源处理器，浏览器连尝试加载都不会做——它们只对<a></a>有意义
data: 协议能用，但有硬性长度和 MIME 限制
data: URL 可用于内联 CSS、图标等小资源，但要注意：
- 长度超过 ~2MB 时，Chrome/Firefox 会截断，Safari 可能直接拒绝解析
- MIME 类型必须显式声明且匹配内容，例如 CSS 必须写
data:text/css;base64,...，写成data:base64,...会被忽略 - CSP 策略若未显式允许
data:（如style-src 'self' data:），即使语法正确也会被拦截 - 不要用它加载 JS：现代浏览器禁止
<link rel="preload" as="script">加载data:脚本，会报Invalid type for preloaded resource
相对路径和协议相对 URL 的真实行为
<link> 的 href 解析严格遵循当前页面 URL 基础，但容易踩坑：
-
href="style.css"→ 解析为同目录，和<a></a>一致；但若页面 URL 是https://a.com/b/c/，它最终请求的是https://a.com/b/c/style.css -
href="/style.css"→ 根相对，始终从域名根开始，与当前路径无关 -
href="//cdn.com/icon.png"→ 协议相对，自动继承当前页协议（HTTP 或 HTTPS）；但若当前页是file:///，该写法会失效，变成非法 URL -
href="./icon.png"和href="icon.png"完全等价，都按当前目录解析；不存在 “更安全” 的说法
最常被忽略的是：当页面通过 file:/// 打开时，所有相对路径仍有效，但 http:/https: 外链会因混合内容或 CORS 被阻断——这不是协议问题，而是加载上下文切换导致的权限模型变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
