HTML中的head标签内有body标签?

时间:2019-11-05 19:27:21

标签: html

我和一位学校老师有一个奇怪的说法,他说身体标签位于HTML的<head>标签内。

现在许多学生正在学习它。不知何故,我找不到办法证明他错了。是的,所有文档,包括w3schoolsMDN都表明body不属于head标记。我尝试在<body>内用<head>用HTML + CSS + JS编写一些便签代码,它们工作得很好。

令人困惑的是,即使添加了CSS和JS代码,浏览器的inspect元素也没有发出警告。

<body>...</body>内使用<head>...</head>时是否有明显的副作用?

3 个答案:

答案 0 :(得分:3)

以下是很难证明这一点的信息-现行的HTML标准和HTML5建议。这些是MDN所使用的资源,但最好向老师展示无可争议的原始资源-这些内容是从一开始就明确指出的。

HTML生活标准-标题:
https://html.spec.whatwg.org/multipage/semantics.html#the-head-element

HTML5建议-标头:
https://www.w3.org/TR/html50/document-metadata.html#the-head-element

HTML生活标准-正文:
https://html.spec.whatwg.org/multipage/sections.html#the-body-element

HTML5建议-正文:
https://www.w3.org/TR/html50/sections.html#the-body-element

说明了...

头:
可以使用此元素的上下文: 作为html元素中的第一个元素。

身体:
可以使用此元素的上下文: 作为html元素中的第二个元素。

head的内容模型也完全不同,明确声明head用于元数据,而不是流内容:
内容模型: 如果文档是iframe srcdoc文档,或者可以从更高级别的协议获得标题信息:元数据内容的零个或多个元素,其中不超过一个为title元素,不超过一个为base元素。 否则:元数据内容的一个或多个元素,其中一个元素是标题元素,而一个元素是基础元素。”

编辑:很难显示任何损坏的内容,因为这是一个业余和简单的错误,几乎每个浏览器都会为您修复它。不过,这仅适用于DOM结构,属性等-解析主体HTML或textContent时,您会发现嵌套主体时在空格上存在细微的差异。

例如,假设您有一个具有HTML编辑器的应用程序,该编辑器加载了当前页面的HTML(出于某种原因)以向用户显示文档标记。如果嵌套该主体,它将占用空白空间,并且无法按原样反映实际来源。这很费力,但这绝对破坏了innerHTMLtextContent IMO的预期功能,并且在用例中需要变通办法,因为缩进和换行符未保留。

这是innerHTML on a simple doc-看起来很棒,就像代码一样:

enter image description here

现在,如果我嵌套主体,则它看起来不一样,并且在浏览器将其弄乱以修复无效的HTML后显示了一些变异的版本-更不用说,它不再反映源代码中的结构-您永远不会看到浏览器允许身体进入头部:

enter image description here

答案 1 :(得分:1)

您应该与他们共享标准的HTML(根)标记文档,该文档将HEAD和BODY显示为子元素。参考:The HTML Document / Root element

答案 2 :(得分:0)

<body>标记的内容显示在浏览器页面中,而<head>中的内容则不直接显示。 <head>应该只包含元数据。因为现代浏览器能够处理错误的代码,所以in可能会“很好”,但是您可能会遇到较旧(或其他)浏览器的麻烦。

此外,这只是错误和错误的编码。