绝大多数样式失效等问题源于link标签写法错误：rel值必须严格为"stylesheet"（小写、带引号、无空格）、href路径需正确且协议匹配、link须置于head内、属性须匹配rel类型，任一细节偏差均导致静默失效。
绝大多数样式失效、图标不显示、预加载没反应，根本不是代码逻辑问题，而是 link 标签写法在几个关键点上静默错了——浏览器不报错，但直接跳过。
rel 值拼错或大小写不对，CSS 就白写了
浏览器只认 rel="stylesheet" 这个精确字符串：小写、带引号、无空格、无拼写变形。任何偏差都导致样式表被当普通链接处理，不阻塞、不解析、不报错。
-
rel=stylesheet（缺引号）→ Safari / Edge 可能忽略 -
rel=" StyleSheet "（首尾空格）→ 静默失效 -
rel="styleSheet"或rel="css"→ 所有现代浏览器无视 -
rel="shortcut icon"→ 已废弃，Chrome 90+ 起完全不识别
href 写错路径或混用协议，Network 里根本看不到请求
href 是相对路径，基准是 HTML 文件所在位置，不是 CSS 文件、JS 文件或当前 URL。写错就 404，但控制台可能只显示“Failed to load resource”，不提示是路径问题。
-
href="css/style.css"在/blog/post.html中，会请求/blog/css/style.css，不是/css/style.css -
href="https://cdn.example.com/main.css"在 HTTP 页面中 → 混合内容被拦截 -
href="//cdn.example.com/main.css"是正确写法，协议由页面自动补全 -
href="//cdn.example.com/fonts/inter.woff2"→ 含路径，rel="dns-prefetch"整个标签被静默忽略
放错位置，FOUC 和 hydration 失败就跟着来
link 必须是 <head> 的直接子元素。放在 <body> 里、包在 <script> 里、或者动态用 JS 插入，都会破坏浏览器的阻塞机制。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 放在
<body>底部 → 首屏先渲染无样式内容，再重绘，文字跳、按钮偏、媒体查询失效 - 在 SSR 框架（如 Next.js）中放错位置 → 客户端 hydration 时 DOM/CSSOM 不一致，触发警告甚至布局错乱
- 多个
rel="stylesheet"→ 加载顺序决定覆盖规则，后写的同选择器样式会生效，但不能依赖这个做“条件覆盖” -
rel="preload"必须出现在它所服务的资源标签之前，比如<link rel="preload" href="//fonts.googleapis.com">得在<link href="https://fonts.googleapis.com/css2?...">之前
加了没用的属性，反而埋下隐患
很多属性只在特定 rel 值下才起作用，乱加不仅无效，还可能触发意料外行为。
-
crossorigin加在rel="stylesheet"上 → 若服务端没配 CORS 响应头，CSS 请求直接失败，出现明显 CORS 报错；不加则静默丢弃，体验更“柔和” -
type="text/css"在 HTML5 中已冗余，加了不报错但没必要；若服务端返回的 Content-Type 错误，靠它 fallback 是临时补救，不该作为长期方案 -
sizes写在rel="icon"里 → 主流浏览器基本忽略，真正起作用的是文件真实尺寸和manifest.json中的sizes -
rel="noopener"或rel="noreferrer"用在link上 → 浏览器完全忽略，既不提升安全也不影响行为
最麻烦的不是报错，而是「什么都没发生」：Network 面板没请求、Computed 样式为空、图标显示默认页签、预加载时间没变化——这些全是 link 标签写法在某个细节上偏离规范的结果，得一个个抠 rel、href、位置、大小写、引号、协议，少一个都可能卡住整条链路。
