HTML连接JS的几种方法详解

本文深入剖析HTML连接JavaScript时最常踩坑的四大核心问题：脚本执行时机（何时运行）、路径解析规则（如何定位文件）、模块化机制（type="module"带来的严格模式与作用域隔离）以及变量可见性（不同引入方式导致的作用域和执行顺序差异），用清晰的场景对比和实操建议，帮你一次性理清defer、async、相对路径、模块导入等关键概念，避开404、null引用、ReferenceError等高频故障，真正实现稳定、高效、可维护的JS集成。

script 标签放哪？位置决定执行时机和变量可见性

HTML 中引入 JS，最核心的问题不是“能不能连上”，而是“什么时候执行、能访问到什么”。，它会并行下载、等 DOM 解析完再执行

相对路径写错是 404 的头号原因

浏览器加载 JS 是按当前 HTML 文件所在路径为基准解析相对路径的，不是按 JS 文件位置，也不是按服务器根目录。常见错误是把 js/main.js 写成 ./js/main.js 或 /js/main.js 却没搞清当前 HTML 在哪级目录。

• 检查 Network 面板里 JS 请求的 URL 和状态码：404 就说明路径错了
• src="js/main.js" 表示“和当前 HTML 同目录下的 js 文件夹里的 main.js”
• src="/js/main.js" 表示“网站根目录下的 js 文件夹”，跟 HTML 所在路径无关
• 本地双击打开 HTML（file:// 协议）时，/ 会指向文件系统根，极易出错，务必用开发服务器（如 python3 -m http.server）测试

type="module" 改变加载规则，不兼容老写法

启用 ES 模块后，script 默认变成严格模式、自动延迟执行、支持 import/export，但也会禁用全局变量自动挂载到 window，且路径必须带扩展名、必须是相对或绝对 URL。

• 写 后，app.js 里的 const foo = 1 不会变成 window.foo
• 模块内 import 路径不能省略扩展名：import { util } from './utils.js' ✅，import { util } from './utils' ❌
• 模块脚本不支持 document.write，用了会直接报错
• 想让传统脚本和模块共存？模块里用 export，传统脚本里用 import() 动态导入，别混用 var 全局声明

内联 script 与外部文件的变量隔离问题

很多人以为在 HTML 里写两段 ✅

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。