link标签必须置于内，rel属性须严格为小写带引号的"stylesheet"，href路径以html文件url为基准，rel="icon"唯一合法且sizes被忽略，media语法错误会导致link完全失效。
link 标签必须放在 里，否则样式不加载、图标不显示、预加载失效——这不是警告，是浏览器实际行为。
rel="stylesheet" 必须严格小写、带引号、无空格
浏览器只认 rel="stylesheet" 这个精确字符串。漏引号、大小写错、首尾空格，都会导致 CSS 静默不加载：页面白屏或按钮用默认样式，Network 面板能看到请求发出去了（甚至返回 200），但 Elements 的 Styles 栏完全空白，控制台也不报错。
常见错误写法：rel=stylesheet（缺引号）、rel=" stylesheet "（首尾空格）、rel="StyleSheet"（大小写混用）、rel="css"（非标准值）。
实操建议：
- 永远写成
<link rel="stylesheet" href="style.css">，不加type属性（HTML5 中已冗余） - 别依赖编辑器自动补全——有些 IDE 会把
rel默认补成rel="stylesheet "（末尾带空格） - 在 SSR 或 Next.js 等框架中，若
rel值拼接自变量，务必 trim 空格并转小写
href 路径必须以 HTML 文件 URL 为基准
路径不是“看着对就行”，而是由浏览器按当前 HTML 的完整 URL 解析。比如 HTML 地址是 https://example.com/blog/post.html，那么 href="css/main.css" 实际请求的是 https://example.com/blog/css/main.css，而非根目录下的 /css/main.css。
本地双击打开 HTML（file:// 协议）时，相对路径还可能被浏览器安全策略拦截，根本不会发请求。
实操建议：
- 生产环境优先用根相对路径：
href="/css/main.css" - CSS 在 CDN 上就用绝对 HTTPS URL：
href="https://cdn.example.com/v2.1.0/main.css" - 本地开发务必起服务（如
python -m http.server或vite preview），别双击打开 - Network 面板点开 404 请求，看「Initiator」列，能直接定位是哪个 HTML 文件里的
link发起的
rel="icon" 的合法写法只有一种，且 sizes 不起作用
写成 rel="shortcut icon" 或 rel="favicon" 已被 Chrome 90+、Firefox 84+、Edge 90+、Safari 15+ 全面忽略。混写两行（比如同时有 shortcut icon 和 icon）反而触发重复请求，干扰 PWA 图标解析。
唯一合法写法是 rel="icon"，且必须配 type 和（对 PNG/SVG）精确的 sizes 值。但注意：sizes 属性在 <link rel="icon"> 中几乎被所有浏览器静默忽略——你写 sizes="192x192"，它不会据此选图，也不会报错。
真正起作用的是：
- 文件真实像素尺寸（如
icon-192.png必须真是 192×192 像素） -
<link rel="apple-touch-icon">必须单独声明，iOS 只认这个 - PWA 场景下，
sizes只在manifest.json的icons数组里有效
media 属性写错会导致整个 link 失效
media 不是可选项，一旦写了就必须语法合法。比如 media="screen and (min-width:768px" 少了个右括号，整个 <link> 就会被浏览器视为无效，CSS 不加载、图标不请求，且无任何提示。
实操建议：
- 不用
media就别写；要用就复制标准媒体查询，别手敲 - 响应式 CSS 分离时，确保每个
<link>的media值互斥且覆盖完整断点 - 不要在同一个
<link>上叠加多个条件（如media="print, screen"），部分旧浏览器不支持逗号分隔
最常被忽略的一点：多个 <link rel="stylesheet"> 按书写顺序加载，后加载的 CSS 规则会覆盖前面同选择器的规则——这不是 bug，是层叠逻辑本身。如果你在 base.css 后引入 theme.css，却指望 base.css 里的 .btn 覆盖 theme.css 里的，那就得调换顺序，或者加 !important（不推荐）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
