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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1303416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:38:28  来源:igfitidea点击:

Does <STYLE> have to be in the <HEAD> of an HTML document?

htmlcoding-stylehtml-head

提问by eaolson

Strictly speaking, do styletags need to be inside the headof an HTML document? The 4.01 standard implies that, but it's not explicitly stated:

严格来说,style标签是否需要在headHTML 文档的内部?4.01 标准暗示了这一点,但没有明确说明:

The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.

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

I say "strictly speaking" because I have an app that puts style elements inside the body, and all the browsers I've tested with seem to use the style elements. I'm just wondering if that's actually legal.

我说“严格来说”是因为我有一个将样式元素放入正文的应用程序,并且我测试过的所有浏览器似乎都使用样式元素。我只是想知道这是否真的合法。

采纳答案by Esteban Küber

styleis supposed to be included only on the headof the document.

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

Besides the validation point, one caveat that might interest you when using styleon the bodyis the flash of unstyled content. The browser would get elements that would be styled afterthey are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting styleanywhere you want, but try to avoid it whenever it is possible.

除了验证点,使用时您可能感兴趣的一个警告stylebody的无样式内容闪烁。浏览器将获得显示设置样式的元素,使它们在大小/形状/字体和/或闪烁上发生变化。这通常是工艺不良的标志。一般来说,你可以随意放置style任何你想要的地方,但尽可能避免它。

HTML 5 introduced a scopedattribute that allowed styletags to be included everywhere in the body, but then they removed it again.

HTML 5 引入了一个scoped属性,允许style在正文中的任何地方包含标签,但随后又将其删除。

回答by Mark Amery

Short answer

简答

  • According to the current spec, yes, styleelements mustalways be in the head. There are no exceptions (except a styleelement inside a templateelement, if you want to count that).

  • This has not always been the case historically. If you care about the details of the spec and its history, keep reading.

  • No matter what the spec says, using styleelements in the bodydoesmore-or-less work in all major browsers. However, it is considered a bad practice both because it violates spec and because it can cause undesirable consequences like worse rendering performance or a "flash of unstyled content".

  • 根据当前规范,是的,style元素必须始终在head. 没有例外(除了style元素内的template元素,如果你想算的话)。

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

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



Spec history

规格历史

styleelements didn't exist in HTML 2. They were introduced in HTML 3.0, where they were included in the list of elements that could be included in The Head Element, but notincluded in the list of elements that could be present in The Body Element. Thus, at the moment the element was first specced, it could only be included in the head.

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

This remained the case (albeit expressed using different wording) until HTML 5, which introduced the (since removed) scopedattribute for styleelements. This attribute, when present, was meant to allow a styleelement to be placed within an element in the body to style only that element's descendants. However, that feature never made it to any real browser (at least not without needing to be enabled via a developer flag) and was removed from both the W3C and WhatWG specs "due to lack of implementer interest". Thereafter, styleelements were only permitted in contexts that allow metadata content, which is only the head. Thus we were back to the same rules as before HTML 5.

在 HTML 5 之前,情况一直如此(尽管使用了不同的措辞),它scopedstyle元素引入了(自删除后)属性。这个属性,当存在时,是为了允许一个style元素被放置在主体中的一个元素中,以仅设置该元素的后代的样式。但是,该功能从未出现在任何真正的浏览器中(至少不需要通过开发人员标志启用),并且“由于缺乏实施者的兴趣”而从 W3C 和 WhatWG 规范中删除。此后,style元素仅在允许元数据内容的上下文中被允许,这只是头部。因此,我们回到了与 HTML 5 之前相同的规则。

However, due to an error made by both spec organisations, a non-normative index of elements included as an appendix in both specs was not properly updated to reflect the removal of scoped, rendering it inconsistent with the normative spec. I pointed this out both to the WhatWGand to the W3C, and in doing so unwittingly set in motion events that caused the two specs to diverge.

然而,由于两个规范组织都犯了错误,两个规范中作为附录包含的元素的非规范索引没有正确更新以反映 的删除scoped,使其与规范规范不一致。我向 WhatWGW3C都指出了这一点,并在不知不觉中引发了导致两个规范出现分歧的事件。

WhatWG's solution to the inconsistency between the normative spec and non-normative index was to accept my patchcorrecting the non-normative index.

WhatWG对于规范性规范和非规范性索引不一致的解决方案是接受我的补丁更正非规范性索引。

The W3C, on the other hand, rejected my equivalent patch in favour of instead updating the normative specto allow the use of styleelements in the body, while caveating this with a note that it can cause problems and should be done "with care". The reasoning behind this change was to make the spec align with real-life browser behaviour.

另一方面,W3C 拒绝了我的等效补丁,而是支持更新规范性规范以允许在 中使用style元素body,同时警告说它可能会导致问题并且应该“小心”完成。此更改背后的原因是使规范与现实生活中的浏览器行为保持一致。

Thus, from March 2017, it was the case that the official answer to this question depended upon which standards organisation you chose to listen to. If you listed to the (generally more respected) WhatWG spec, then a styleelement was not allowed in the body. If you listed to the W3C spec, then it was allowed, but not recommended.

因此,从 2017 年 3 月开始,这个问题的官方答案取决于您选择听取哪个标准组织。如果您列出的(一般比较推崇)WHATWG规范,那么style元素是不是在允许的body。如果您列出了 W3C 规范,那么它是允许的,但不推荐。

