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