必须用<link>而非<a>声明文档与外部资源的元数据关系，如加载CSS、favicon、预加载等；rel值须严格符合标准，<link>须置于<head>并补全as、crossorigin等关键属性。
HTML 中用 <link> 标签声明文档与外部资源的关系，不是用 <a>；搞混这两者是绝大多数人踩坑的起点。
什么时候必须用 <link> 而不是 <a>
<a> 是给用户点击跳转用的，属于“超链接”；<link> 是告诉浏览器“这个文档和某个资源有特定关系”，属于“元数据链接”。
常见必须用 <link> 的场景：
- 加载 CSS：
<link rel="stylesheet" href="style.css"> - 指定 favicon：
<link rel="icon" href="favicon.ico"> - 预加载关键资源：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> - 声明替代样式表：
<link rel="alternate stylesheet" title="High Contrast" href="hc.css"> - 关联 Open Graph 或 RSS：
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">
错写成 <a rel="stylesheet" href="..."> —— 浏览器完全忽略，CSS 不生效，还可能被误当成普通链接暴露在页面上。
立即学习“前端免费学习笔记（深入）”；
rel 属性值不是随便写的，浏览器只认标准关键词
rel 决定了链接的语义和行为，拼错、大小写错、加空格或用非标准词，基本等于白写。
容易出错的点：
-
rel="stylesheet"不能写成rel="css"或rel="style" -
rel="preload"和rel="prefetch"行为完全不同：前者强制加载，后者是空闲时可选加载 -
rel="canonical"必须指向当前页面的规范 URL，且只能出现在<head>中，多写或写错位置会被搜索引擎忽略 -
rel="noopener"只在<a target="_blank">里有意义，<link>不支持它 —— 别硬套
查标准列表请直接看 WHATWG 链接类型定义，别信第三方博客整理的“常用 rel 汇总”。
<link> 放错位置或缺少必要属性会失效
<link> 必须放在 <head> 内（<body> 里虽不报错，但多数行为未定义，CSS 可能闪屏、preload 可能被忽略）。
关键属性缺失导致的问题：
- 漏写
as（配合rel="preload"）：浏览器无法正确设置请求优先级和 CORS 策略，字体/脚本可能加载失败 - 该加
crossorigin没加（比如加载跨域字体）：控制台报Cross-Origin Read Blocking (CORB)或字体不渲染 -
href是相对路径但页面 URL 带查询参数（如/page?id=123）：相对解析可能出乎意料，建议用根相对路径（/assets/style.css）或绝对 URL
调试方法：打开开发者工具 → Network 标签页 → 看 <link> 对应资源是否发起请求、状态码是否为 200、Initiator 是否标为 parser（说明是 HTML 解析时触发的，正确）。
真正难的不是写对一行 <link>，而是理解它不产生视觉效果、不响应点击、只在浏览器底层起作用——一旦出问题，往往没报错、没提示、只有“为什么这个字体没加载”“为什么 SEO 工具说 canonical 缺失”这类模糊反馈。盯住 rel 值、位置、属性组合，比调样式更需要抠 specification。
