```html

js怎么引入到html里面

直接说结论：把 JavaScript 塞进 HTML 页面，本质上就三种方式——用 <script> 标签内联写、引入用 src 属性外链、引入或者通过事件属性直接绑在 HTML 元素上。引入但真正写代码的引入时候，选择哪一种，引入差别可不止是引入“方便不方便”那么简单。

内联脚本：写起来快，引入维护起来想哭

我见过不少刚入门的引入哥们儿，喜欢在 <head> 里直接开一段 <script> 就写逻辑。引入比如这样：

<script> document.getElementById('btn').onclick = function() {  alert('你点了我'); }; </script>

这代码放在 <head> 里，引入浏览器解析到这一行时，引入后面的引入 body 还没渲染出来呢，getElementById 直接返回 null，引入然后控制台给你甩个红脸——Cannot set property 'onclick' of null。引入这事儿我当年踩过，折腾了半小时才反应过来是执行顺序的问题。所以内联脚本不是不能用，但位置很关键：要么把 <script> 挪到 </body> 前面，要么加个 defer 属性（不过 defer 只对外部脚本有效，内联的它管不着）。

外链脚本：正经项目的标配

稍微像样点的项目，JS 都是单独放一个文件，比如 main.js，然后用 <script src="main.js"></script> 引进来。这样做的好处，用过的人都知道：HTML 干净了，JS 能缓存，改逻辑不用动结构文件。但有个细节容易被忽略——src 的路径是相对于 HTML 文件的，不是相对于当前 CSS 或者别的东西。我见过有人把 JS 放在 js/ 文件夹里，结果写 src="js/main.js" 没问题，写 src="/js/main.js" 在本地文件协议下就 404 了，因为开头的 / 会跑到根目录去。

另外，外链脚本默认是同步加载的，浏览器会停下来等它下载并执行完，再继续解析后面的 HTML。页面大、脚本多的时候，白屏时间肉眼可见地变长。解决办法是用 defer 或者 async。这俩的区别我简单粗暴地记：defer 保证按顺序执行，等 DOM 好了再跑；async 谁先下载完谁先跑，顺序看命。一般业务代码用 defer，独立的小工具脚本用 async。

事件属性：能跑，但别当真

还有一种写法长这样：<button onclick="doSomething()">点我</button>。这玩意儿叫内联事件处理器，写起来是真省事，一个属性搞定。但问题也很明显：逻辑和结构彻底搅在一起，改个函数名得满 HTML 找；而且 doSomething 必须得是全局函数，不然找不到。现在稍微讲点代码规范的团队，基本都禁止这么写。不过话说回来，写个临时 demo 或者测试页，用一下也无伤大雅，别带到生产环境就行。

模块化引入：现代前端的新常态

现在写 ES 模块，<script type="module" src="app.js"></script> 已经越来越常见。加了 type="module" 之后，脚本自动变成延迟执行，而且支持 import / export。但注意，模块脚本默认是严格模式，变量不声明就赋值会直接报错，跟传统脚本的宽容态度完全两码事。我第一次从传统脚本切到模块时，就因为一个未声明的变量折腾了半天。

还有一点，模块脚本的 src 路径必须带扩展名，不能像 require 那样省略 .js。浏览器不猜，它只认完整路径。这是规范定的，别跟它较劲。

到底选哪种？

看场景。单页小 demo，内联省事；正经项目，外链加 defer 或 type="module"；事件属性尽量别用，除非你确定这代码活不过明天。另外，不管用哪种，打开浏览器控制台看一眼有没有报错，比啥都强。我见过太多人写完 script 标签就以为万事大吉，结果路径拼错、文件名大小写不对、或者 defer 拼成 defre，页面一动不动。控制台里那行红字，比任何教程都管用。

```

很赞哦!（48）