This silly state of affairs was ended (perhaps like many other such inconsistencies) with the April 2019 peace treaty between W3C and WhatWG, which agreed that the WhatWG spec would become the one true living HTML standard, with W3C merely releasing snapshots from it as numbered HTML specifications instead of developing a competing spec in parallel. Thus, the change from 2017 to the W3C fork that allowed styleelements in the bodyis no longer part of any current spec; it is merely a curiosity of history.

这种愚蠢的事态随着2019 年 4 月 W3C 与 WhatWG 之间的和平条约而结束(也许像许多其他此类不一致),该条约同意 WhatWG 规范将成为一个真正的活 HTML 标准,而 W3C 仅发布编号的快照HTML 规范,而不是并行开发竞争规范。因此,改变从2017年到W3C叉,允许style元件在body是任何当前规范的不再一部分; 这只是对历史的好奇。

So, today, we need only look to the WhatWG specto determine what is officially allowed. It has this to say:

因此,今天,我们只需要查看WhatWG 规范即可确定正式允许的内容。它有这样的说法:

4.2.6. The styleelement

Categories:

Metadata content.

Contexts in which this element can be used:

Where metadata contentis expected.
In a <noscript>element that is a child of a <head>element.

4.2.6. 该style元素

类别:

元数据内容

可以使用此元素的上下文

元数据内容的预期。
在作为<noscript>元素的子<head>元素的元素中。

CTRL-Fing through the single-page specreveals that the only element whose content model includes metadata content is the headelement.

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

The non-normative index of elementsI mentioned fixing earlier also confirms that the only permissible parents for a styleelement are a heador noscriptelement.

我之前提到的非规范元素索引也证实了style元素唯一允许的父元素是 a headornoscript元素。

回答by user123444555621

While the other answers are correct, I'm surprised nobody has explained wherethe standards disallow styles outside of head.

而其他的答案是正确的,我很惊讶,没有人解释其中的标准之外不允许风格head

It's actually in the section on The headElement(and in the DTD):

它实际上在 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 -->

Yes, I know. DTDs are hard to read.

是的我知道。DTD 很难阅读。

This is the only place where the STYLEelement occurs, so implicitly it's invalid elsewhere.

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

回答by geowa4

They aren't supposed to go outside the head, but they work anyway; though you might notice a quick flicker. The site shouldn't validate with the style tag outside of the head, but does that really matter? Also, link tags work outside the head as well, even though they aren't supposed to.

他们不应该走出头脑,但无论如何他们都在工作;尽管您可能会注意到快速闪烁。该网站不应该使用头部外部的样式标签进行验证,但这真的很重要吗?此外,链接标签也可以在头部之外工作,即使它们不应该这样做。

回答by Louis

Like the other replies have stated it doesn't actually need to be there. However, it will not validate. This may or may not matter in this instance, but please keep in mind that rendering of html is entirely up to the browsers. From what I know all used browsers of today will support putting it outside the head, but you cannot guarantee that for the future browsers and future browser releases.

就像其他回复所说的那样,它实际上并不需要在那里。但是,它不会验证。在这种情况下,这可能无关紧要,但请记住,html 的呈现完全取决于浏览器。据我所知,今天所有使用的浏览器都支持将其置于头脑之外,但您无法保证未来的浏览器和未来的浏览器版本会如此。

Stick with the standard and you are safer. How much safer is up for very much debate.

坚持标准,你会更安全。多安全有待讨论。

回答by Anahata

The HTML5.2 W3C Recommendation, 14 December 2017(not the earlier draft referred to above) now says you can include <style>.

2017 年 12 月 14 日HTML5.2 W3C 建议书(不是上面提到的早期草案)现在说您可以包含<style>.

"In the body, where flow content is expected." (section 4.2.6)

“在身体中,预期流动内容的地方。” (第 4.2.6 节)

回答by womp

A style tag anywhere but inside the <head>will not validate with W3C rules.

任何地方的样式标签都<head>不会通过 W3C 规则进行验证。

回答by konrad

According to this site, HTML5.1 (in draft) and WHATWG allow the <style>tag to be put in the body:

根据此站点,HTML5.1(草案中)和 WHATWG 允许将<style>标签放在正文中:

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

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

It also seems to have been supported by browsers for quite a while. According to this StackOverflow answer, Firefox 3+, IE6+, Safari 2+ and Chrome 12+ support it:

它似乎也被浏览器支持了很长一段时间。根据这个 StackOverflow 答案,Firefox 3+、IE6+、Safari 2+ 和 Chrome 12+ 支持它:

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

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

回答by Kerry Kobashi

According to the HTML 5.2 specification (in draft), the style tag is only allowed in the head of a document.

根据 HTML 5.2 规范(草案),样式标签只允许出现在文档的头部。

HTML 5.2 Draft on Style Tag (Aug 18, 2016)

HTML 5.2 样式标签草案(2016 年 8 月 18 日)

A style element is restricted to appearing in the head of the document.

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

回答by Adarsh Joshi

You can use style tag inside head section or body section or also outside of html tag also(out side html is not recommended). In real time projects many time you can see they use style tag out side of html tag

您可以在 head 部分或 body 部分内使用 style 标签,也可以在 html 标签外使用 style 标签(不推荐在 html 外)。在实时项目中很多时候你可以看到他们在 html 标签之外使用样式标签