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