内联脚本直接在html的标签中编写js代码，适合简单逻辑；2. 外部js文件通过src引入，利于维护和缓存；3. 内联事件处理在标签中绑定事件，如onclick，但不利于代码分离；4. 动态加载通过js创建标签实现按需加载；5. 模块化使用type="module"支持import/export，适用于复杂项目；6. defer和async控制脚本执行时机，提升性能。根据需求选择合适方式可优化加载与维护性。
在HTML中运行JavaScript代码有多种方式，适用于不同场景。以下是常见的几种方法及其使用说明，帮助你灵活地在网页中嵌入和执行JS代码。
1. 内联脚本（Inline Script）
直接在HTML文件的 <script></script> 标签中编写JavaScript代码，是最基础的方式。
<script>
alert("Hello, 这是内联JS！");
console.log("页面加载完成");
</script>
这类代码通常放在 或 中。建议放在 底部，避免阻塞页面渲染。
2. 外部JavaScript文件
将JS代码写在独立的 .js 文件中，通过 src 属性引入，有利于代码维护和缓存复用。
<script src="script.js"></script>
例如创建一个 script.js 文件：
document.getElementById("demo").innerHTML = "外部JS已加载";
然后在HTML中调用：
<p id="demo"></p> <script src="script.js"></script>
3. 内联事件处理（Inline Event Handlers）
在HTML标签中直接绑定事件，如点击、鼠标移入等触发JS函数。
<button onclick="alert('按钮被点击了！')">点我</button>
也可以调用已定义的函数：
<script>
function sayHi() {
alert("你好呀！");
}
</script><button onclick="sayHi()">打招呼</button>
注意：虽然方便，但不推荐大量使用，不利于分离结构与行为。
4. 动态加载JS（Dynamic Script Loading）
通过JavaScript动态创建 <script></script> 标签，实现按需加载外部脚本。
<script>
const script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script);
</script>
适合用于懒加载、第三方插件或条件性执行的场景。
5. 使用模块化JavaScript（ES6 Modules）
现代开发推荐使用模块化方式组织JS代码，支持 import 和 export。
先创建一个模块文件 module.js：
export function greet(name) {
return `Hello, ${name}!`;
}
在HTML中引入时需指定 type="module"：
<script type="module">
import { greet } from './module.js';
alert(greet('小明'));
</script>
模块化支持更清晰的依赖管理，适用于复杂项目。
6. 在HTML中延迟或异步执行JS
控制脚本的加载时机，提升页面性能。
- defer：脚本延迟执行，在文档解析完成后、DOMContentLoaded 事件前运行。
- async：脚本异步加载，下载完成即执行，不保证顺序。
<script src="delayed.js" defer></script><script src="async.js" async></script>
适用于不影响初始渲染的非关键脚本。
基本上就这些常见方式。根据项目需求选择合适的方法，能让JS代码更高效、易维护。不复杂但容易忽略细节，比如加载顺序和执行时机，需要多留意。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
