哎呀，遇到这个情况真是让人头疼！明明代码写得很对，后来啊网页却显示不出来样式，脚本也施行不了。别急着崩溃，这很常见！今天我就来跟大家唠唠嗑，把这个问题彻底给扒个底朝天并提供各种各样的解决方案。保证你看完之后就能自己解决啦！

啥情况？为什么静态HTML加载JS和CSS会失败？

先说说咱们得搞清楚，为什么会出现这种问题？简单来说就是路径不对！ 浏览器打开你的 HTML 文件的时候，它会去寻找里面的 JS 和 CSS 文件。如果路径写错了或者使用了错误的协议， 翻旧账。 那就会找不到文件啦。 这就像你问别人：“那个红色的苹果在哪里？” 如果别人不知道你在指哪个苹果，那肯定找不出来。

绝对路径 vs. 相对路径：这是关键！

我傻了。 这里就涉及到两个概念：绝对路径和相对路径。

绝对路径：直接告诉浏览器文件的确切位置

就像告诉别人：“就在桌子上那个红色的苹果！” 绝对路径以 `/` 开头，直接从根目录开始指向文件。比如 `http://example.com/css/style.css` 就是一个绝对路径，我算是看透了。。

相对路径：相对于当前 HTML 文件的位置

就像告诉别人：“就在桌子旁边那个红色的苹果！” 相对路径是相对于当前 HTML 文件的位置而言的。比如 `css/style.css` 就是一个相对路径。 如果你把 HTML 文件放在了 `project/index.html` 里 ， 而 CSS 文件放在了 `project/css/style.css` 里 ，那么在 HTML 文件中就可以直接写 `css/style.css` 来引用 CSS 文件，不夸张地说...。

各种解决方案：从简单到复杂

方案一：本地Web服务器 – 最推荐的方法！

不夸张地说... 这是解决问题的最佳方案！ 你不需要依赖复杂的配置或者安装什么软件。只需要一个简单的本地Web服务器就可以搞定。

Python自带的服务器 – 超简单

python -m http.server 8000

在命令行中输入上面的命令 ，然后就可以通过 `http://localhost:8000` 来访问你的网页了。

Node.js 的 http-server – 轻量级快速

npm install -g http-server
http-server .

境界没到。 先安装 Node.js 和 npm ， 然后运行上面的命令即可。

VS Code 的 Live Server – 开发神器

# VS Code
安装后右键点击html文件选择“Open with Live Server”

VS Code 的 Live Server 可以自动刷新页面非常方便调试。

方案二：使用相对路径 – 需要小心一点

如果你不想使用 Web 服务器，也可以尝试使用相对路径来引用 JS 和 CSS 文件，何必呢？。

同级目录：

子目录：

父目录：

方案三：检查文件路径是否正确

方案四：Spring Boot 项目特别注意

一些额外的技巧

• 确保文件存在检查一下你的 JS 和 CSS 文件是不是真的存在于指定的位置
• 注意大小写文件名的区分大小写可能会导致问题
• 清除缓存有时候浏览器缓存会导致问题。 清除一下浏览器缓存试试

总而言之，静态HTML页面加载JS和CSS失败的问题主要原因是文件路径不对 。 使用 Web 服务器是最简单、 最可靠的解决方案；如果不想使用 Web 服务器的话，就要仔细检查文件路径是否正确。 希望这篇文章能帮助你解决问题！ 如果还是不行呢? 那就继续研究呗! 相信你一定可以找到答案!