最简方式是，但加载失败主因是路径错误、file://协议限制、async/defer误用、动态插入时机不当及csp或type属性隐式影响。
HTML里怎么用<script>标签引入JS文件</script>
直接在HTML中写 <script src="xxx.js"></script> 就能加载外部脚本，但路径错、位置错、执行时机错，都会导致代码不运行。
关键不是“能不能加”，而是“加在哪”和“怎么加”。浏览器遇到 <script></script> 标签会立即暂停HTML解析，去下载并执行JS——如果JS放在 里且没加控制属性，页面可能白屏几秒。
- 推荐把
<script src="main.js"></script>放在前，最简单可靠 - 若必须放
，加defer（按顺序延迟执行）或async（异步下载+随时执行），二者不能混用 -
defer适合依赖DOM的逻辑（比如操作按钮）；async适合统计、埋点等无依赖脚本 - 路径必须写对：
./js/app.js是同级js文件夹下的文件；app.js表示和HTML同目录；开头带/（如/assets/script.js）是根目录起算
外部JS文件里为什么不能写<script>标签</script>
浏览器把 src 属性指向的文件当作纯JavaScript代码来执行。如果你在 utils.js 里写了 <script>console.log(1)</script>，浏览器会把它当字符串或语法错误报出来，典型错误是 Uncaught SyntaxError: Unexpected token '。
外部JS文件就是个文本文件，只该有JS语法：变量、函数、export、import……没有HTML结构。
- 新建
helpers.js时，用纯文本编辑器（VS Code、Notepad++ 等），保存为 UTF-8 编码，扩展名必须是.js - 里面不要出现任何
<script></script>、、等HTML标签 - 如果用了
export，那引入时得写<script type="module" src="helpers.js"></script>，否则会报Unexpected token 'export'
type="module" 和普通 script 的区别在哪
加了 type="module" 的 <script></script> 是ES模块环境，行为和传统脚本完全不同：自动启用严格模式、支持 import/export、默认延迟执行、路径必须带扩展名（./utils.js 合法，./utils 报错）。
它不兼容老浏览器（IE全系不支持），但现代项目基本都用它。如果你在HTML里写 <script type="module" src="main.js"></script>，而 main.js 里又写了 import { foo } from './lib';，那 lib.js 路径必须写全，包括 .js 后缀。
- 模块脚本天然
defer，不用额外加属性 - 模块内顶层
this是undefined，不是window - 模块间作用域隔离，想共享需显式
export/import，不能靠全局变量“碰巧”通信 - CDN上的模块（如
https://unpkg.com/lodash-es@4.17.21/index.js）可直接import，但注意跨域和CORS头
编辑器里写JS没反应？先检查这三件事
不是代码写错了，而是环境没搭对。90% 的“JS不执行”问题出在加载环节，而不是语法。
- 打开浏览器开发者工具（F12），切到
Network标签页，刷新页面，看xxx.js请求状态是不是200；如果是404，说明路径错了 - 切到
Console标签页，看有没有红色报错，比如ReferenceError: xxx is not defined（变量没声明）、SyntaxError（少括号/引号）、Uncaught TypeError: Cannot read property 'xxx' of null（DOM还没加载完就去查元素） - 右键网页 → “查看页面源代码”，确认
<script></script>标签确实被写进去了，且没被注释、没拼错成<scirpt></scirpt>这类低级错误
路径、执行时机、模块系统，这三个层面任何一个出偏差，JS都不会如你所愿跑起来。别急着改逻辑，先让脚本稳稳加载进来。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
