我应该在 HTML 的 body 部分还是 head 部分编写我的脚本？

在 HTML 中，脚本标签可以插入到 head 部分或 body 部分，通常 JavaScript 代码插入在 script 的开始和结束标签之间。

<script>
   //JavaScript code here
</script>

我们可以在 HTML 文档中插入任意数量的脚本。脚本可以放在 <body> 或 <head> 部分，或者同时放在两者中。现在，让我们看看如果我们将脚本插入到 body 或 head 中是否有任何区别。

最好将 JavaScript 代码放在 <body> 结束标签之前，而不是放在 HTML 的 <head> 部分。

HTML 总是遵循自上而下的方法来执行程序，如果我们在 head 部分编写 JavaScript，则首先加载 JavaScript，然后是 HTML 代码，这会产生一些问题，例如：

  • 如果 JavaScript 导致任何错误，接下来它将不会读取我们的 HTML 内容，它会显示错误。

  • 如果 JavaScript 代码过多，那么我们访问的页面显示 HTML 内容的速度会变慢，因为所有 JavaScript 代码都在加载 HTML 之前加载，这会减慢服务器速度。

为了克服这些缺点，最好在 body 结束括号之前编写 JavaScript 代码。

示例

下面给出的示例试图将段落的文本颜色更改为红色，但颜色没有更改，因为脚本在段落标签之前加载。

结果，在脚本执行时段落元素不可用，因此颜色不会改变。

<html>
<head>
   <script>
      document.querySelector('#sample').style.color="red"
   </script>
</head>
<body>
   <p id="sample">
      Changes the text of TutoriaslPoint to Red Color!
   </p>
</body>
</html>

当我们运行上述程序时，我们会看到文本，颜色没有变化。

示例

在下面的示例中，让我们尝试通过在 HTML 代码的 <body> 结束标签之前添加 JavaScript 来更改代码。

<html>
<body>
   <p id="sample">
      Changes the text of TutoriaslPoint to Red Color!
   </p>
   <script>
      document.querySelector('#sample').style.color="red"
   </script>
</body>
</html>

当我们运行上述程序时，文本颜色会变为红色，但是将 JavaScript 放在 HTML 的 <head> 中并不总是会导致错误。

因此，与 body 部分相比，很多时候在 head 部分编写脚本更好。用户可以根据代码的使用情况和长度选择编写代码的位置。

示例

考虑另一个示例，以了解更多关于将 JavaScript 放置在 head 或 body 部分的信息。

下面的示例演示了相反的情况，如果我们将 JavaScript 插入到 head 部分，则颜色会显示，而在 body 部分则不会显示。

<!DOCTYPE html>
<html>
<head>
   <script>
      function main() {
         document.getElementById("sample").innerHTML = "Learning Script Tag";
      }
   </script>
</head>
<body>
   <h2>Insert Script in Head Section</h2>
   <p id="sample" style="color:blue;">TutorialsPoint</p>
   <button type="button" onclick="main()">click it</button>
</body>
</html>

执行上述程序后，将显示一个标题为“在 head 部分插入脚本”的表单，以及一个 ID 属性为 TutorialsPoint 和一个标记为“点击”的提交按钮。

点击“点击它”按钮后，将显示以下页面

示例

让我们尝试通过在 HTML 代码的 <body> 结束标签之前添加 JavaScript 来更改代码。

<!DOCTYPE html>
<html>
<center>
   <body>
      <h2>Insert Script in Body Section</h2>
      <p id="sample">TutoriaslPoint</p>
      <button type="button" onclick="sample()">Click It</button>
      <script>
         function sample() {
            document.getElementById("sample").innerHTML = "Learning Script Tag";
         }
      </script>
   </body>
</center>
</html>

当我们运行上述程序时，我们看到对齐方式发生了变化，ID 属性、按钮和标题都居中对齐。此外，文本颜色不会更改，因为代码没有影响段落的颜色。

点击“点击它”按钮后，将显示以下页面

更新于：2023年10月4日

652 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告