【html引用js的三种方法】在网页开发中，JavaScript（简称JS）是实现页面动态效果和交互功能的重要工具。为了让HTML页面能够调用JS代码，通常有三种常见的引用方式。本文将对这三种方法进行总结，并通过表格形式清晰展示。
一、直接在HTML中内联JS代码
这是最简单的一种方式，适用于小型脚本或简单的页面交互。开发者可以直接在HTML文件中使用`<script>`标签来编写JavaScript代码，无需额外的文件。
优点：
- 不需要额外的文件，适合小规模项目。
- 简单易懂，适合快速测试。
缺点：
- 代码难以复用。
- 项目较大时，维护成本高。
示例代码：
```html
Hello, World!
<script>
alert("这是一个内联JS示例！");
</script>
```
二、外部JS文件引入
这种方式是将JavaScript代码保存为一个独立的`.js`文件，然后在HTML中通过`<script>`标签的`src`属性来引用该文件。这是推荐的做法，尤其适用于大型项目。
优点：
- 代码可复用，便于维护。
- 提升页面加载性能（缓存机制）。
缺点：
- 需要管理多个文件。
- 引用顺序需注意。
示例代码：
```html
<script src="script.js"></script>
外部JS引用示例
```
script.js 文件
```javascript
alert("这是从外部JS文件中加载的代码！");
```
三、动态加载JS（使用JavaScript创建script标签）
这是一种高级用法，适用于按需加载JS脚本，提升页面性能。通过JavaScript动态创建`<script>`标签并设置其`src`属性，可以延迟加载某些脚本，或者根据用户行为加载不同的JS文件。
优点：
- 可按需加载，优化性能。
- 支持异步加载。
缺点：
- 实现相对复杂。
- 需处理加载完成后的回调逻辑。
示例代码：
```html
动态加载JS示例
<script>
function loadScript() {
var script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script);
}
</script>
```
dynamic.js 文件
```javascript
alert("这是动态加载的JS代码！");
```
总结对比表
| 方法 | 描述 | 优点 | 缺点 |
| 内联JS | 直接写在HTML中 | 简单快捷 | 不易复用，维护困难 |
| 外部JS | 引用外部JS文件 | 易于维护，可复用 | 需管理多个文件 |
| 动态加载 | 使用JS动态创建script标签 | 按需加载，性能优化 | 实现复杂，需处理回调 |
以上就是HTML引用JS的三种常见方法。根据项目规模和需求选择合适的方式，有助于提高开发效率和用户体验。