在HTML文档中，<STYLE>必须放在<HEAD>标签内吗？

Question

在HTML文档中，<STYLE>必须放在<HEAD>标签内吗？

htmlcoding-stylehtml-head

163

严格来说，style标签需要放在HTML文档的head里吗？4.01标准暗示了这一点，但没有明确说明：

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

我说“严格来说”，是因为我有一个将style元素放在内的应用程序，并且我测试过的所有浏览器似乎都使用这些style元素。我只想知道这是否实际上是合法的。

- eaolson

1

如果您有疑问，W3C标记验证器总是可以帮助您的 :) http://validator.w3.org/ - Lazlo

“put <style> in <head>”规则的一个例外是HTML电子邮件，因为许多网络邮件服务会简单地剥离任何<head>元素，这意味着您的样式将不复存在。 - user132837

1

规格要求浏览器支持在body中使用style，所以对我来说已经足够了，不管作者指南部分暗示了什么。 - WraithKenny

10个回答

29

简短回答

根据当前的规范，是的，style 元素必须放在 head 中。除了在 template 元素内部使用 style 元素之外，没有其他例外。
历史上并不总是这样。如果您关心规范及其历史细节，请继续阅读。
无论规范如何说明，在主流浏览器中，将 style 元素放在 body 中基本上可以正常工作。然而，这被认为是一种不好的做法，因为它违反了规范，并可能导致不良后果，如更差的呈现性能或“未样式化内容的闪烁”。

规范历史

style 元素在 HTML 2 中不存在。它们是在 HTML 3.0 中引入的，被包括在可以包含在 Head 元素中的元素列表中，但不包括在可以出现在 Body 元素中的元素列表中。因此，在该元素首次被规范时，它只能包含在 head 中。

直到HTML5推出了已被删除的scoped属性，使得这种情况得以保留（虽然用不同的措辞表达）。该属性在style元素中使用时，意味着可以将其放置在元素内的某个元素中，以仅为该元素的后代元素设置样式。然而，该功能从未在任何真实浏览器中实现过（至少没有通过开发者标志启用），并且已从W3C和WhatWG规范"因缺乏实现者兴趣"中删除。此后，style元素只允许在允许元数据内容的上下文中使用，即元素中。因此，我们回到了HTML5之前相同的规则。

然而，由于规范组织的错误，两个规范附录中包含的元素的非规范索引未能正确更新以反映scoped的删除，导致其与规范不一致。我向WhatWG和W3C都指出了这一点，并在此过程中无意中引发了事件，导致两个规范分歧。

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

W3C拒绝了我提供的等价补丁，而是更新规范以允许在中使用

- Mark Amery

19

虽然其他答案是正确的，但我很惊讶没有人解释过标准为什么不允许在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很难阅读。}

这是唯一一个出现

- user123444555621

1

现在应该使用HTML5，据我所知它没有DTD。HTML5规范本身所说的就是什么是或不是。 - Jan Kyu Peblik

14

这些标签不应该在标签之外使用，但它们仍然有效；尽管您可能会注意到一个快速的闪烁。使用

- geowa4

5

说“它们能工作”有点棘手。最好的情况是你可以说大多数当前的浏览器仍然会渲染这些样式，但这个错误本质上并不是“有效”的。在任何未来版本的任何浏览器中它都可能不起作用，他们也不会做错任何事。 - Chuck

6

我的理解是，样式渲染后就能生效，没有什么棘手的问题。最后一句话需要重新写，因为它没有意义。当我说它不能验证时，我提到了它不正确的问题，所以我可能没有理解你在那句话中的意思。 - geowa4

问题在于，即使它们已经被设置样式，当这些样式生效时，内容仍然会出现闪烁。 - Esteban Küber

2

除非样式标签是在 body 中的第一个。 - geowa4

3

HTML5.2 W3C Recommendation, 2017年12月14日（非上述早期草案）现在允许您在标签中包含<style>标签。

“在标签内，预期的是流内容。” （第4.2.6节）

- Anahata

1

尽管现在W3C官方声明 WhatWG规范废除了所有先前的规范，并且WhatWG规范不允许在body中使用style，因此我们又回到了这个被明确禁止的状态。如果您对我们如何到达这里的曲折路径感兴趣，请参阅我的答案。 - Mark Amery

3

根据该网站所述，HTML5.1（草案中）和WHATWG允许将<style>标签放在中：

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

看起来它已经被浏览器支持了很长一段时间。根据这个StackOverflow答案，Firefox 3+，IE6+，Safari 2+和Chrome 12+都支持它：

https://dev59.com/JXM_5IYBdhLWcg3wfTE0#10989663

- konrad

3

像其他回复所说的那样，它实际上不需要存在。但是，它将无法验证。在这种情况下，这可能重要也可能不重要，请记住，html的渲染完全取决于浏览器。据我所知，今天使用的所有浏览器都支持将其放在head之外，但您不能保证未来的浏览器和未来的浏览器发布会这样支持。

坚持标准，您会更安全。有多安全则非常值得争议。

- lsl

2

在标签之外使用样式标签将不符合W3C规则。

- womp

1

根据HTML 5.2规范（草案），样式标签只允许出现在文档头部。 HTML 5.2 Draft on Style Tag (Aug 18, 2016)

引用块：样式元素仅限于出现在文档的头部。

- Kerry Kobashi

-1

您可以在 head 部分或 body 部分内使用 style 标签，也可以在 html 标签外部使用（不建议在 html 标签外部使用）。在实时项目中，经常会看到他们在 html 标签外部使用 style 标签。

- Adarsh Joshi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Esteban Küber · Accepted Answer

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

除了验证点之外，使用 style 在 body 上可能会引起您感兴趣的一个注意点是未样式化内容的闪烁。浏览器会获取元素并将其显示出来，然后再进行样式设置，导致它们在大小/形状/字体上发生变化或闪烁。这通常是不良工艺的标志。通常情况下，您可以随意放置 style，但请尽可能避免。

HTML 5 引入了一个 scoped 属性，允许在整个 body 中包含 style 标签，但随后又将其删除。