HTML的<head>和<body>标签有什么区别?

27

<head>标签和<body>标签有什么区别?

大多数HTML书籍只是“简单地”提到了<head><body>标签,但很快就离开了。

它们会影响浏览器渲染网页吗?

此外,它们会影响JavaScript运行的顺序吗?

(我的意思是,如果我在<head>标签中放置一个JavaScript,它会在<body>标签中放置的另一个JavaScript之前运行吗?即使<body>标签在<head>标签之前出现?)

这太令人困惑了--我从来没有使用过<head><body>标签,但我从来没有遇到过任何问题。 但是,在阅读Jquery教程时,我看到一些人建议将一些代码放在<head>中,将其他代码放在<body>标签中。

谢谢!!!


我从未见过正文在标题之前的文档。那样合法吗? - CodesInChaos
可能是在HTML的body或head中编写脚本?的重复问题。 - Wesley Murch
8个回答

26
  • 头部标签中的内容不应该被渲染:它们包含了关于页面及其处理方式的信息。
  • 主体标签中的内容是应该被显示的实际内容。
  • 主体中的Javascript代码将在读取过程中和页面渲染时执行。
  • 头部中的Javascript代码将在任何东西被渲染之前解释执行。

2
嗨,“在HTML文档中的JavaScript代码会在读取时立即执行,并在页面渲染时继续执行。”你所说的“and”是指它会被执行两次吗?一次在读取后,一次在页面渲染后? - Helin Wang
@HelinWang 不是的。我的意思是当渲染到文档中的那个位置时,它才会被执行。 - trutheality
传统上,将脚本标签放置在´<BODY>´标签的末尾被认为是最佳实践,因为浏览器会在所有脚本加载完毕之前停止解析文档。但对于现代浏览器来说,这并不是真的。 - max

16

通常 JavaScript 代码会在页面 body 中的代码之前执行。head 部分通常用于包含一些你看不到的页面信息,如关键字、描述或页面标题。你还可以在 head 部分链接任何外部文件,如.css 或 .js 文件,因为它们需要在页面显示之前加载。

而 body 部分是你预期在屏幕上看到的内容。


1
根据这个https://dev59.com/anI-5IYBdhLWcg3wj5FG#1833792,最好在关闭“body”之前链接JS,以避免下载阻塞渲染。 - wacha

12
<script>标签在页面加载时遇到它们时会运行。 <head>不能包含页面内容,它只能包含元信息(标题、描述等)、样式和脚本。因此,如果你将<script>标签放在<head>中,你可以确保它在浏览器开始加载页面内容之前运行(必须放在<body>中的内容)。
如果你想操作页面内容,则需要确保你的脚本出现在你要操作的内容之后。这就是为什么人们选择把脚本放在<body>末尾的原因。
如果你的代码混乱(例如,标签没有正确关闭),这可能会导致问题。这就是为什么像jQuery这样的库具有帮助你在正确时间运行操作文档的功能。

完美的答案,让我所有的问题都清晰明了。此外,它描述了当<script>标签放置在<head>和<body>后面的情况。 - nahab

4
在我有限的了解中:
在标签中使用的JavaScript通常是为了预加载某些文件(通常是过程或函数)。例如,利用Time()或Date()函数的网站需要在完全加载网站之前调用包含这些函数的.js文件,使实例可用(预加载)以供即将使用。同样适用于其他自定义功能。
在标签中使用的JavaScript主要是为了添加额外的功能到网站上。例如,在自定义.js文件的情况下,可以编写一个函数来检查输入字符串中单词的正确性或匹配所有输入字符串中的字符长度是否符合要求。
使用这两种约定的缺点在于从头部调用自定义.js文件(用于网站功能)。这意味着JS文件在网站内容完全加载之前已经耗尽了其功能。

2

浏览器将处理在<head>中的内容以准确显示<body>

<head>包含诸如页面使用的字符集、刷新时间、您可能想要包含的外部样式表或脚本以及有关页面的信息等内容。

<body>仅包含与显示有关的内容,通常是基于HTML的。

保持模型(即信息)和视图(即HTML)分开很重要。为什么?稍后,您可能要更新样式,并且您不想每次发生更改时都跟踪整个HTML。最好在<head>中为整个文档的一个位置进行操作。


2
一个HTML文件有头部和"body"(负载)- 就像一个HTTP请求一样。 <body>封装了文档的内容,而<head>部分包含元素,即有关内容的信息。这通常是标题、编码、作者、样式等。
至于你关于JavaScript的问题:通常情况下,JavaScript会被解析并立即执行。因此,如果您将JavaScript嵌入到<head>部分中,它应该会立即被解析。

2

http://www.w3schools.com/js/js_whereto.asp

您可以在文档中放置无限数量的脚本,并且同时可以在正文和头部部分中使用脚本。
通常将所有函数放在头部部分或页面底部是一种常见做法。这样它们都在一个地方,不会干扰页面内容。
头部和正文脚本的主要区别在于通常喜欢使用JavaScript函数的人会将其放在标签中,而喜欢使用内联做法的人则大多会将其放在文档下方。 功能性翻译
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>

<body>

<h1>My First Web Page</h1>

<p id="demo"></p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>
</html>

内联

<html>
<body>
<h1>My First Web Page</h1>

<p id="demo"></p>

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>

</body>
</html>

0

Head标签通常用于导入其他文件并定义页面的属性,例如元数据,这些属性不会显示在页面上。因此,您可以将CSS / JavaScript文件放置在Head部分中,这些文件是您网页所需的,并且它们会在页面显示之前加载。

Body标签是您放置要显示的网站部分的地方,例如p标签,div等。


这个问题是4年前提出的,用户很可能已经不再尝试解决这个问题了...在这个论坛上,始终要检查日期(靠近用户符号),以了解该怎么做...如果太旧了,就让它保持原样,它只作为历史回退问题。 - Bonatti

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接