关键在于路径正确、加载时机合理、避免浏览器报错：路径以index.html为基准，区分相对与绝对路径；type="module"需带扩展名且禁止无type的内联脚本；推荐将script置于</body>前、或用defer/async控制执行时机。
index.html 中引用本地 JavaScript 文件，关键不是“能不能引”，而是路径写对、加载时机合理、浏览器不报错。
路径写错：相对路径是最常见的死因
浏览器按 index.html 所在位置为基准解析 src 路径，不是按 JS 文件位置，也不是按你心里想的位置。
- JS 文件和
index.html在同一目录：用<script src="app.js"></script> - JS 文件在
js/app.js：用<script src="js/app.js"></script>（不是./js/app.js，.可省） - JS 文件在上层目录的
lib/utils.js：用<script src="../lib/utils.js"></script> - 绝对路径（不推荐）：以
/开头表示网站根目录，如<script src="/assets/main.js"></script>，但只在部署到根路径时才可靠
type="module" 会强制启用 ES 模块规则
加了 type="module" 后，路径必须是完整说明（含扩展名），且不支持直接运行 <script> 内联代码（除非也加 type="module"）。
- ✅ 正确：
<script type="module" src="./modules/main.js"></script> - ❌ 报错：
<script type="module" src="main"></script>（缺.js） - ❌ 报错：
<script type="module">console.log('hi');</script>（未声明type="module"的内联脚本不能调用模块内导出）
脚本执行时机：放在 <head> 里容易踩 DOM 未就绪的坑
默认情况下，<script> 是同步阻塞加载并立即执行，若放在 <head> 里，DOM 树还没生成，document.getElementById 之类就会返回 null。
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐方案一：把
<script>放在</body>前，确保 DOM 已加载完毕 - ✅ 推荐方案二：加
defer属性（仅适用于非模块脚本）：<script defer src="app.js"></script>，脚本会并行下载，等 DOM 解析完再执行 - ✅ 推荐方案三：加
async（适合独立工具类，不依赖 DOM 或其他脚本）：<script async src="analytics.js"></script>，下载完立刻执行，顺序不保证
最常被忽略的是路径中的大小写和文件扩展名——Windows 看不出问题，macOS 和 Linux 下 App.js ≠ app.js，服务器返回 404 时控制台只显示 “Failed to load resource”，不会告诉你是不是拼错了。
