数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究我应该在 HTML 的 body 部分还是 head 部分编写我的脚本？
在 HTML 中，脚本标签可以插入到 head 部分或 body 部分，通常 JavaScript 代码插入在 script 的开始和结束标签之间。
<script> //JavaScript code here </script>
我们可以在 HTML 文档中插入任意数量的脚本。脚本可以放在 <body> 或 <head> 部分，或者同时放在两个部分中。现在，让我们看看如果我们在 HTML 的 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 部分编写脚本更好。根据代码的使用情况和长度，用户可以选择编写代码的位置。
示例
考虑另一个示例，以了解更多关于在 head 或 body 部分放置 JavaScript 的信息。
下面的示例演示了相反的情况，如果我们在 head 部分插入 JavaScript，颜色会显示，而在 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 属性、按钮和标题都居中对齐。此外，文本颜色没有改变，因为代码没有影响段落的颜色。
点击“点击”按钮后，将显示以下页面
653 次浏览
