【问题标题】:What's the difference between HTML <head> and <body> tags?HTML <head> 和 <body> 标签有什么区别?
【发布时间】:2011-09-12 07:23:27
【问题描述】:

HEAD 标签和 BODY 标签有什么区别?

大多数 HTML 书籍仅“简要”提及 &lt;head&gt;&lt;body&gt; 标签……但它们很快就消失了。

它们会影响浏览器呈现网页的方式吗?

另外,它们会影响 javascript 的运行顺序吗?

(我的意思是,如果我在 &lt;head&gt; 标记内有一个 javascript,它会在 &lt;body&gt; 标记内的另一个 javascript 之前运行吗?即使 &lt;body&gt;&lt;head&gt; 之前出现?)

这太令人困惑了——我从来没有使用过头部/身体标签,但我从来没有遇到过任何问题。 但是在阅读 Jquery 教程时,我看到有人建议将一些代码放在 &lt;head&gt; 中,而将其他代码放在 &lt;body&gt; 标记中。

谢谢!!!

【问题讨论】:

标签: javascript html


【解决方案1】:
  • head 标记中的内容是不应呈现的内容:有关页面的信息以及如何处理它。
  • body 标签中的东西是应该显示的东西:实际的内容。
  • 正文中的 Javascript 在读取和呈现页面时执行。
  • head 中的 Javascript 在呈现任何内容之前被解释。

【讨论】:

  • 嗨,“正文中的 Javascript 在读取和呈现页面时执行。”,“和”是指它将被执行两次吗?阅读后一次,页面呈现后一次?
  • @HelinWang 没有。我的意思是当渲染到body中的那个点时就会执行。
  • 传统上,最好将脚本标签放在“”标签的末尾,因为浏览器会停止解析文档,直到所有脚本都加载完毕。这不适用于现代浏览器。
【解决方案2】:

一般而言,javascript 代码会先于正文中的代码在头部起作用。头部分通常用于包含有关您不一定会看到的页面的信息,例如元关键字元描述或页面标题。您还可以链接到任何外部文件,例如 head 部分中的 .css .js 文件,因为它们需要在页面显示之前加载。

正文部分中的任何内容都是您希望在屏幕上看到的内容。

【讨论】:

【解决方案3】:

&lt;script&gt; 标签在浏览器在加载页面时遇到它们时运行。 &lt;head&gt; 不能包含页面内容,它只能包含元信息(标题、描述等)、样式和脚本。因此,如果您在&lt;head&gt; 中放置&lt;script&gt; 标记,则可以确保它在浏览器开始加载页面内容之前运行(必须进入&lt;body&gt;)。

如果你想操纵页面的内容,你需要确保你的脚本出现在你正在操纵的内容之后。这就是人们选择将脚本放在&lt;body&gt; 末尾的原因。

如果您的代码草率(例如,标签未正确关闭),这可能会导致问题。这就是为什么像 jQuery 这样的库具有帮助您在正确的时间运行代码来操作文档的功能。

【讨论】:

  • 完美答案,把我所有的问题都说清楚。它还描述了将 后面的情况
【解决方案4】:

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

您可以放置​​无限数量的 文档中的脚本,您可以 在正文和正文中都有脚本 头部分。

通常的做法是把所有 在头部的功能,或在 页面底部。这样他们 都在一个地方,不 干扰页面内容。

head 和 body 脚本的主要区别在于,通常喜欢函数的人在 in the 中使用 javascript,而喜欢 inline 实践的人大多会在文档下方使用它。

功能性

<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>

【讨论】:

    【解决方案5】:

    浏览器将处理&lt;head&gt; 中的内容以准确显示&lt;body&gt;

    &lt;head&gt; 包含您的页面使用的字符集、刷新时间、您可能想要包含的外部工作表或脚本以及有关您的页面的信息。

    &lt;body&gt; 仅包含面向显示的内容,通常基于 HTML。

    保持模型(即信息)和视图(即 HTML)分开很重要。为什么?稍后,您可能想要更新一种样式,并且您不想在每次发生时都在您的所有 HTML 中追踪它。最好在&lt;head&gt; 中为整个文档在一个地方执行此操作。

    【讨论】:

      【解决方案6】:

      HTML 文件有标题和“正文”(有效负载)——就像 HTTP 请求一样。

      &lt;body&gt; 封装了文档的内容,而&lt;head&gt; 部分包含元元素,即,关于内容的信息。这(通常)是标题、编码、作者、样式等。

      至于您关于 JavaScript 的问题:一般而言,JavaScript 会在(加载和)解析时进行评估。因此,如果您将 JavaScript 嵌入到 &lt;head&gt; 部分,则应该立即对其进行解析。

      【讨论】:

        【解决方案7】:

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

        body 标签是您放置您想要显示的网站部分的位置,例如 p 标签、div 等。

        【讨论】:

        • 这个问题是 4 年前提出的,用户不太可能仍在尝试解决问题...做...如果它太旧了,就这样吧,它只是作为一个历史后备问题服务
        【解决方案8】:

        据我所知:

        head 部分中的 JavaScript 通常用于预加载某些文件(通常是过程或函数,视情况而定)。例如,使用 Time() 或 Date() 函数的网站将要求在网站完全加载之前调用包含这些函数的 .js 文件,从而允许实例在即将使用之前可用(预加载)。这同样适用于其他自定义函数。

        正文部分的 JavaScript 主要用于向网站添加额外功能。例如,在自定义 .js 文件的情况下,函数用于检查输入字符串中单词的正确性或将输入字符串中输入的所有字符匹配为特定长度。

        使用这两种约定中的任何一种的缺点是从 head 部分调用自定义 .js 文件(用于网站功能)。这意味着 JS 文件在网站内容完全加载之前就已经用尽了它的功能。

        【讨论】:

          猜你喜欢
          • 2018-09-25
          • 2012-12-27
          • 2012-02-14
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-01-14
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多