html中如何导入js

html中导入js的方式主要有四种：行内脚本、内部脚本、外部脚本和异步加载，下面我将详细介绍这四种方法，帮助大家更好地理解和运用。

html中如何导入js

1、行内脚本

行内脚本是在html标签中直接写入javascript代码，这种方法简单直接，但不够灵活，适用于简单的js代码，使用行内脚本时，将javascript代码写在<script>标签内，然后将其放入html文件的<head>或<body>部分。

Markup

<!DOCTYPE html>
<html>
<head>
    <title>行内脚本示例</title>
</head>
<body>
    <button onclick="alert('你好，世界！')">点击我</button>
</body>
</html>

在上面的例子中，我们创建了一个按钮，当用户点击按钮时，会弹出一个警告框显示“你好，世界！”，这里的onclick事件就是行内脚本的一种应用。

2、内部脚本

内部脚本是将javascript代码写在html文件中的<script>标签内，通常放在<head>或<body>部分，与行内脚本相比，内部脚本可以写入更多的代码，便于维护。

Markup

<!DOCTYPE html>
<html>
<head>
    <title>内部脚本示例</title>
    <script>
        function showHello() {
            alert('你好，世界！');
        }
    </script>
</head>
<body>
    <button onclick="showHello()">点击我</button>
</body>
</html>

在这个例子中，我们定义了一个名为showHello的函数，当用户点击按钮时，调用这个函数弹出一个警告框。

3、外部脚本

外部脚本是将javascript代码保存在独立的.js文件中，然后在html文件中通过<script>标签的src属性引入，这种方法可以使得html文件更加简洁，便于代码复用和缓存优化。

创建一个名为script.js的外部脚本文件，代码如下：

JavaScript

function showHello() {
    alert('你好，世界！');
}

在html文件中引入这个外部脚本：

Markup

<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showHello()">点击我</button>
</body>
</html>

4、异步加载

异步加载是一种优化页面加载性能的方法，通过异步加载javascript代码，可以避免阻塞页面渲染，在html中使用async或defer属性来实现异步加载。

async属性表示脚本在下载时不会阻塞页面渲染，但脚本执行的具体时间不确定，适用于那些不依赖于其他脚本和DOM的独立脚本。

defer属性表示脚本在页面解析完毕后、DOMContentLoaded事件触发前执行，脚本按照在html中出现的顺序执行。

使用async属性异步加载外部脚本：

Markup

<!DOCTYPE html>
<html>
<head>
    <title>异步加载脚本示例</title>
    <script async src="script.js"></script>
</head>
<body>
    <button onclick="showHello()">点击我</button>
</body>
</html>