Question

我只是想学习更好的HTML并且我想出了这个问题：如果我可以将所有嵌入的JS和CSS移动到body标签，那么head标签的目的是什么？

我知道在头脑中我可以设置各种元标记。好。但是与脚本和css相关，将代码置于<head>内或<body>标记的最开头是否有任何区别？

我知道导入脚本会停止页面呈现，并且还会阻止浏览器从同一主机名下载超过X个资源。我知道最好的做法是将脚本移到最后（如果可能的话）。 每个案例都是不同的案例，我知道！但是我想知道将所有脚本和样式表导入从<head>移到<body>标记的第一个位置是否存在任何问题？

我知道如果我将脚本标签放在body标签内，一些旧的浏览器会渲染一些空间，但除此之外，还有其他问题吗？

修改

我发现了一些非常有趣的东西。检查此代码：

<script type="text/javascript">
document.write("testing");
</script>

如果我将其放在<head>或<body>＆＃34;测试＆＃34;的顶部单词将插入<body>的顶部。因此，很明显将js css代码放在head中是无效的，但是可以移动到没有问题（每种情况都是不同的情况）。

Answer 1

如果我可以将所有嵌入的JS和CSS移动到body标签

你做不到。身体不允许使用CSS。

头标记的目的是什么？

Meta和Title元素也只允许在Head中使用。 Meta对于指定文档的编码很有用。标题是强制性的。

但我想知道将所有脚本和样式表导入从<head>移到<body>标记的第一个位置是否存在任何问题？

移动脚本不太可能产生任何实际差异（它们会像在头部一样阻止内容的顶部）。

移动CSS会使文档无效。浏览器错误恢复非常好，但是如果你可以帮助它就没有必要触发它。

我找到了一些非常有趣的东西

头部和身体元素的开始和结束标记是可选的（元素仍然是必需的，它们只能被推断）。

使用document.write生成内容会在脚本元素之后插入。

然后，解析器在脚本元素之后找到该内容。由于它不允许在头部，它会结束头部并启动身体。

如果它遇到头端标记或正文开始标记，它会将其作为从无效代码恢复的一部分而丢弃。

正如我之前所说，浏览器错误恢复非常好，但是如果你可以帮助它就没有必要触发它。错误恢复是您最有可能找到在不同浏览器中表现不同的代码的地方之一。

Answer 2

script中包含body个标签完全正常。

从技术上讲，将style elements ¹或link elements放在body中是无效的。实际上，它是功能性的，我从来没有听说过与它相关的问题，但它是无效的HTML。如果您稍后在DOM中查找它们，您可能会发现浏览器已将它们重新定位到head（可能是它自己生成的head）。（我在style作弊的经历是，由于实际原因，我曾经在一个项目上做过这样的经历，就是它没有重新安置;不能代表link，无论如何，YMMV。）

同样，如果文档不是iframe src文档，那么对于没有任何head内容的文档，它在技术上是无效的。来自the spec：

4.2.1 head元素
...   内容模型：
  如果文档是iframe srcdoc文档... [snip]
否则：元数据内容的一个或多个元素，其中只有一个是title元素且不超过一个是base元素。

例如，您的文档中必须包含head元素，并且该元素必须为title。请注意，这并不意味着您实际上必须输入 <head>和</head>，因为这两个标记有时是optional（因为开头<body>标签）。例如，这是一个完全有效的HTML5文档：

<!doctype html>
<html>
<title>My Document</title>
<div>Hi there</div>

我不推荐，但它有效。

......头标的目的是什么？

来自the spec：

head元素表示Document的元数据集合。

它不仅包括CSS和脚本资源，还包括title和<meta charset="...">声明等内容，以防使用文档时没有指定编码的机制。

所以我建议在head中加入CSS，明确head，并包含必需的title和推荐的<meta charset="...">。只是FWIW，这是我的绝对基线最小文档：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The title</title>
</head>
<body>
</body>
</html>

是的，已授予，其中一些标签在技术上是可选的，从技术上讲，这是每个规格的等效文件：

<!doctype html>
<meta charset="UTF-8">
<title>The title</title>

......但它们的成本并不高，我更喜欢清晰度。

¹已经讨论过作用域 style元素，如果它们已经正式化，它们将在head之外有效。自2011年至少以来，这个想法一直在蠢蠢欲动，但即使截至今天，上面链接的W3C规范和WHAT-WG spec都不允许在scope元素上style。< / p>

从HTML中删除头标记

2 个答案: