【html引用js的三种方法】在网页开发中，JavaScript（简称JS）是实现网页动态功能的重要工具。为了让HTML页面能够调用并执行JavaScript代码，通常需要将JS文件引入到HTML中。以下是常见的三种引用JS的方法，适用于不同的开发场景和需求。
一、直接在HTML中使用`<script>`标签内联脚本
这是最简单的一种方式，适用于小型项目或快速测试。可以直接在HTML文档中编写JavaScript代码，通过`<script>`标签进行嵌入。
优点：
- 简单易用
- 不需要额外的文件管理
缺点：
- 代码难以复用
- 维护成本高
示例代码：
```html
欢迎访问
<script>
alert("Hello, World!");
</script>
```
二、通过`<script>`标签引入外部JS文件
这种方式适合大型项目，可以将JavaScript代码保存为单独的`.js`文件，并在HTML中通过`<script>`标签引用。
优点：
- 代码可复用
- 易于维护和管理
- 提高加载性能
缺点：
- 需要管理多个文件
- 依赖网络请求
示例代码：
```html
<script src="script.js"></script>
欢迎访问
```
script.js
```javascript
alert("这是外部JS文件的内容！");
```
三、使用模块化方式（如ES6模块）
随着现代浏览器对ES6标准的支持增强，可以通过`type="module"`来引入外部JS模块，实现更高级的代码组织方式。
优点：
- 支持模块化开发
- 可以按需加载
- 更好的代码组织结构
缺点：
- 兼容性稍差（需考虑旧浏览器）
- 需要服务器支持（本地文件可能无法直接运行）
示例代码：
```html
<script type="module">
import { greet } from './greet.js';
greet();
</script>
欢迎访问
```
greet.js
```javascript
export function greet() {
alert("你好，ES6模块！");
}
```
总结对比表
| 引用方式 | 是否内联 | 是否需要外部文件 | 是否支持模块化 | 适用场景 |
| 内联脚本 | 是 | 否 | 否 | 快速测试、小功能 |
| 外部JS文件引用 | 否 | 是 | 否 | 中小型项目、代码复用 |
| ES6模块引用 | 否 | 是 | 是 | 现代项目、模块化开发 |
以上三种方法各有优劣，开发者可以根据实际项目需求选择合适的引用方式。合理组织JavaScript代码，不仅能提升开发效率，也有助于提高网页性能与可维护性。
