问题描述

[这与 this question 相关，但不是因为它不是电子邮件。]

在许多情况下 – 特别是在使用 CMS 或其他人的框架时，嵌入< style> 标签和< script> < body> 中的标签比< head> 中的。这似乎在 IE6，IE7(Windows)，Firefox 3.x 和 Safari(OS X) 中起作用。

严格来说，这是错的吗？如果是这样，它可能会产生什么负面后果呢？除了在一些客户中被完全忽视外，

注意：很高兴每个人都想谈谈 DRY 和集中风格。想象一下，我想在文档中使用样式标签，因为它们不是全局的，而且我没有访问 PER-PAGE 基础上的头。无论什么原因，无论是基于 page-by-page，还是以 per-paragraph 为基础的网站。我并不感兴趣，很难跟踪和改变。我担心在身体中使用风格的可能后果。

你集中的中心的东西。一切都在中央样式表中膨胀。

最佳解决方案

虽然规范明确地指定样式标签在 body 标签中是不允许的，但 specs 并不重要。每个主要浏览器都支持样式标签，最终用户可以看到您的网站。*尽管浏览器行业长期以来一直是更好的标准和标准支持的驱动力，但长期来看，一直以来，渲染破坏文件以及可以。

引领 HTML5 规范工作的 Google 同时维护 google.com，它违反规范来保存字节，通过将引号从其属性值中删除，使用针对 CSS 规范的选择器攻击，包括没有类型或语言的脚本标记，并链接没有类型的标签。纯粹主义者可能会争辩互联网上最常用的网站之一是违反规范，并且有严重错误的严重危险。或者，我们可以推测，没有浏览器将进入流行的使用，不能渲染这样广泛使用的黑客的规格。

那么问题更多的就是浏览器行业的发展方向，这也是更好的规范之一，也是尽力履行违反这些规范的网页的意图。我的打赌是风格标签将继续在身体工作很长时间。

*在撰写本文时，Firefox 3+，IE6 +，Safari 2+，Chrome 12+中的 HTML5 脚本类型支持了正文中的样式标签。支持可能会回到更远的地方，但这些浏览器很少在互联网上看到。

次佳解决方案

可以使用<script> 和<style> 标签的上下文取决于您使用的 doctype 。例如，我假设你使用的是 HTML5 的 doctype：

<!DOCTYPE html>

script tag 具有 HTML5 脚本类型下的三个上下文：

  1. 其中 metadata content 是预期的。

  2. 其中 phrasing content 是预期的。

  3. 其中 script-supporting elements 是预期的。

style tag 在 HTML5 脚本类型下有一个稍微复杂的 context-structure：

  1. 如果 scoped attribute 不存在：其中 metadata content 是预期的。

  2. 如果 scoped attribute 不存在：在作为 head 元素的子对象的 noscript 元素中。

  3. 如果存在 scoped attribute：其中 flow content 是预期的，但是除了 inter-element 空格和样式元素之外的任何其他流内容，而不是其内容模型为透明的元素的子元素。

本质上，这表示您可以将样式标签和脚本标签放在正文中，因为正文是我们放置流内容的地方，并且表达内容。

一如以往，请参考您正在使用的 doctype 的规格。

第三种解决方案

简短的答案：

  • STYLE 元素仅允许作为 HEAD 元素的子元素

  • 允许 SCRIPT 元素作为 HEAD 元素的子元素，BODY 元素以及 inline-level elements 允许的任何位置。

详细答案：

STYLE 被定义为 head.misc：

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

head.misc 的元素只允许作为 HEAD 元素的子元素。所以 STYLE 只能是 HEAD 元素的子代。

SCRIPT 被定义为 head.misc 和特殊的：

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

特殊定义为 inline：

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

另外，SCRIPT 也可以是 BODY 元素的子代。所以 SCRIPT 允许在允许内联的 HEAD 元素中。

第四种方案

身体风格的两个可能的答案：

  1. 使用内联样式。诚然，您将失去内部和外部样式的优点，但如果您无法访问该标题，则无法访问该标题。

  2. 在样式元素中使用范围属性。这是 HTML5 的新手，但是想法是将 CSS 的范围限制在一个页面的一部分，例如到一个 div 。不幸的是，它尚未得到支持 (截至 2011 年 7 月)，也不向后兼容。但是 (据称) 有一个可以帮助的 JQuery 插件。更多信息：

第五种方案

那么你有直接嵌入样式和脚本到你的内容的问题。这里的主要咒语是 “干”(Do not Repeat Yourself) 原则。您可以在多个地方使用脚本或特定风格。当这种风格或脚本需要修改时，您现在可以对该代码存在的所有地方进行清道夫搜寻。将您的风格和脚本保持在一个共同的地方是理想的。

另一方面，如果它是一个小小的风格问题 (像素推动或者与一个视图相关的东西)，那可能还行。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。