本文详解 html 中外部 javascript 文件无法加载的典型原因，涵盖路径错误、服务器环境限制、执行时机等问题，并提供系统性排查步骤与修复方案。
在前端开发中，<script src="..."> 标签看似简单，却常因细微疏漏导致 JS 文件完全不执行——控制台无报错、console.log 不输出、交互逻辑失效。你提供的代码中已内联一段 <script>console.log('hello world');</script>，但仍未看到输出，这说明问题已超出“外部文件路径”范畴，需从执行环境与基础结构入手系统排查。
✅ 第一步：验证 HTML 结构完整性（最常见陷阱）
你提供的代码中存在一个致命语法错误：<html> 标签被打开，但未闭合；<body> 标签重复出现且嵌套混乱。观察末尾片段：
</section> <script src="/js/script.js"></script> <script> console.log(`hello world`); </script> </body> <!-- 此处缺少对应的 <body> 开始标签？ -->
而实际代码中 <body> 标签位于 <head> 之后，但 <html> 根标签未显式闭合。浏览器会尝试自动纠错，但可能延迟脚本执行或完全忽略 <script>。正确最小化结构应为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<!-- 页面内容 -->
<script>
console.log("Hello World —— 从内联脚本输出");
</script>
</body>
</html>⚠️ 注意：务必使用 <!DOCTYPE html> 声明，并确保 <html>、<head>、<body> 成对闭合。缺少 DOCTYPE 可能触发 Quirks 模式，导致脚本行为异常。
✅ 第二步：区分内联脚本与外部脚本的调试优先级
你同时写了：
立即学习“Java免费学习笔记（深入）”；
- 外部引入：<script src="/js/script.js"></script>
- 内联脚本：<script>console.log(...)</script>
若内联脚本也不执行（如控制台无任何输出），则问题一定出在 HTML 解析层面（如上述结构错误、编码问题、或服务器返回了非 HTML 内容）。此时应先移除所有样式、链接、外部资源，仅保留最简 HTML 骨架 + 内联脚本，确认基础执行能力：
<!DOCTYPE html>
<html>
<head><title>Debug</title></head>
<body>
<h1>Page Loaded</h1>
<script>
console.log("✅ Inline script executed!");
document.addEventListener('DOMContentLoaded', () => {
console.log("✅ DOM is ready");
});
</script>
</body>
</html>✅ 若此时控制台出现日志 → 说明环境正常，可继续排查外部 JS；
❌ 若仍无输出 → 检查浏览器是否禁用了 JS、文件是否以 .html 后缀保存、是否用双击方式直接打开了本地文件（file:// 协议下部分浏览器会阻止 fetch 或跨域请求，但 console.log 应仍有效）。
✅ 第三步：外部 JS 文件的路径与服务环境
假设内联脚本已工作，再排查 script.js：
-
路径是否正确？
<script src="/js/script.js"> 中的 /js/ 表示网站根目录下的 js 文件夹。例如，若你的 HTML 路径是 http://localhost:3000/pages/index.html，则浏览器会请求 http://localhost:3000/js/script.js。
✅ 正确做法：- 将 script.js 放在项目根目录的 /js/ 子目录中；
- 或改用相对路径：<script src="./js/script.js"></script>（相对于当前 HTML 文件位置）。
-
是否在本地双击打开？
直接双击 HTML 文件会使用 file:// 协议，此时 /js/script.js 会被解析为 file:///js/script.js（即系统根目录），必然 404。
✅ 解决方案：使用本地服务器，例如：# Python 3 python3 -m http.server 8000 # 然后访问 http://localhost:8000/your-file.html
-
检查浏览器开发者工具：
打开 Network 标签页 → 刷新页面 → 查找 script.js 请求：- 若状态码为 404 → 路径错误；
- 若状态码为 (blocked) 或 CORS 错误 → 服务配置问题；
- 若无该请求记录 → <script> 标签未被解析（回归第一步）。
✅ 最后：最佳实践建议
- 将 <script> 标签放在 </body> 之前（你已做到），确保 DOM 已加载；
- 为外部脚本添加 type="module"（如需 ES 模块）或 defer 属性（避免阻塞渲染）；
- 在 script.js 中第一行加入 console.log("script.js loaded");，与内联脚本日志区分；
- 使用现代编辑器（VS Code）的 Live Server 插件，一键启动 HTTP 服务，规避 file:// 限制。
? 总结：90% 的“JS 不执行”问题源于 HTML 结构错误、路径误解或本地文件协议限制。永远从最小可行示例（Hello World）开始验证，再逐步叠加功能——这是高效调试的黄金法则。
