在网页开发中，把js文件用html运行是最基础的操作。我们只需要借助html提供的script机制，就能让浏览器加载并执行javascript代码，实现页面交互效果。
一、使用script标签引入外部js文件
最常见的方式是把js代码单独保存为.js文件，然后在html里通过<script>标签的src属性引入。这样结构清晰，也方便维护。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>引入外部js示例</title>
</head>
<body>
<h1>测试页面</h1>
<!-- 引入外部js文件，注意路径要正确 -->
<script src="app.js"></script>
</body>
</html>
上面的app.js可以这样写：
// 页面加载后弹出提示
window.onload = function() {
alert('js文件已经用html运行成功了');
};
二、在html内部直接写js代码
如果代码很少，也可以不单独建js文件，直接把javascript写在html的script标签内部。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>直接内嵌js</p>
<script>
// 直接在html里运行js
console.log('这段代码在html内部执行');
document.write('你好，javascript');
</script>
</body>
</html>
三、控制js文件的执行时机
当js文件放在head中时，可能因为dom还没加载完而报错。可以用defer或把script放在body末尾来解决。
| 方式 | 说明 |
|---|---|
| 放在body底部 | 确保html元素都已解析，再运行js文件 |
| 使用defer | script标签加defer属性，延迟到文档解析后执行 |
| 使用async | 异步加载，不阻塞页面，但执行顺序不保证 |
使用defer的示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- defer让js文件在html解析完后运行 -->
<script src="app.js" defer></script>
</head>
<body>
<div id="box">内容</div>
</body>
</html>
四、常见错误与排查
- src路径写错，浏览器找不到js文件，可在控制台看404。
- 把script标签写成
<script />自闭合形式，部分浏览器不兼容，建议写完整闭合。 - js里调用document.getElementById时元素还没生成，应注意执行顺序。
只要掌握script标签的基本用法和加载顺序，就能顺利把js文件用html运行起来，实现各种网页功能。
javascripthtmlscript_tag修改时间：2026-07-27 19:21:23