rel="stylesheet"必须严格写为全小写、无空格、带英文双引号，否则浏览器静默忽略；href路径以HTML文件所在目录为基准；Content-Type响应头须为text/css；link必须置于<head>内且紧贴<title>后，否则触发FOUC。
link 标签不是“写完就能跑”的装饰性元素，用错一个属性、放错一个位置，CSS 就不生效、图标就糊、预加载就白写。
rel="stylesheet" 为什么写了却没样式？
浏览器只认 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 或严格模式浏览器会拒绝解析 - 必须放在
<head>内，且建议紧贴<title>后；放在<body>底部会导致 FOUC，IE6–8 直接忽略
favicon 多尺寸总糊？别只写一个 link
仅 <link rel="icon" href="favicon.ico"> 能撑住老浏览器，但现代设备（高 DPI 屏、iOS、Android PWA）会按 sizes 匹配，不声明就默认取 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"> - 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" 和 rel="prefetch" 别混用
两者都叫“预加载”，但触发时机、缓存策略、浏览器支持度天差地别，混用等于白配。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
-
rel="preload"是“马上就要用”：浏览器在当前导航中立即发起请求，必须配as属性（如as="font"），漏写会导致字体跨域失败（当成fetch处理） -
rel="prefetch"是“以后可能会用”：浏览器只在空闲时加载，且不保证执行；Chrome 95+ 默认禁用非同源prefetch，Edge 也在逐步限制 - 两者都不能监听
onload或onerror——它们是声明式指令，不是脚本资源；想控制加载逻辑，得用fetch()+document.fonts.load()组合 -
rel="preload"可放<body>中靠近对应资源的位置（如 preload 字体后紧跟@font-face），但rel="prefetch"建议统一放<head>底部
动态换 favicon 为什么改 href 没反应？
浏览器只在页面加载时解析一次 <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>对它无效
最容易被忽略的点：路径基准、响应头 MIME 类型、sizes 顺序、以及“动态换 icon”本质是绕过缓存而非单纯改 DOM 属性。
