我应该将脚本写在 HTML 的 body 还是 head 中?
在 HTML 中，脚本标记可以插入在 head 部分或 body 部分，通常 java 脚本代码插入在脚本打开和关闭标记之间。
<script> //此处为 JavaScript 代码 </script>
我们可以在 HTML 文档中插入任意数量的脚本。脚本可以放在 HTML 页面的 <body> 或 <head> 部分或两者中。现在，让我们看看如果我们在 HTML 的 body 或 head 中插入脚本是否有任何区别。
最好将 java 脚本放在 <body> 标签关闭之前，而不是 <head> HTML 部分。
HTML 总是遵循自上而下的方式来执行程序，如果我们在 head 部分编写 java 脚本，则首先加载 java 脚本，然后加载 HTML 代码，然后会产生一些问题，例如 −
如果 java 脚本导致任何错误，接下来它将不会读取我们的 HTML 内容，它会显示错误。
如果 java 脚本代码较多，则我们访问的页面显示 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>
当我们运行上述程序时，我们会看到文本，但颜色没有变化。
示例
在下面的示例中，让我们尝试通过在 body 标签关闭之前的 HTML 代码中添加 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> 中并不总是会导致错误。
因此，与正文相比，在头部部分编写脚本几次更好。根据代码的使用情况和长度，用户可以选择编写代码。
示例
考虑另一个示例以了解有关将 Java 脚本放在头部或正文部分的更多信息。
下面的示例演示了相反的情况，如果我们在头部部分插入 Java 脚本，颜色会显示，而在正文中不会显示。
<!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>
执行上述程序时，将显示一个表单，其标题为"插入脚本"，标题为"TutorialsPoint"，ID 属性为"TutorialsPoint"，并显示一个标记为"单击"的提交按钮。
单击"单击"按钮后，将显示以下页面
示例
让我们尝试通过在 body 标签关闭之前的 HTML 代码中添加 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 属性、按钮和标题都居中对齐。此外，文本颜色不会改变，因为代码不会影响段落的颜色。
单击"单击它"按钮后，将显示以下页面
