在网页开发里，HTML负责结构，JavaScript负责行为，把两者结合起来的核心就是script相关的写法。很多初学者分不清该把代码写在标签属性里、写在页面内部，还是写成独立文件再引入。其实每种方式都有明确的适用边界，选错了就容易出现脚本不执行、页面卡顿或者后期无法维护的情况。
一、内联JavaScript写法
最直观的方式是把JS直接写在HTML标签的事件属性中，比如onclick、onload等。这种方式不需要额外标签，点击或触发事件时就会运行。下面的例子展示了按钮点击后弹出提示：
<button onclick="alert('你点击了按钮')">点我</button>
这种写法的优势是简单明了，适合做极小演示。但缺点同样明显：行为逻辑和页面结构强行耦合，一旦代码变多，HTML文件会又臭又长。而且浏览器在解析属性里的字符串时，引号嵌套很容易出错，后续用开发者工具断点调试也非常麻烦。
更规范的做法是尽量避免内联事件，把逻辑收拢到统一的脚本里，通过id或选择器去绑定。这样结构归结构，行为归行为，改需求时只需要动JS文件，不用在HTML里翻来翻去。
二、内嵌script标签写法
把JavaScript放在<script>标签内部是当前页面内写代码的标准形式。标签可以放在head里，也可以放在body末尾。一般推荐放到body结束前，防止脚本执行时页面元素还没加载出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌示例</title>
</head>
<body>
<p id="msg">原始文字</p>
<script>
// 等待DOM可用后再修改内容
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById('msg');
el.textContent = '被JS修改了';
});
</script>
</body>
</html>
内嵌写法的好处是单个文件就能跑，分享 demo 很方便。不过当业务逻辑复杂后，成百上千行JS堆在HTML里，会导致文件体积变大、可读性下降。另外浏览器解析到script标签时会暂停HTML渲染，如果脚本耗时较长，用户就会看到白屏。
为了缓解阻塞，可以给script加defer属性，让它延后顺序执行；或者用async做异步加载。但内嵌脚本不支持src，因此defer和async对内嵌块意义不大，它们主要服务于外链脚本。
三、外部JS文件引入
生产环境最推荐的方式是把JavaScript写成独立文件，再用script标签的src属性引入。这样多个页面能共用同一份代码，浏览器也会缓存文件，二次访问速度更快。
<!-- index.html --> <script src="app.js" defer></script>
// app.js
function init() {
console.log('外部JS已加载');
}
window.addEventListener('DOMContentLoaded', init);
这里用到了defer，它表示脚本并行下载但延迟到文档解析完成后按出现顺序执行，非常适合依赖DOM的操作。与之对应的async则表示下载完就立刻执行，顺序不保证，适合统计类不依赖页面的脚本。
外部引入让项目结构清晰，也方便用构建工具压缩合并。唯一要注意的是路径问题，相对路径写错会导致404，此时页面静默失败，需要在网络面板里排查。
四、常见误区与写法对比
不少新手会误以为script必须放head里，结果代码里选不到body的元素。还有人同时用内联和内部脚本操作同一个变量，造成命名冲突。下面的表格列出了三种写法的关键差异：
| 写法 | 维护成本 | 加载影响 | 适用场景 |
|---|---|---|---|
| 内联事件 | 高（耦合严重） | 无阻塞 | 临时演示 |
| 内嵌script | 中 | 可能阻塞解析 | 单页小项目 |
| 外链文件 | 低（易复用） | 可defer/async优化 | 生产环境 |
从可维护性看，外链文件明显胜出；从快捷程度看，内联最适合随手试。实际工作中应根据项目规模灵活选择，但长远来说，学会用外部文件组织代码是必经之路。
五、小结与实践建议
在HTML中编写JavaScript并不是把代码随便放哪都行。内联事件能快速验证想法，内嵌script适合教学示例，外链js才是工程化正道。写的时候记得把依赖DOM的逻辑包在DOMContentLoaded里，或直接使用defer，避免拿到null节点。
建议从今天起把所有业务脚本抽成app.js，用<script src="app.js" defer></script>引入。当项目变大时，再拆成模块用打包工具处理。理清这些基础写法，能少踩很多莫名其妙的坑。
HTMLJavaScriptscript_tag修改时间：2026-08-10 04:33:31