HTML中关于link标签的几个实用技巧-html教程-PHP中文网

rel="stylesheet"必须严格写为全小写、无空格、带英文双引号，否则浏览器静默忽略；href路径以html文件所在目录为基准；content-type响应头须为text/css；link必须置于内且紧贴后，否则触发fouc。

html中关于link标签的几个实用技巧

link 标签不是“写完就能跑”的装饰性元素，用错一个属性、放错一个位置，CSS 就不生效、图标就糊、预加载就白写。

浏览器只认 rel="stylesheet" 这个精确值，大小写、空格、引号缺失都会让它静默失效——控制台不报错，但页面白屏或 FOUC（闪一下再变样）。

rel=stylesheet（缺引号）、rel="stylesheet "（末尾空格）、rel="StyleSheet" 全部被忽略
href 路径以 HTML 文件所在目录为基准，不是当前编辑器打开位置，也不是 CSS 文件自身位置；href="css/main.css" 表示 HTML 同级目录下有 css/ 文件夹
服务端返回的响应头中 Content-Type 必须是 text/css；若返回 application/octet-stream，旧版 Safari 或严格模式浏览器会拒绝解析
必须放在内，且建议紧贴 <title></title> 后；放在底部会导致 FOUC，IE6–8 直接忽略

仅 <link rel="icon" href="favicon.ico"> 能撑住老浏览器，但现代设备（高 DPI 屏、iOS、Android PWA）会按 sizes 匹配，不声明就默认取 16×16，必然模糊。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

一个 <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">
Chrome 120+ 优先使用 sizes="32x32" 或 sizes="any" 的条目；sizes="any" 对 rel="icon" 无效，只适用于 rel="mask-icon"
rel="apple-touch-icon" 是 iOS 专用，不写 sizes 会被强制缩放到 180×180，图像失真；务必显式写 sizes="180x180"
多个 <link rel="icon"> 并存时，浏览器按顺序取第一个满足条件的——把 16×16 放最前，高分屏设备可能永远看不到 32×32 版本

两者都叫“预加载”，但触发时机、缓存策略、浏览器支持度天差地别，混用等于白配。

rel="preload" 是“马上就要用”：浏览器在当前导航中立即发起请求，必须配 as 属性（如 as="font"），漏写会导致字体跨域失败（当成 fetch 处理）
rel="prefetch" 是“以后可能会用”：浏览器只在空闲时加载，且不保证执行；Chrome 95+ 默认禁用非同源 prefetch，Edge 也在逐步限制
两者都不能监听 onload 或 onerror——它们是声明式指令，不是脚本资源；想控制加载逻辑，得用 fetch() + document.fonts.load() 组合
rel="preload" 可放中靠近对应资源的位置（如 preload 字体后紧跟 @font-face），但 rel="prefetch" 建议统一放底部

浏览器只在页面加载时解析一次 <link rel="icon">，后续 DOM 修改（比如只改 href）不会触发重 fetch，Safari 和旧 Edge 几乎完全无视。

真正生效的方法是强制刷新缓存：给 URL 加唯一查询参数，例如 favicon.ico?v=1698765432，并确保服务器不 302 重定向到无参地址
更稳妥的做法是替换整个 <link> 元素：document.head.removeChild(oldLink) → document.head.appendChild(newLink)
如果用了 rel="apple-touch-icon" 或 Web App Manifest（rel="manifest"），必须同步更新所有相关 <link>，否则 iOS 添加到主屏幕、PWA 安装图标仍显示旧图
Android Chrome 的 PWA 桌面图标完全由 manifest.json 中的 icons 字段决定，网页内 JS 换 <link> 对它无效