<link>必须放在<head>中，否则触发FOUC、SSR hydration失败及媒体查询失效；浏览器流式解析时仅在<head>中阻塞DOM构建以确保CSSOM就绪，放<body>中会导致重绘和布局抖动。
<link> 标签不能放在 <body> 里——这不是建议，而是浏览器渲染机制决定的硬性限制。放进去不会报错，但 CSS 不会按预期生效，首屏必然出现 FOUC（无样式内容闪现），且 SSR hydration 可能直接失败。
为什么 <link rel="stylesheet"> 必须在 <head> 中
浏览器是流式解析 HTML 的，遇到 <link rel="stylesheet"> 会立即阻塞 DOM 构建、发起请求、等待 CSSOM 生成后才继续。这个阻塞行为只在 <head> 阶段有效：此时 DOM 还没渲染，样式能“准时”参与首次绘制。
若放在 <body> 中：
- DOM 已解析出大量节点，浏览器会先用默认样式渲染一次（白底黑字、无间距、字体崩坏）
- CSS 加载完成后只能触发重绘，用户肉眼可见文字跳变、按钮偏移、
@media查询失效 - 移动端更明显：布局抖动、滚动卡顿、首屏按钮错位
- IE6–8 直接忽略
<body>内的<link>，整页无样式
<link> 放错位置的典型现象
控制台不报错，但表现异常，容易误判为 CSS 选择器或路径问题：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 文字先以
font-family: sans-serif渲染，几百毫秒后才换成你写的"Inter" -
display: flex容器子元素先堆成一列，再突然排成一行 -
@media (max-width: 768px)根本不触发——因为媒体查询依赖 CSSOM 就绪，而它来晚了 - Network 面板里能看到 CSS 请求，但 Initiator 显示为
parser且时间戳晚于DOMContentLoaded
<link> 在 <head> 中也未必生效的静默原因
即使位置正确，以下情况仍会导致样式不加载，且无任何错误提示：
-
rel属性缺失或拼错，例如写成rel="style"或rel="css"—— 浏览器当普通链接处理 -
href路径错误，返回 404 或空响应；注意路径是相对于 HTML 文件位置，不是当前 URL -
<link>被嵌套在<script>或<meta>内，不是<head>的直接子元素 - 用了
@import：它在<style>块内是同步阻塞且无法并行下载，比<link>更慢，应删掉
真正影响首屏体验的不是位置，而是加载时机
把 <link> 放进 <head> 只解决了“顺序”，没解决“延迟”。网络往返、TLS 握手、服务器响应会让外部 CSS 至少延迟几百毫秒：
- 首屏必需样式（如 header 高度、按钮背景色、基础字体声明）必须提取出来，用
<style></style>内联在<head>最顶部 - 内联 CSS 体积控制在 ≤14 KB，否则拖慢 TTFB 和 TCP 初始拥塞窗口
- 非关键 CSS 用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载；注意 IE 不支持onload，需 fallback
最容易被忽略的一点：CSS 加载时机比标签位置更关键——<head> 里放对了，不代表首屏就快；没内联关键样式，照样白屏几百毫秒。
