我和一位学校老师有一个奇怪的说法,他说身体标签位于HTML的<head>
标签内。
现在许多学生正在学习它。不知何故,我找不到办法证明他错了。是的,所有文档,包括w3schools和MDN都表明body
不属于head
标记。我尝试在<body>
内用<head>
用HTML + CSS + JS编写一些便签代码,它们工作得很好。
令人困惑的是,即使添加了CSS和JS代码,浏览器的inspect元素也没有发出警告。
在<body>...</body>
内使用<head>...</head>
时是否有明显的副作用?
答案 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(出于某种原因)以向用户显示文档标记。如果嵌套该主体,它将占用空白空间,并且无法按原样反映实际来源。这很费力,但这绝对破坏了innerHTML
和textContent
IMO的预期功能,并且在用例中需要变通办法,因为缩进和换行符未保留。
这是innerHTML on a simple doc
-看起来很棒,就像代码一样:
现在,如果我嵌套主体,则它看起来不一样,并且在浏览器将其弄乱以修复无效的HTML后显示了一些变异的版本-更不用说,它不再反映源代码中的结构-您永远不会看到浏览器允许身体进入头部:
答案 1 :(得分:1)
您应该与他们共享标准的HTML(根)标记文档,该文档将HEAD和BODY显示为子元素。参考:The HTML Document / Root element
答案 2 :(得分:0)
<body>
标记的内容显示在浏览器页面中,而<head>
中的内容则不直接显示。 <head>
应该只包含元数据。因为现代浏览器能够处理错误的代码,所以in可能会“很好”,但是您可能会遇到较旧(或其他)浏览器的麻烦。
此外,这只是错误和错误的编码。