link标签必须放在head内，否则会导致fouc、样式不生效或被忽略；href路径需相对于html文件位置，rel必须严格为"stylesheet"且不可省略。
link标签必须放在head里，不是body里
浏览器按 HTML 从上到下解析，<link> 写在 中会导致样式延迟应用，出现 FOUC（页面闪动），甚至被某些浏览器静默忽略。这不是警告，是实际会发生的行为。
-
<link rel="stylesheet" href="style.css">必须出现在内，且建议紧接在<title></title>之后 - 如果误塞进
，控制台通常不报错，但样式就是不生效 —— 检查Network面板会发现 CSS 请求晚于 DOM 渲染 - Flutter Web 场景下尤其关键：web/index.html 是唯一入口，
<link>若不在，CanvasKit 渲染节点可能已生成，外部样式完全错过时机
href路径写错 = 404，但控制台可能不显眼
相对路径的基准永远是当前 HTML 文件位置，不是项目根目录、不是 CSS 文件所在目录，也不是服务器配置路径。最常踩的坑就是凭直觉乱写 href。
-
href="style.css"→ 要求style.css和index.html在同一目录 -
href="css/app.css"→ 要求文件在css/app.css（相对于index.html） -
href="/css/app.css"→ 只有部署在域名根路径（如https://example.com/css/app.css）才有效；本地开发或子路径部署时大概率 404 - Flutter Web 中必须以
web/为基准：CSS 文件若放在web/css/theme.css，就只能写href="css/theme.css"，不能写href="/css/theme.css"或href="packages/my_app/css/theme.css"
rel="stylesheet" 缺失或拼错，浏览器直接当普通链接处理
这个属性不是可选装饰，而是语义开关。漏掉或写成 rel="style"、rel="css"、rel="stylesheet "（末尾空格），浏览器就完全不把它当样式表加载，也不报任何错误。
- 务必核对拼写：必须是
rel="stylesheet"，全小写、无空格、无多余字符 -
type="text/css"在现代浏览器中已非必需，可省略；但rel绝对不可省 - 别混用
<style></style>和<link>：前者是内联样式容器，后者才是引入外部文件的唯一标准方式
@import 和 JS 动态注入在 index.html 中不推荐
它们技术上可行，但破坏加载时序和可预测性，尤其在 Flutter Web 或需要响应式/暗色模式同步的场景下容易出问题。
-
@import写在<style></style>里：CSS 内部加载，阻塞渲染、无法监听加载完成、媒体查询可能失效 - 用
document.createElement('link')+appendChild动态插入：时机难控，易与 Flutter 渲染竞争 DOM，导致部分节点样式丢失 - 真正需要全局重置、字体定义、第三方 UI 库（如 Tailwind、Bootstrap CSS）时，老老实实走
里的<link>，这是唯一能保证优先级、缓存行为和媒体查询正常工作的路径
最容易被忽略的是 CSS 作用域穿透问题：index.html 引入的样式默认作用于整个 document，会直接影响 Flutter 渲染出的 DOM 节点（比如 <flt-glass-pane></flt-glass-pane>），而 Dart 层的 Widget 样式对此毫无感知。改一个 body { margin: 0 } 可能让整个页面偏移，却查不到源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
