network面板中request url才是浏览器实际请求的真实路径，它由html文件url基准计算得出，而非代码所写路径；例如href="css/style.css"在/blog/下会解析为/blog/css/style.css，需据此修正。
Network面板里看到的请求URL才是真实路径
浏览器根本不管你在代码里“想写什么”，只按它自己算出来的地址发请求。打开开发者工具（F12）→ Network 标签页，刷新页面，找到标红的 404 请求，点开看 Request URL。这个地址就是问题根源——比如你写了 href="css/style.css"，但实际请求的是 https://example.com/blog/css/style.css，说明 HTML 文件在 /blog/ 下，而你没考虑基准路径偏移。
- 相对路径（如
css/style.css）永远以当前 HTML 文件的 URL 为起点计算 - 根路径（如
/css/style.css）从域名根开始，和 HTML 文件位置无关 -
file://协议下双击打开 HTML 时，很多相对路径会失效或被拦截，这不是 bug，是浏览器安全限制
img / script / link 的 src/href 写错，表现完全不同
同一类路径错误，在不同标签上触发的问题机制差异很大，排查不能一概而论：
-
<img src="logo.png">路径错 → 显示空白或占位符，Network 里能看到 404 请求 -
<link rel="stylesheet" href="style.css">缺rel="stylesheet"或拼错（如rel="StyleSheeT "）→ 静默失败，Network 里根本没请求，Styles 面板为空，也不报错 -
<script src="main.js"></script>路径错 → 控制台报Failed to load resource: the server responded with a status of 404 ()，但页面可能仍能渲染 -
<link rel="modulepreload" href="utils.js">路径错 → 完全无声，Network 不显示请求，功能直接缺失，极难察觉
Linux服务器上大小写敏感是隐形杀手
你在 Windows 上双击 HTML 测试一切正常，一部署到 Linux 服务器就全 404，大概率是大小写不一致。Linux 文件系统区分大小写，Logo.png 和 logo.png 是两个文件。
- 检查实际文件名：用
ls -l确认大小写，别只靠编辑器缩略图判断 - HTML 中所有引用（
src、href、action）必须与磁盘文件名逐字符一致 - CI/CD 构建流程中，如果打包脚本生成了小写文件名，但代码里写的是大写，也会出问题
- Git 默认在 Windows 上不跟踪大小写变更，
git status可能显示“未修改”，实际已错
本地开发别双击打开 HTML 文件
双击打开走的是 file:// 协议，路径解析规则和 HTTP 完全不同，且现代浏览器会主动拦截跨目录访问（比如 ../assets/）。这不是配置问题，是设计如此。
- 用轻量命令启动本地服务：
python3 -m http.server 8000（Python）、npx serve（Node）、或vite preview - 确保浏览器地址栏显示的是
http://localhost:8000/xxx.html，不是file:/// - 这样路径计算才和线上环境一致，避免“本地好好的，一上传就挂”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
