怎么html引入js

HTML 引入 JavaScript 的方法有几种：内联脚本、内部脚本、外部脚本，下面将详细描述其中一个方法——外部脚本的引入。

使用外部脚本是最推荐的方式，因为它能提高代码的可维护性、重用性和加载速度。在HTML文件中，通过<script>标签的src属性引入外部JavaScript文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="path/to/yourfile.js"></script>
</body>
</html>

其中，path/to/yourfile.js 是JavaScript文件的路径。将JavaScript文件独立存放在一个文件中，能够让代码更易于管理和调试，同时还能加快页面加载速度，因为浏览器可以缓存外部脚本文件。

一、内联脚本

内联脚本是将JavaScript代码直接写在HTML元素的属性中，例如onclick事件。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('Button clicked!')">Click me</button>
</body>
</html>

尽管这种方法很直观，但它会使HTML和JavaScript代码混杂在一起，不利于代码的维护和重用。

二、内部脚本

内部脚本是将JavaScript代码放在HTML文件的<script>标签内。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showAlert() {
            alert('Hello from internal script!');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">Click me</button>
</body>
</html>

这种方法适用于简单的脚本，但对于复杂和大型的JavaScript代码来说，维护起来会比较困难。

三、外部脚本

外部脚本是将JavaScript代码放在独立的.js文件中，通过<script>标签的src属性引入。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="path/to/yourfile.js"></script>
</body>
</html>

这种方法有以下几个优点：

提高代码的可维护性：JavaScript代码和HTML文件分离，使代码结构更清晰，便于维护。
提高代码的重用性：同一个JavaScript文件可以被多个HTML文件引入，提高代码的重用性。
提高页面加载速度：浏览器可以缓存外部脚本文件，减少不必要的网络请求，加快页面加载速度。

四、动态引入脚本

除了上述三种常见的方法外，我们还可以通过JavaScript动态加载外部脚本。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        var script = document.createElement('script');
        script.src = 'path/to/yourfile.js';
        document.head.appendChild(script);
    </script>
</body>
</html>

这种方法通常用于需要根据某些条件动态加载脚本的场景，例如按需加载某些功能模块，优化页面加载性能。

五、模块化引入脚本

现代JavaScript开发中，模块化是一种重要的编程范式。我们可以使用ES6模块语法（import和export）来引入和导出JavaScript模块。如下所示：

// utils.js
export function add(a, b) {
    return a + b;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module">
        import { add } from './utils.js';
        console.log(add(2, 3));
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

使用模块化可以使代码更具结构性和可维护性，便于开发和调试。

六、引入第三方库和框架

在实际开发中，我们经常需要引入一些第三方的JavaScript库和框架，例如jQuery、React、Vue等。通常，这些库和框架都提供了CDN（内容分发网络）地址，我们可以通过CDN快速引入这些库和框架。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        $(document).ready(function(){
            $('h1').text('Hello jQuery!');
        });
    </script>
</body>
</html>

通过CDN引入第三方库和框架，可以减少服务器的压力，提高页面加载速度。

七、异步和延迟加载脚本

为了优化页面加载性能，我们可以使用async和defer属性来异步或延迟加载外部脚本。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="path/to/yourfile.js" async></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

async属性表示脚本会异步加载和执行，不会阻塞页面的解析和渲染。而defer属性则表示脚本会在页面解析完成后才执行，同样不会阻塞页面的解析和渲染。

使用async和defer属性可以有效提高页面的加载性能，特别是当引入多个外部脚本时。

八、最佳实践

在实际开发中，引入JavaScript脚本时，我们需要遵循一些最佳实践，以提高代码的可维护性和页面的加载性能：

将JavaScript代码与HTML文件分离：尽量将JavaScript代码放在独立的.js文件中，避免内联脚本和内部脚本。
使用模块化：使用ES6模块语法或其他模块化工具（如Webpack、Rollup等）来组织和管理JavaScript代码。
使用CDN：引入第三方库和框架时，尽量使用CDN地址，提高页面加载速度。
异步和延迟加载：使用async和defer属性来异步或延迟加载外部脚本，提高页面加载性能。
压缩和混淆代码：在生产环境中，压缩和混淆JavaScript代码，减少文件大小，提高加载速度。
代码分割：将JavaScript代码按需分割，避免一次性加载所有代码，减少初始加载时间。

总结起来，HTML引入JavaScript的方法有多种，选择合适的方法可以提高代码的可维护性和页面的加载性能。在实际开发中，我们应该根据具体需求选择合适的方法，并遵循最佳实践，提高代码质量和用户体验。