< STYLE > 必须在 HTML 文档的 < HEAD > 中吗？

严格地说，style标签是否需要位于 HTML 文档的 head内部？4.01标准暗示了这一点，但没有明确说明:

STYLE 元素允许作者 将样式表规则放在 HTML 允许任何数字 在 HEAD 部分的 STYLE 元素 一份文件。

我之所以说“严格来说”，是因为我有一个应用程序可以将 style 元素放入主体中，而且我测试过的所有浏览器似乎都使用 style 元素。我只是想知道这是否合法。

95661 次浏览
小开

它们不应该出现在头部以外，但是它们还是起作用了，尽管你可能会注意到一个快速的闪烁。站点不应该使用外部的 style 标签进行验证，但这真的重要吗？此外，链接标签也可以在头部以外工作，即使它们不应该这样。

小开

除了 <head>之外的任何地方的样式标记都不会使用 W3C 规则进行验证。

小开

正如其他回复所说，它实际上并不需要出现在那里。但是，它不会验证。在这个例子中，这可能无关紧要，但是请记住，html 的呈现完全取决于浏览器。据我所知，今天所有使用过的浏览器都会支持把它放在头脑之外，但是你不能保证对于未来的浏览器和未来的浏览器版本。

坚持标准，你就会更安全。安全程度如何，还有很多争论。

小开
最佳答案

style应该只包含在文档的 head中。

除了验证点之外，在 body上使用 style时可能感兴趣的一个注意事项是 未经设计的内容闪现。浏览器会显示样式为 之后的元素，使它们在大小/形状/字体和/或闪烁上变化。这通常是手艺不好的表现。一般来说，你可以把 style放在任何你想放的地方，但是只要有可能就尽量避免。

HTML5引入了一个 scoped属性，该属性允许 style标记包含在主体中的任何地方，但是之后他们又删除了它。

小开

虽然其他的答案是正确的，我很惊讶没有人解释 哪里的标准不允许 head之外的样式。

它实际上是 在 head元素部分(在 DTD中) :

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">


<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

是的，我知道 DTD 很难读懂。

这是唯一出现 STYLE元素的地方，因此它在其他地方是无效的。

小开

长话短说

  • 根据目前的规范，是的，style元素 必须的总是在 head。没有例外(除了 template元素中的一个 style元素，如果你想计算的话)。

  • 历史上并非总是如此。如果您关心规范的细节及其历史，请继续阅读。

  • 无论规范说明什么，在所有主流浏览器中使用 body 是的中的 style元素或多或少都可以工作。然而，它被认为是一种不好的做法，因为它违反了规范，也因为它可能导致不良后果，比如更差的渲染性能或“未样式化内容的闪现”。

规格历史

HTML 2中不存在 style元素。它们是在 HTML 3.0中引入的，在 HTML 3.0中，它们包含在可以包含在 头部元素中的元素列表中，但是 没有包含在可以包含在 身体元素中的元素列表中。因此，在元素第一次被定义的时候，它只能被包含在 head中。

直到 HTML5为 style元素引入了 scoped属性(因为已经删除了)之前，这种情况一直没有改变(尽管使用了不同的措辞)。当存在这个属性时，意味着允许将一个 style元素放置在主体中的一个元素中，以便只对该元素的后代进行样式化。然而，这个特性从未在任何真正的浏览器中实现过(至少在不需要通过开发者标志启用的情况下是如此) ，并且从 W3C 和 WhatWG 规范 “由于缺乏执行者的兴趣”中删除了。此后，只有在允许元数据内容的上下文中才允许 style元素，元数据内容只是头。因此，我们回到了 HTML 5之前的规则。

然而，由于两个规范组织的一个错误，两个规范中作为附录列入的非规范性要素索引没有适当更新，以反映 scoped的删除，从而与规范性规范不一致。我指出这两个 什么工作组和 到 W3C，并在这样做不知不觉地设置在运动事件，造成两个规格分歧。

针对规范指标与非规范指标不一致的问题，工作组的解决办法是对非规范指标进行 接受我的徽章校正。

另一方面，W3C 拒绝了我的同类补丁，转而支持 更新标准规范，允许在 body中使用 style元素，同时警告说这可能会引起问题，应该“小心”处理。这一变化背后的原因是使规范与现实生活中的浏览器行为保持一致。

因此，从2017年3月开始，这个问题的正式答案取决于您选择听取哪个标准组织的意见。如果您列出了(通常更受尊重的) WhatWG 规范，那么 style元素不允许出现在 body中。如果您列出了 W3C 规范，那么它是允许的，但不推荐。

这种愚蠢的状态随着 2019年4月 W3C 和 WhatWG 之间的和平条约的出现而结束(也许像其他许多不一致的地方一样) ，2019年4月 W3C 和 WhatWG 之间的和平条约同意 WhatWG 规范将成为唯一真正活跃的 HTML 标准，W3C 只是以编号的 HTML 规范的形式发布快照，而不是并行开发一个竞争规范。因此，从2017年到 W3C fork 允许 body中的 style元素的变化不再是任何当前规范的一部分; 它只是历史的好奇心。

所以，今天，我们只需要看看 什么工作组规范来决定什么是官方允许的，它是这样说的:

4.2.6. style元素

类别 :

元数据内容 。

可以使用此元素的上下文 :

预计 元数据内容的位置。
在 <noscript>元素中，该元素是 <head>元素的子元素。

CTRL-Fing 通过 单页规格说明书揭示了内容模型包含元数据内容的唯一元素是 head元素。

我前面提到的非规范性的 元素的索引元素的索引固定也证实了 style元素的唯一允许的父元素是 head或 noscript元素。

小开

根据这个网站，HTML5.1(在草案中)和 WHATWG 允许 <style>标签放在主体中:

Http://www.html.am/tags/html-style-tag.cfm

它似乎也已经被浏览器支持了相当长的一段时间。根据 StackOverflow 的回答，Firefox 3 + ，IE6 + ，Safari 2 + 和 Chrome 12 + 都支持:

Https://stackoverflow.com/a/10989663/297793

小开

根据 HTML 5.2规范(在草案中) ，样式标记只允许在文档的头部使用。

HTML 5.2风格标签草稿(2016年8月18日)

样式元素仅限于出现在 文件。

小开

您可以使用样式标记内部的头部或正文部分，或外部的 html 标记也(外部的 html 是不推荐的)。在实时项目中，很多时候你可以看到他们在 html 标签之外使用样式标签

小开

HTML5.2 W3C推荐标准，2017年12月14日(不是上面提到的早期草案)现在说你可以包括 <style>。

“在身体内，流动内容是预期的。” (第4.2.6条)


提交答案