关键在于统一路径基准、匹配运行环境，并严格按文件物理位置计算层级；本地双击打开用file://协议禁用绝对路径，必须通过http://localhost启动本地服务器，使用相对路径或根相对路径（/开头指网站根目录），并注意大小写与斜杠规范。
关键在于统一路径基准、匹配运行环境，并严格按文件物理位置计算层级。本地双击打开和服务器部署对路径的解析逻辑完全不同，混用必然出错。
优先用相对路径，别碰本地绝对路径
本地开发阶段，禁止写 C:/project/xxx.css 或 /Users/you/xxx.js 这类盘符开头的路径。这类路径只在你本机有效，发给同学、提交作业、后续上线全部失效。所有内部资源引用必须基于当前 HTML 文件的位置来写，比如：
- 同级文件：
style.css或./style.css（两者等价，./可省略） - 子目录文件：
js/main.js（正斜杠，别用反斜杠） - 上级目录文件：
../assets/logo.png（每多一个../就上一级，不能少）
区分两种“以 / 开头”的路径
/css/app.css 看似是“绝对路径”，其实是“根相对路径”，它的 / 指的是网站根目录，不是你电脑的 C 盘根目录。它只在 HTTP 服务环境下有效：
- Live Server、Nginx、Apache 下：能正常加载，前提是你的项目根目录下真有
css/app.css - 浏览器双击打开（file:// 协议）：会变成
file:///css/app.css，100% 报 404 - 部署到子路径如
https://site.com/myapp/：必须同步改构建配置（如 Vite 的base: '/myapp/'），否则请求仍发往/css/app.css，404
用好工具，少靠手写
VS Code 中按住 Alt 键拖拽文件到 HTML 的 src 或 href 属性里，它会自动算出准确的相对路径，避免手动数 ../ 出错。另外，检查路径是否生效最直接的方式是打开开发者工具的 Network 面板，看浏览器实际发出的请求 URL 是什么，再和你磁盘里的真实路径逐段比对——注意大小写、空格、中文、隐藏字符，Linux 和服务器全敏感，Windows 本地不报错但一上线就挂。
立即学习“前端免费学习笔记（深入）”；
iframe 加本地 HTML 要特别小心
普通 src="demo.html" 在本地 file:// 下完全无效。Chrome/Edge 默认禁止 iframe 加载其他本地文件。临时调试可加启动参数 --allow-file-access-from-files，但更稳妥的做法是起一个本地服务，比如用 npx http-server 或 VS Code Live Server，然后 iframe 写 src="/pages/demo.html"。如果非要用 file://，必须写完整协议+编码路径，例如 src="file:///C:/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/demo.html"，且被嵌入的 HTML 里所有自身引用的 JS/CSS 也得确保路径正确。
