HTML 应该在哪里使用script标签

在这篇文章中，我们将学习一下为什么我们不应该将<script>标签添加到HTML代码中的body标签的顶部，而应该将脚本文件添加到HTML代码的末尾。

Script标签： 用于在HTML代码中添加JavaScript，使网站的行为具有动态性。

有两种在HTML中添加脚本文件的方法：

TOP方法
END方法
1. TOP方法： 在TOP方法中，我们将在head标签或body标签的顶部添加脚本文件。

语法：
首选在head标签中的方法

<html>
<head>
    <script src="path/filename.js"></script>
</head>
<body>
    ...
</body>
</html>

在标签顶部的第二个方法

<html>
<head>
</head>
<body>
    <script>
            // Your Javascript code here
    </script>
    ...
</body>
</html>

示例： 因此，我们将通过以下解释来实施第二种方法的理解：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>Script Tag</title> 
    <style> 
        * { 
            box-sizing: border-box; 
            margin: 0; 
        } 
  
        #btn { 
            margin: 50px; 
            width: 100px; 
            height: 40px; 
            font-size: medium; 
            color: red; 
            border-radius: 10px; 
            cursor: pointer; 
            background-color: antiquewhite; 
        } 
  
        #btn:hover { 
            background-color: white; 
            color: black; 
        } 
    </style> 
</head> 
  
<body> 
    <script> 
        const button = document.getElementById("btn"); 
        button.addEventListener("click", function (e) { 
            alert("The button is Pressed"); 
        }); 
    </script> 
    <div> 
        <button id="btn">Click Here</button> 
    </div> 
</body> 
  
</html>

输出：

HTML 应该在哪里使用script标签

解释：
在标签的顶部使用了JavaScript代码，并添加了一个事件监听器’点击’，当点击按钮时，会以警报消息的形式显示文本，但由于在加载HTML代码之前加载脚本文件，所以不会显示。

TOP方法的缺点：

如我们所见，如果我们点击按钮，我们不会收到任何警报，这是因为在标签之后加载了脚本标签，并且在脚本标签内部应用了一个事件监听器，该按钮在此之前尚未创建，如下面的DOM树所示。

HTML 应该在哪里使用script标签

所以这就是为什么我们不应该像上面所示那样在body标签的顶部添加脚本标签。这是将脚本文件添加到HTML顶部的一个主要缺点。

2. 最后的方法： 在最后的方法中，我们将在body标签的底部使用脚本标签：

语法：

<html>

<head>
    ...
</head>

<body>
    ...
    <script>
            // Your javascript code here
    </script>
</body>

</html>

示例： 让我们通过下面的实现来了解结束方法的使用：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>Script Tag</title> 
    <style> 
        * { 
            box-sizing: border-box; 
            margin: 0; 
        } 
  
        #btn { 
            margin: 50px; 
            width: 200px; 
            height: 60px; 
            font-size: larger; 
            color: red; 
            border-radius: 10px; 
            cursor: pointer; 
            background-color: antiquewhite; 
        } 
  
        #btn:hover { 
            background-color: white; 
            color: black; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <button id="btn">Click Here</button> 
    </div> 
    <script> 
        const button = document.getElementById("btn"); 
        button.addEventListener("click", function (e) { 
            alert("The button is Pressed"); 
        }); 
    </script> 
</body> 
  
</html>

输出：

HTML 应该在哪里使用script标签

说明：
在这个例子中，我们添加了与上面代码中相同的JavaScript，该JavaScript在按钮上添加了事件监听器。通过观察我们可以看到，由于先加载HTML代码，然后再添加JavaScript文件，所以’onCick’事件可以在按钮上工作。DOM
API的查询选择器会找到所有的HTML元素。

End方法的优势：