link标签是页面渲染、图标显示和字体加载的底层开关；rel值必须精确拼写，href路径须正确且置于head中，否则将静默失效导致白屏、fouc或图标模糊。
link 标签不是“锦上添花”的配角，它是决定页面能否正常渲染、图标能否正确显示、字体能否及时加载的底层开关。漏写 rel、放错位置、路径写错，浏览器通常不报错，只静默失效——你看到的白屏、模糊图标、文字闪动（FOUC），八成出在这里。
rel="stylesheet" 引入 CSS 时为什么样式不生效
浏览器只认 rel="stylesheet" 这个值才真正加载并解析 CSS；写成 rel="styleSheet"、rel="css" 或直接漏掉，样式就等于没写。
-
href必须是浏览器能直接请求到的路径：相对路径以 HTML 文件所在目录为基准，不是以当前 CSS 文件或 JS 文件为基准 - 必须放在
中——放在底部会导致 FOUC（页面先无样式渲染，再突然套上样式） -
type="text/css"在现代浏览器中可省略，但若服务端返回的响应头里Content-Type不是text/css（比如返回了application/octet-stream），部分 Safari 或严格模式浏览器会拒绝解析
rel="icon" 设置 favicon 图标模糊或不显示
仅写 <link rel="icon" href="favicon.ico"> 能兼容老浏览器，但现代设备（高 DPI 屏、iOS、Android PWA）会因缺少尺寸声明而默认取 16×16 像素，导致图标糊成一团。
- 一个
<link>只能指定一种sizes，多尺寸需多个标签，例如：<link rel="icon" href="icon-16.png" sizes="16x16" type="image/png">、<link rel="icon" href="icon-32.png" sizes="32x32" type="image/png"> -
sizes="any"对rel="icon"无效，它只适用于rel="mask-icon"（Safari 固定标签页） - iOS 需要单独加
<link rel="apple-touch-icon" href="icon-180.png" sizes="180x180">，否则会被强制缩放，失真严重
rel="preload" 预加载字体或图片却没效果
rel="preload" 不是“保证加载”，而是告诉浏览器：“这个资源我马上就要，别等 DOM 解析完再抓”。写错 as 或漏掉 crossorigin，等于白写。
- 必须配对使用：
as="font"对应字体，as="image"对应图片，as="style"对应 CSS——写错会导致浏览器降级为普通GET请求，失去优先级和 CORS 行为控制 - 字体文件放在 CDN 上时，
crossorigin属性不能省：没有它，即使预加载成功，@font-face仍会因跨域被拦截，回退到系统字体 -
rel="preload"不支持onload或onerror监听——它是声明式指令，想做加载控制，得用fetch()+document.fonts.load()组合
最容易被忽略的是：所有 link 的行为都依赖 rel 值的精确拼写和上下文匹配。大小写、空格、多余字符，哪怕只是多了一个连字符，浏览器都会直接忽略整条指令——它不会警告，也不会 fallback，只会沉默地跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
