HTML HTML文件中JS脚本应该放在哪里

在本文中，我们将介绍在HTML文件中放置JS脚本的几种方式及其最佳实践。在HTML中，我们可以将JS脚本放在不同的位置，得到不同的效果。下面我们将逐一介绍这些方式。

阅读更多：HTML 教程

内联方式

内联方式是将JS代码直接嵌入到HTML文件中的一种方式。使用内联方式，可以将JS代码直接放置在HTML的body或head标签中，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>HTML内联JS</title>
    <script>
        function sayHello() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <h1>欢迎使用内联JS</h1>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

内联方式的优点是简单且方便，适用于较小的JS脚本。然而，过多的内联JS代码会导致HTML文件变得混乱且难以维护。

内部脚本方式

内部脚本是将JS代码放置在HTML文件中的<script>标签内部的一种方式。使用内部脚本方式，可以将JS代码放置在head或body标签中的任意位置，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>HTML内部脚本</title>
    <script src="scripts.js"></script>
</head>
<body>
    <h1>欢迎使用内部脚本</h1>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

在上面的例子中，我们将JS脚本代码提取到了一个名为scripts.js的外部文件中，并通过<script>标签引入。这种方式使得HTML文件更加整洁且易于维护。同时，可以通过在<script>标签内部添加defer或async属性来控制JS脚本的加载行为。

defer属性告诉浏览器该脚本的加载不会阻塞HTML的解析，并且该脚本将在HTML解析完成之后执行。
async属性告诉浏览器该脚本的加载和执行都是异步进行的，不会阻塞HTML的解析。

外部脚本方式

外部脚本是将JS代码放置在单独的外部文件中并通过<script>标签引入的一种方式。与内部脚本方式相比，外部脚本方式更加模块化和可维护，也可以被多个HTML文件共享。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML外部脚本</title>
    <script src="scripts.js"></script>
</head>
<body>
    <h1>欢迎使用外部脚本</h1>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

在上面的例子中，我们将JS脚本代码提取到了一个名为scripts.js的外部文件中，并通过<script>标签引入。这种方式使得HTML文件更加整洁且易于维护。同时，可以通过在<script>标签内部添加defer或async属性来控制JS脚本的加载行为，同样适用于外部脚本方式。