HTML 正文中的 style 和 script 标签......为什么不呢？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1362039/
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
style and script tags in HTML body... why not?
提问by Dan Rosenstark
[This is related to this question, but not since it's not about email.]
[这与这个问题有关，但不是因为它与电子邮件无关。]
In many cases -- especially when working with a CMS or someone else's framework, it's much easier to embed <style>tags and <script>tags in the <body>than in the <head>. This seems to work in IE6, IE7 (Windows), Firefox 3.x and Safari (OS X).
在许多情况下-特别是与CMS或别人的框架中工作时，它的嵌入更容易<style>标签和<script>标签的<body>比<head>。这似乎适用于 IE6、IE7 (Windows)、Firefox 3.x 和 Safari (OS X)。
Strictly speaking, is this wrong? And if it is, what negative consequences might it cause... aside from being completely ignored in some clients?
严格来说，这是错误的吗？如果是，除了在某些客户中被完全忽略之外，它可能会导致什么负面后果？
Note:Glad everybody wants to talk about DRY and centralizing styles. Imagine for a second that I want to use style tags within a document because they ARE NOT GLOBAL and that I DO NOT HAVE ACCESS TO THE HEAD ON A PER-PAGE BASIS. For whatever reason, be it that the site differs on a page-by-page basis, or a per-paragraph basis or whatever. I'm not interested in it being hard to track down and change. I'm worried about possible consequences of using style in the body.
注意：很高兴每个人都想谈论 DRY 和集中式风格。想象一下，我想在文档中使用样式标签，因为它们不是全局的，而且我无法在每页的基础上访问头部。无论出于何种原因，该网站在逐页或每段的基础上都不同。我对难以追踪和改变不感兴趣。我担心在身体中使用风格可能带来的后果。
You centralize stuff that's central. Everything else is bloat in the central stylesheets.
您将中心的东西集中起来。其他一切都在中央样式表中膨胀。
采纳答案by Chris Moschini
Although the specs explicitly state style tags are not permitted in the body tag, specs aren't all that matters. Style tags are supported in the body by every major browser, and that's ultimately how users see your site.* While there has long been a drive for better standards and standards support in the browser industry, there's also long been a general push to render broken documents as well as can be.
尽管规范明确说明 body 标签中不允许使用样式标签，但规范并不是最重要的。每个主要浏览器都在正文中支持样式标签，这最终是用户看到您网站的方式。* 虽然长期以来浏览器行业一直在推动更好的标准和标准支持，但长期以来也普遍推动呈现损坏文件以及可以。
Google, who leads the HTML5 spec effort, simultaneously maintains google.com which violates specs to save bytes, by leaving the quotes out of its attribute values, using selector hacks against the CSS spec, including script tags with no type or language, and link tags with no type. A purist could argue one of the most used sites on the internet is violating the specs and in serious danger of being horribly misrendered. Or, we can reason that no browser will enter popular use that can't render such widely used hacks on the spec.
领导 HTML5 规范工作的 Google 同时维护 google.com，该网站违反规范以节省字节，方法是将引号排除在其属性值之外，使用针对 CSS 规范的选择器技巧，包括没有类型或语言的脚本标签，以及链接没有类型的标签。纯粹主义者可能会争辩说，互联网上最常用的网站之一违反了规范，并且存在被严重误译的严重危险。或者，我们可以推断没有浏览器会进入流行使用，无法在规范中呈现如此广泛使用的黑客。
So, the question is more of which way the browser industry is going - which again is one of both better specs, but also doing their best to honor the intent of pages that violate those specs. My bet is style tags will keep working in the body for a long time to come.
所以，问题更多的是浏览器行业的发展方向——这又是更好的规范之一，但也尽最大努力尊重违反这些规范的页面的意图。我敢打赌，风格标签将在未来很长一段时间内继续发挥作用。
*As of this writing, style tags in the body are supported with an HTML5 doctype in Firefox 3+, IE6+, Safari 2+, Chrome 12+. Support likely goes back farther but those browsers are rarely seen on the interwebs.
*在撰写本文时，Firefox 3+、IE6+、Safari 2+、Chrome 12+ 中的 HTML5 文档类型支持正文中的样式标签。支持可能可以追溯到更远的地方，但这些浏览器在互联网上很少见。
回答by Sampson
The contexts in which the <script>and <style>tags can be used depends on the doctype you're using. For instance, I'll assume you're using the HTML5 doctype:
可以使用<script>和<style>标签的上下文取决于您使用的文档类型。例如，我假设您使用的是 HTML5 文档类型：
<!DOCTYPE html>
The script taghas three contexts under the HTML5 doctype:
该脚本标签有HTML5的doctype下三个背景：
- Where metadata contentis expected.
- Where phrasing contentis expected.
- Where script-supporting elementsare expected.
The style taghas a slightly more complicated context-structure under the HTML5 doctype:
在风格标签具有HTML5 DOCTYPE下一个稍微复杂的上下文结构：
- If the scoped attributeis absent: where metadata contentis expected.
- If the scoped attributeis absent: in a noscriptelement that is a child of a headelement.
- If the scoped attributeis present: where flow contentis expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
- 如果scoped 属性不存在：元数据内容的预期位置。
- 如果scoped 属性不存在：在作为head元素的子元素的noscript元素中。
- 如果存在scoped 属性：预期流内容的位置，但在除元素间空白和样式元素之外的任何其他流内容之前，而不是作为其内容模型是透明的元素的子元素。
Essentially, this states that you can place the style tag and the script tag in the body, since the body is where we place flow content, and phrasing content.
本质上，这表明您可以在正文中放置样式标签和脚本标签，因为正文是我们放置流内容和短语内容的地方。
As always, consult the spec for the doctype you're using.
与往常一样，请查阅您正在使用的文档类型的规范。
回答by Gumbo
The short answer:
简短的回答：
STYLEelementis only allowed as child of theHEADelementSCRIPTelementis allowed as child of theHEADelement, theBODYelementand wherever inline-level elementsare allowed.
STYLE元素只能作为HEAD元素的子元素SCRIPTelement允许作为HEADelement、BODYelement和任何允许内联级元素的子元素。
The detailed answer:
详细回答：
STYLEis defined to be in head.misc:
STYLE定义在head.misc 中：
<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->
And elements of head.miscare only allowed to be children of the HEADelement. So STYLEis only allowed to be child of the HEADelement.
head.misc 的元素只允许是HEAD元素的子元素。所以STYLE只允许是HEAD元素的子元素。
SCRIPTis defined to be in head.miscand in special:
SCRIPT被定义在head.misc和special 中：
<!ENTITY % special
"A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
And specialis defined to be in inline:
并且special被定义为inline：
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
Additionally SCRIPTis also allowed to be child of the BODYelement. So SCRIPTis allowed in the HEADelement nad wherever inlineis allowed.
此外SCRIPT还允许作为BODY元素的子元素。所以SCRIPT在HEAD元素 nad中允许内联的任何地方都是允许的。
回答by james.garriss
Two possible answers for style in the body:
身体风格的两种可能答案：
Use inline styling. True, you'll lose the advantages of internal and external styling, but if you don't have access to the header, then you don't have access to the header.
Use the scoped attribute in the style element. This is new to HTML5, but the idea is to limit the scope of the CSS to a part of a page, for example to a single div. The bad news is that it is not yet supported (as of July 2011), nor is it backwards compatible. But there is (allegedly) a JQuery plugin that can help. For more info:
使用内联样式。确实，您将失去内部和外部样式的优势，但如果您无权访问标题，那么您就无权访问标题。
在 style 元素中使用 scoped 属性。这是 HTML5 的新功能，但其想法是将 CSS 的范围限制为页面的一部分，例如单个 div。坏消息是它还不受支持（截至 2011 年 7 月），也不向后兼容。但是（据称）有一个 JQuery 插件可以提供帮助。欲了解更多信息：
回答by Doctor Blue
Well, you have the problem of directly embedding styles and scripts into your content. The primary mantra here is the DRY (Don't Repeat Yourself) Principle. You may use a script or particular style in multiple places. When that style or script requires modification, you now get to go on a scavenger hunt for all the places where that code exists. Keeping your styles and scripts in a common place is ideal.
好吧，您遇到了将样式和脚本直接嵌入到您的内容中的问题。这里的主要口头禅是 DRY（不要重复自己）原则。您可以在多个地方使用脚本或特定样式。当该样式或脚本需要修改时，您现在可以继续寻找该代码存在的所有位置。将您的样式和脚本放在一个共同的地方是理想的。
On the other hand, if it is a minor style issue (pixel pushing or something related to just that one view), it's probably okay.
另一方面，如果它是一个次要的样式问题（像素推送或与那个视图相关的东西），那可能没问题。
回答by Arve Systad
But why would you have style-tags in the body? The styles are global anyways, so i can't find any logical reason to do so.
但是为什么你style的身体会有-tags 呢？无论如何，样式都是全局的，所以我找不到任何合乎逻辑的理由这样做。
To simplify and separate things even more you should use external stylesheets too.
为了进一步简化和分离事物，您也应该使用外部样式表。
Scripts are allowed, and is there for a reason: They might give output, they should be run at specific times and other reasons.
脚本是允许的，这是有原因的：它们可能会给出输出，它们应该在特定时间运行和其他原因。
回答by Imagist
The biggest problem, in my opinion, is convenience. If you want to change the style of a page, it's much easier to do so if all the style and script information is in one area. It's possible for style/script information to be in a <style>node, in the styleattribute of a node (i.e. <body style='...'>) or in an external file (i.e. <link rel='stylesheet' type='text/css' href='style.css' />). It's much easier to use a consistent location than to try to hunt down all the places that a style could occur.
在我看来，最大的问题是方便。如果您想更改页面的样式，如果所有样式和脚本信息都在一个区域内，这样做会容易得多。样式/脚本信息可能位于<style>节点中、节点的style属性中（即<body style='...'>）或外部文件中（即<link rel='stylesheet' type='text/css' href='style.css' />）。使用一致的位置比试图寻找一种风格可能出现的所有地方容易得多。
It's also worth noting that saying, "aside from being completely ignored in some clients" is akin to saying "aside from exploding when you hit it from behind" or "aside from flying off-course and landing in a civilian neighborhood". That's severe enough a problem in itself to warrant using the standard practice.
还值得注意的是，说“除了在某些客户中被完全忽略”类似于说“除了当你从后面击中它时爆炸”或“除了偏离航线并降落在平民社区”。这本身就是一个足够严重的问题，需要使用标准做法。
