刚接触前端开发的朋友，最先要弄明白的一件事就是：写在HTML里的JavaScript代码到底是怎么被执行的？浏览器在解析HTML文档时，遇到JavaScript代码会交给JS引擎处理，而我们只需要用正确的方式把JS代码放进HTML里，它就能运行起来。下面这张图可以帮助你先建立一个整体印象，然后再逐一讲解具体的实现方法。
方法一：使用script标签直接嵌入JS代码
最经典也是最直接的方式，就是在HTML文档中使用<script>标签把JS代码包裹起来。浏览器解析到这个标签时，会暂停HTML的渲染，转而执行里面的JavaScript代码，执行完毕后再继续往下解析。这种方式适合代码量不大、和当前页面强相关的逻辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入式JS示例</title>
</head>
<body>
<h1>Hello JavaScript</h1>
<script>
// 这里的代码会在浏览器解析到此处时立即执行
console.log("JS代码运行了！");
alert("欢迎学习JavaScript！");
</script>
</body>
</html>把上面的代码保存为index.html，用浏览器直接打开，就能看到弹窗效果，同时按F12打开控制台可以看到输出的日志。需要特别注意的是，如果JS代码要操作页面元素，而<script>标签写在<head>里且没有做任何处理，此时body还没解析，元素不存在，代码就会报错。所以嵌入式写法一般推荐把<script>放在body结束标签之前。
方法二：引入外部JS文件
当JS代码量较大或者需要在多个页面复用时，直接嵌入就不合适了。这时可以把代码单独存成一个js文件，再通过<script>标签的src属性引入。这种做法让HTML结构更清晰，也方便浏览器缓存js文件，提升后续访问速度，是实际项目中最推荐的方式。
首先创建一个main.js文件，内容如下：
// main.js 文件内容
function sayHello(name) {
console.log("你好，" + name);
}
sayHello("小明");
// 操作页面元素
document.getElementById("msg").innerText = "JS文件已成功运行";
然后在HTML中引入这个文件，注意src属性写的是相对路径或绝对路径：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部JS引入示例</title>
</head>
<body>
<p id="msg"></p>
<script src="main.js"></script>
</body>
</html>这里有个容易踩的坑：如果引入的是本地文件并且直接双击用file协议打开，某些浏览器功能可能受限，建议用VS Code的Live Server插件或者搭建一个简单的本地服务器来访问页面。另外，<script>标签一旦使用了src属性，标签内部再写的JS代码就不会被执行了，这一点很多新手都会忽略。
方法三：事件属性绑定与defer、async的用法
除了上面两种主流方式，还有一些补充手段也值得了解。第一种是直接在HTML元素的属性里写JS代码，比如onclick、onmouseover等事件属性，代码写在引号里，触发事件时执行。这种方式写起来快，但代码和结构混在一起，不利于维护，只适合临时测试或非常简单的交互。
<button onclick="alert('你点击了按钮！')">点我一下</button>
<input type="text" onfocus="console.log('输入框获得焦点')">第二种是利用一些特殊属性触发JS执行，比如在a标签的href属性中写javascript:伪协议，这种方式现在已经不推荐使用了，了解即可。第三种是现代开发中更常见的做法：给引入外部JS的<script>标签加上defer或async属性，控制脚本加载和执行的时机。
两者的区别很重要：加了defer的脚本会在HTML完全解析完成后、DOMContentLoaded事件触发前按顺序执行；加了async的脚本则是一旦下载完成就立刻执行，不保证多个脚本之间的顺序。如果是操作DOM的脚本，用defer最稳妥，甚至可以把<script>放回head里而不报错：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>defer示例</title>
<!-- 加了defer，等HTML解析完才执行，可以安全操作DOM -->
<script src="main.js" defer></script>
</head>
<body>
<p id="msg"></p>
</body>
</html>常见问题与排查方法
实际操作中，如果发现JS代码没有运行，可以按下面的思路排查。第一，按F12打开浏览器开发者工具，看Console面板有没有红色报错信息，比如语法错误、找不到元素等，报错信息里通常标明了具体行号。第二，检查文件路径是否正确，控制台的Network面板能看到js文件是否加载成功，状态码404就说明路径写错了。第三，确认<script>标签的位置和执行时机，操作DOM的代码要在元素存在之后执行，否则要套上DOMContentLoaded事件：
// 等DOM加载完成后再执行，位置就不受限了
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("msg").innerText = "执行成功";
});总的来说，嵌入式写法适合小段代码和快速验证，外部文件适合正式项目，事件属性只做辅助，defer和async则帮你解决加载时机的烦恼。把这些方法都动手敲一遍，遇到问题多看控制台，很快就能熟练地在HTML里运行JS代码了。
html运行js代码script标签JS嵌入HTML修改时间：2026-09-05 13:24:28