js文件怎么加入html

在HTML页面中引入JavaScript文件（简称JS文件）是网站开发中常见的操作，通过引入JS文件，可以实现丰富的前端功能和动态交互效果，如何将JS文件加入HTML呢？下面就来详细讲解一下具体的步骤和方法。

我们需要明确JS文件的来源,JS文件可以是本地文件，也可以是远程CDN链接，根据不同的来源，引入方法略有差异。

引入本地JS文件

创建JS文件：在项目的相应目录下创建一个.js文件，例如index.js。
编写JS代码：在创建的.js文件中编写JavaScript代码。

JavaScript

// index.js
function showAlert() {
  alert('Hello, World!');
}

在HTML中引入JS文件：在HTML文件中，我们需要使用<script>标签来引入JS文件，具体方法如下：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <button onclick="showAlert()">点击我</button>
    <!-- 引入本地JS文件 -->
    <script src="index.js"></script>
</body>
</html>

在上述代码中,<script src="index.js"></script>就是引入本地JS文件的关键代码。src属性指定了JS文件的路径，如果JS文件与HTML文件在同一目录下，直接写文件名即可。

引入远程JS文件

如果你需要引入一个远程CDN链接的JS文件,步骤如下：

找到CDN链接：你想使用jQuery库，可以在网上找到对应的CDN链接，如：https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js。
在HTML中引入：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <button id="myButton">点击我</button>
    <!-- 引入远程JS文件 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                alert('Hello, World!');
            });
        });
    </script>
</body>
</html>

在上述代码中,我们通过<script>标签引入了远程的jQuery库，并使用jQuery实现了点击按钮弹出提示框的功能。

注意事项

位置：通常情况下，<script>标签可以放在<head>或<body>中，如果JS代码需要操作DOM元素，建议放在<body>标签的底部。
异步加载：如果你希望JS文件异步加载，可以在<script>标签中添加async或defer属性。
类型：在HTML5中，默认的脚本语言是JavaScript，所以不需要指定type属性，但在老版本的HTML中，可以使用type="text/javascript"。