404错误主因是href路径计算错误或rel属性不规范。需通过network面板确认实际请求url，检查路径是否匹配html文件url基准，并确保rel="stylesheet"全小写无空格；modulepreload和canonical的href也须严格符合格式要求。
link href路径404，先看Network面板里请求的是哪个URL
浏览器根本不管你的本意，只认它拼出来的地址。打开开发者工具（F12）→ Network 标签页，刷新页面，找到那个红色的 style.css 请求，点开看 “Request URL”。这个地址就是浏览器真实发出的请求——如果它和你预期的文件位置对不上，问题就出在路径计算上。
常见错位现象：
-
href="css/style.css"在/blog/post.html中，实际请求的是/blog/css/style.css（不是你项目根下的/css/） -
href="/css/style.css"却返回 404，说明服务器上/css/style.css这个物理路径不存在，比如构建后 CSS 被输出到了/assets/css/ - 本地双击打开 HTML 文件时，
file://协议下相对路径可能被拦截或解析异常，此时href看似正确，但请求根本没发出去
rel="stylesheet" 漏写、拼错或带空格，CSS 就静默失效
这不是“样式没生效”，而是浏览器压根没把它当样式表处理。没有 rel="stylesheet"，标签就退化成普通 <a></a>，不发请求、不报错、Elements 面板里能看到标签，但 Styles 面板永远为空。
必须严格满足：
-
rel属性值必须是小写的"stylesheet"，不能是"StyleSheeT"、"style"或"css" - 不能有首尾空格：
rel="stylesheet "（末尾空格）在某些解析器中会被忽略 - 不能漏掉整个
rel属性——写了href但没rel，等于白写 -
type="text/css"已完全冗余，删掉更干净
路径基准永远是 HTML 文件的 URL，不是编辑器目录
你在 VS Code 里把 index.html 和 style.css 拖到同一文件夹，不代表浏览器会按这个结构找。它的起点永远是当前页面的完整 URL。
举例：页面 URL 是 https://example.com/blog/article.html
-
href="style.css"→ 请求https://example.com/blog/style.css -
href="../css/style.css"→ 请求https://example.com/css/style.css -
href="/css/style.css"→ 请求https://example.com/css/style.css（从域名根开始）
本地开发别双击打开 HTML；用 python -m http.server 或 vite preview 启服务，才能模拟真实 HTTP 环境下的路径解析。
modulepreload 或 canonical 的 href 写错，连报错都不会有
这两类 <link> 的错误最危险：不报错、不警告、Network 面板里看不到请求，但功能完全失效。
rel="modulepreload" 容易踩的坑：
- href 值和后续
<script type="module" src="..."></script>的src必须**逐字一致**，包括查询参数：/app.mjs≠/app.mjs?v=1.2.3 - 绝对禁止加
as属性，写了就直接被忽略 - 跨域资源（如 CDN 上的模块）必须同步加
crossorigin，且值要和对应<script></script>一致
rel="canonical" 的硬性要求：
- href 必须是**完整绝对 URL**：
https://example.com/article/123，不能是/article/123或//example.com/article/123 - 必须放在
内，且只能有一个；动态插入或放里，搜索引擎直接无视 - 末尾斜杠必须和目标页面实际返回的 URL 一致：
/article/≠/article
最容易被忽略的，是 rel 属性的大小写敏感性和 href 基准的绝对刚性——它们不报错，却让整个链路静默断裂。排查时优先盯死这两点，比翻 CSS 规则本身快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
