link标签必须放在head中，否则会导致CSS延迟加载、FOUC或被忽略；rel和href属性缺一不可；加载顺序影响样式优先级；media属性可实现条件加载以优化性能。
link标签必须放在head里，不能放body中
浏览器解析HTML是自上而下顺序执行的， 标签如果写在 内，会导致CSS资源延迟加载、样式闪烁（FOUC），甚至部分浏览器（如旧版IE）直接忽略。规范要求所有 必须作为 的子元素出现。
- ✅ 正确位置：
- ❌ 错误位置：
（即使能“看起来生效”，也不符合HTML标准，且影响渲染性能） - ⚠️ 注意：
不是自闭合标签，在XHTML中需写成，但在HTML5中合法且推荐
link标签的rel和href属性缺一不可
rel="stylesheet" 是关键标识，告诉浏览器这是用于页面渲染的层叠样式表；没有它，浏览器不会按CSS规则解析该资源。href 必须是有效路径，相对路径以HTML文件为基准，绝对路径或根相对路径（以 / 开头）更利于维护。
- ✅ 有效写法：
（根相对路径，推荐） - ✅ 有效写法：
（同级目录下的assets文件夹） - ❌ 无效写法：
（缺少rel，浏览器不识别为样式表） - ❌ 无效写法：
（空href会触发404，可能阻塞渲染）
多个link标签的加载顺序决定样式优先级
CSS规则的层叠（cascade）依赖引入顺序：后加载的样式可以覆盖先加载的同名规则。这意味着 在 中的排列不是随意的，尤其涉及重置（reset）、基础样式、组件样式、主题样式时。
- ✅ 推荐顺序：
- ⚠️ 注意：
标签或内联style属性仍遵循相同层叠逻辑，但它们的权重更高，应谨慎使用 - ⚠️ 避免把
放在后面（尤其同步脚本），否则会阻塞CSS加载，拖慢首屏渲染
link标签加media属性可实现条件加载
media 属性不是装饰用的，它让浏览器跳过不匹配条件的CSS下载（现代浏览器支持），节省带宽并提升初始渲染速度。常见于打印样式、响应式断点或暗色模式适配。
立即学习“前端免费学习笔记（深入）”；
- ✅ 打印样式不阻塞屏幕渲染：
- ✅ 响应式分屏加载（仅在满足条件时下载）：
- ✅ 暗色模式适配（需配合prefers-color-scheme）：
- ⚠️ 注意：
media值必须是合法媒体查询字符串，写错（如media="screen and (min=width: 768px)"）会导致浏览器忽略该链接
media 属性的语法严谨性，以及把 
