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

136

严格来说，style标记是否需要head位于HTML文档的内部？4.01标准暗示了这一点，但未明确说明：

STYLE元素允许作者将样式表规则放在文档的开头。HTML允许在文档的HEAD部分中使用任意数量的STYLE元素。

我说“严格来说”是因为我有一个将样式元素放入体内的应用程序，而我测试过的所有浏览器似乎都使用了样式元素。我只是想知道那是否合法。

html  coding-style  html-head 
— 伊尔森
source
1
如果您有疑问，W3C标记验证器总是可以帮助您：) http://validator.w3.org/
— Lazlo，2009年
html email是“在<head>中放入<style>规则”的一个例外，因为许多Webmail服务将简单地去除任何head元素，这意味着您的样式已消失。
— user132837 2011年
1
这些规范要求浏览器支持style中的body，所以这对我来说已经足够好了，无论作者指南各节所暗示的是什么。
— WraithKenny

Answers:

104

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

除了验证点，在使用时style，您可能会感兴趣的一个警告body是未样式化内容的闪烁。浏览器将获得在显示后将被设置样式的元素，从而使它们在大小/形状/字体和/或闪烁上移动。通常，这是工艺差的标志。通常，您可以随意放置style任何地方，但是请尽可能避免使用它。

HTML 5引入了一个scoped属性，该属性允许将style标签包含在正文中的所有位置，但随后又将其删除。

— 埃斯特万·库伯（EstebanKüber）
source
6
到目前为止，似乎只有Firefox支持该scoped属性，请参见caniuse.com/#feat=style-scoped。
— Jaime Hablutzel 2015年
2
链接的文章已经消失在链接腐乙醚，所以这里的最新的存档版本：web.archive.org/web/20150525042412/http://bluerobot.com/web/css/...
— 扎卡里穆雷
@ZacharyMurray感谢您的注意！我将正文中的链接更新为Web存档之一。
— EstebanKüber'16
1
该规范要求兼容的浏览器支持style标签，body因此，尽管该规范是作者的一部分，但我认为主体样式仍然有效。github.com/whatwg/html/issues/1605#issuecomment-235961103
— WraithKenny
19

简短答案

  • 根据当前规范，是的，style元素必须始终位于中head。没有例外（如果要计数的话，style元素内的template元素除外）。

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

  • 无论规格如何，使用 style在所有主要浏览器中元素body 都或多或少地起作用。但是，这被认为是不好的做法，因为它违反了规范并且因为它可能导致不良后果，例如较差的渲染性能或“样式样式内容闪烁”。

规格历史

style元素在HTML 2中不存在。它们是在HTML 3.0中引入的，它们包含在可以包含在The Head Element中的元素列表中，但是中的元素列表中不包含在The Body元素中可以包含的元素列表中。因此，在第一次指定元素时，它只能包含在中head。

直到HTML 5引入了（自删除后）scoped属性以来，情况一直如此（尽管使用了不同的措辞表示）。style元素。当存在此属性时，该属性旨在允许将style元素放置在正文中的元素内，以仅设置该元素的后代的样式。但是，该功能从未在任何真正的浏览器中使用过（至少不需要通过开发者标志启用），并且由于缺乏实现者的兴趣而从W3C和WhatWG规范中删除了该功能。此后，style仅在允许元数据内容的上下文（仅是头部）中允许元素。因此，我们回到了与HTML 5之前相同的规则。

但是，由于两个规范组织都犯了一个错误，两个规范中作为附录包括的元素的非规范索引未正确更新以反映对的删除scoped，从而使其与规范不一致。我向WhatWG和W3C指出了这一点，并在这样做的过程中不知不觉地引发了使这两个规范发生差异的运动事件。

WhatWG解决规范规范和非规范索引之间不一致的方法是接受我的补丁程序来纠正非规范索引。

另一方面，W3C拒绝了我的等效补丁程序，而是建议更新规范规范以允许使用中的style元素body，同时请注意这可能会引起问题，并应“谨慎”进行处理。进行此更改的原因是使规范与现实生活中的浏览器行为保持一致。

因此，从2017年3月开始，对这个问题的正式答案取决于您选择听哪个标准组织。如果您列出了（通常更受人尊敬的）WhatWG规范，则该style元素中不允许使用body。如果您列出了W3C规范，则允许这样做，但不建议这样做。

W3C与WhatWG之间的2019年4月和平条约结束了这种愚蠢的状况（也许像许多其他此类矛盾一样）同意WhatWG规范将成为一个真正的实时HTML标准，而W3C只会从编号中释放快照HTML规范，而不是并行开发竞争规范。因此，从2017年到W3C分支的更改，允许中的style元素body不再是任何当前规范的一部分；这仅仅是历史的好奇。

因此，今天，我们只需要关注WhatWG规范即可确定正式允许的内容。它有这样说：

4.2.6。的style元素

分类：

元数据内容。

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

期望元数据内容的地方。
在<noscript>元素中是元素的子<head>元素。

单页规范中的 CTRL-Fing 显示，其内容模型包含元数据内容的唯一元素是head元素。

我前面提到修复的元素的非规范索引也证实，style元素的唯一允许父元素是a head或noscriptelement。

— 马克·阿默里
source
18

尽管其他答案是正确的，但令我惊讶的是，没有人解释标准在哪些地方不允许使用外部样式head。

它实际上在The headElement（和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元素发生的唯一位置，因此暗中在其他地方无效。

— 用户123444555621
source
6
我感到很困惑。
— dav_i
1
现在应该使用HTML5，而IIRC没有DTD。仅HTML5规范所说的就是是或不是。
— Jan Kyu Peblik
14

他们不应该超出头脑，但他们仍然可以工作。尽管您可能会注意到快速闪烁。该网站不应该使用头部之外的style标签进行验证，但这真的重要吗？同样，链接标签也可以在头部之外工作，即使不应该这样做。

— geowa4
source
5
说“他们的工作”有点棘手。充其量您可以说大多数当前的浏览器仍然会渲染样式，但是这个错误并没有什么可以固有地“起作用”的。它不能在任何浏览器的未来版本中使用，并且它们也不会做错任何事情。
— Chuck
6
imo，渲染的样式=作品；没什么棘手的。最后一句话需要重写；这个不成立。当我说它不能通过验证时，我提到它是“不正确的”，所以我一定不明白那句话的意思。
— geowa4
问题是，即使他们的风格，你将不得不对一些内容闪烁时，这些styleS IN踢。
— 埃斯特万Küber
2
除非样式标签在体内是第一个
— geowa4，2009年
不要在家尝试这个。
— TechNyquist
3

就像其他答复指出的那样，它实际上并不需要在那里。但是，它将无法验证。在这种情况下，这可能无关紧要，但请记住，html的呈现完全取决于浏览器。据我所知，当今所有使用过的浏览器都将支持放在首位，但是您不能保证将来的浏览器和将来的浏览器版本都可以。

坚持标准，您会更安全。进行更多辩论的安全性到底有多高。

— 路易
source
3

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

“在体内，预期流量含量。” （第4.2.6节）

— 凤ata
source
虽然现在，W3C 正式状态的WHATWG规范废止所有之前的规格，和WHATWG规范不允许style的body，所以我们又回到了这个被明确禁止的。如果您对我们到达这里的曲折道路感兴趣，请参阅我的回答。
— Mark Amery
2

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

— o
source
-1

您可以在头部分或主体部分内部使用样式标签，也可以在html标签外部使用样式标签（不建议在html外部使用）。在很多实时项目中，您可以看到它们在html标签之外使用了样式标签

— 阿达什·乔希
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.