必须放在中，否则触发fouc、ssr hydration失败及媒体查询失效；浏览器流式解析时仅在中阻塞dom构建以确保cssom就绪，放中会导致重绘和布局抖动。
<link> 标签不能放在 里——这不是建议，而是浏览器渲染机制决定的硬性限制。放进去不会报错，但 CSS 不会按预期生效，首屏必然出现 FOUC（无样式内容闪现），且 SSR hydration 可能直接失败。
为什么 <link rel="stylesheet"> 必须在
浏览器是流式解析 HTML 的，遇到 <link rel="stylesheet"> 会立即阻塞 DOM 构建、发起请求、等待 CSSOM 生成后才继续。这个阻塞行为只在 阶段有效：此时 DOM 还没渲染，样式能“准时”参与首次绘制。
若放在 中：
- DOM 已解析出大量节点，浏览器会先用默认样式渲染一次（白底黑字、无间距、字体崩坏）
- CSS 加载完成后只能触发重绘，用户肉眼可见文字跳变、按钮偏移、
@media查询失效 - 移动端更明显：布局抖动、滚动卡顿、首屏按钮错位
- IE6–8 直接忽略
内的<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> 在
即使位置正确，以下情况仍会导致样式不加载，且无任何错误提示：
-
rel属性缺失或拼错，例如写成rel="style"或rel="css"—— 浏览器当普通链接处理 -
href路径错误，返回 404 或空响应；注意路径是相对于 HTML 文件位置，不是当前 URL -
<link>被嵌套在<script></script>或<meta>内，不是的直接子元素 - 用了
@import：它在<style></style>块内是同步阻塞且无法并行下载，比<link>更慢，应删掉
真正影响首屏体验的不是位置，而是加载时机
把 <link> 放进 只解决了“顺序”，没解决“延迟”。网络往返、TLS 握手、服务器响应会让外部 CSS 至少延迟几百毫秒：
- 首屏必需样式（如 header 高度、按钮背景色、基础字体声明）必须提取出来，用
<style></style>内联在最顶部 - 内联 CSS 体积控制在 ≤14 KB，否则拖慢 TTFB 和 TCP 初始拥塞窗口
- 非关键 CSS 用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载；注意 IE 不支持onload，需 fallback
最容易被忽略的一点：CSS 加载时机比标签位置更关键—— 里放对了，不代表首屏就快；没内联关键样式，照样白屏几百毫秒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
