问html引用js的三种方法

HTML引用JS的三种方法 在网页开发中，JavaScript（简称JS）是实现页面动态效果的重要工具。为了让HTML页面能够调用JavaScript代码，通常有三种常见的引用方式。以下是对这三种方法的总结与对比。 一、直接内联脚本 将JavaScript代码直接写在HTML文件中的`<script>`标签内，这种方式适用于简单的脚本或少量代码。 优点： - 不需要额外的文件 - 适合小型项目或快速测试 缺点： - 代码不易维护 - 重复使用困难 示例代码： ```html <script> alert("这是内联脚本！"); </script> ``` 二、外部JS文件引用 将JavaScript代码保存为独立的`.js`文件，然后通过`<script>`标签引入到HTML中。这是最常用的方式，适用于大型项目。 优点： - 代码可复用 - 便于维护和管理 - 提高页面加载效率 缺点： - 需要额外的文件管理 示例代码： ```html <script src="script.js"></script> ``` script.js 文件 ```javascript alert("这是外部JS文件的内容！"); ``` 三、异步加载JS（使用`async`或`defer`属性） 在引用外部JS文件时，可以通过添加`async`或`defer`属性来控制脚本的加载和执行时机，避免阻塞页面渲染。 `async` 属性： - 脚本会异步加载，加载完成后立即执行 - 适用于不依赖其他脚本的独立文件 `defer` 属性： - 脚本会异步加载，但会在文档解析完成后按顺序执行 - 适用于依赖其他脚本的文件 示例代码： ```html <script src="script.js" async></script> <script src="script.js" defer></script> ``` 总结表格 方法 是否内联 是否需要外部文件 是否支持异步加载 适用场景 --- 内联脚本 是 否 否 简单测试、小功能 外部JS文件 否 是 是 大型项目、模块化开发 异步加载JS 否 是 是 提高性能、优化加载 通过以上三种方法，开发者可以根据项目需求灵活选择合适的JS引用方式，提高开发效率与用户体验。