HTML5 入门教程
script 标签：引入 JavaScript
本教程共 110 篇 · 第 9 篇 · 更新于 2026-07-28 · 约 6 分钟阅读
HTML5HTML5 入门教程script标签JavaScriptasyncdefertype-module
9. script 标签：引入 JavaScript
本节目标：学会在 HTML 中引入 JavaScript，理解 async、defer、type=“module” 的区别。
HTML 和 CSS 只能做静态页面。想让页面”动起来”，需要 JavaScript。
两种引入方式
内联脚本
直接写在 <script> 标签里：
<script>
alert('Hello, World!');
</script>外部脚本
引入 .js 文件：
<script src="app.js"></script>Tip和 CSS 一样，实际项目中推荐用外部脚本。HTML 和 JS 分开，代码更好维护。
script 标签放在哪里
传统做法是放在 <head> 里。但更好的做法是放在 </body> 之前：
<body>
<h1>页面内容</h1>
<script src="app.js"></script>
</body>为什么？ 浏览器从上到下解析 HTML。如果脚本在 <head> 里，浏览器会先下载执行脚本，然后才渲染页面内容，用户会看到白屏。
把脚本放在底部，页面内容先渲染出来，用户体验更好。
async 属性
<script src="app.js" async></script>async 告诉浏览器：异步下载脚本，下载完就执行。
- 下载过程不阻塞页面渲染
- 执行时会阻塞（暂停渲染来执行脚本）
- 不保证执行顺序，哪个先下载完哪个先执行
适合独立的脚本，比如统计代码、广告代码。
defer 属性
<script src="app.js" defer></script>defer 告诉浏览器：异步下载脚本，等 HTML 解析完再执行。
- 下载过程不阻塞页面渲染
- 等整个页面解析完才执行
- 保证执行顺序，按在文档中的顺序依次执行
defer 是最推荐的引入方式。
async vs defer 对比
| 属性 | 下载 | 执行时机 | 执行顺序 |
|---|---|---|---|
| 无（普通） | 阻塞 | 立即执行 | 按顺序 |
async | 不阻塞 | 下载完就执行 | 不保证 |
defer | 不阻塞 | HTML 解析完后 | 按顺序 |
type=“module”
现代 JavaScript 支持模块化，用 type="module"：
<script type="module" src="main.js"></script>特点：
- 自动启用严格模式
- 支持
import和export - 默认是 defer 行为
- 每个模块有独立作用域
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>nomodule 属性
老浏览器不支持模块，可以用 nomodule 提供降级方案：
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>现代浏览器会忽略带 nomodule 的脚本，老浏览器会执行它。
小结
<script>标签引入 JavaScript- 推荐放在
</body>之前 async异步下载、下载完就执行defer异步下载、页面解析完再执行（推荐）type="module"启用 ES 模块化
下一节，我们讲 HTML 注释。