我应该在HTML5中使用<! - [CDATA [...]] - >吗?

时间:2010-07-21 18:43:38

标签: cdata html5

我很确定可以在XHTML5中使用<![CDATA[...]]>个部分,但HTML5呢?

5 个答案:

答案 0 :(得分:56)

CDATA结构根本不适用于HTML,而是适用于XML。

人们有时会在script标记内的HTML中使用它们,因为它不需要它们来逃避某些特殊字符。但这并不是一个要求(对于HTML 4或5)。

编辑:这是我们打开2002年以来真正发霉的旧蠕虫的地方,无论您是以text/html发送XHTML,还是像{I}那样发送application/xhtml+xml “应该”: - )

答案 1 :(得分:23)

来自同一页@pst linked to

  

Element-specific parsing for script and style tags XHTML-HTML兼容性指南:“以下带有转义的代码可以确保脚本和样式元素在XHTML和HTML中都能正常工作,包括旧浏览器。”

最大向后兼容性:

<script type="text/javascript"><!--//--><![CDATA[//><!--
    ...
//--><!]]></script>

更简单的版本,与“更老的浏览器”不兼容:

<script>//<![CDATA[
   ...
//]]></script>

因此,CDATA可以在HTML5中使用,并且建议在指导XHTML-HTML兼容性中使用。这对polyglot HTML/XML/XHTML pages非常有用,它在开发期间创建并解析为XML,但作为HTML5提供了更好的跨浏览器兼容性。 Polyglot pages has their benefits,我自己也用过这个,因为调试XML / XHTML5要容易得多。例如,谷歌浏览器会为无效的XML / XHTML5(包括例如character escaping)引发错误,而用作HTML5的同一页面将“正常工作”,即“可能正常工作”。

答案 2 :(得分:14)

该规范似乎解决了这个问题。脚本和样式标记被认为是“原始文本元素”。不需要或允许CDATA。 CDATA仅用于“外国内容” - 即MathML和SVG。请注意,脚本标记中的内容有一些限制 - 基本上你不能在其中添加var x = '</script>'之类的内容,因为它会关闭标记并需要像在答案中注明的那样分割。 http://www.w3.org/TR/html5/syntax.html#cdata-rcdata-restrictions

答案 3 :(得分:5)

也许可以看到:http://wiki.whatwg.org/wiki/HTML_vs._XHTML

  

&LT;![CDATA [...]]&GT;是一个虚假的评论。

在HTML中,<script>已受到保护 - 这就是为什么有时必须将其写为a = "<" + "/script>",以避免混淆浏览器。请注意,代码在HTML中的 CDATA是有效的。

答案 4 :(得分:4)

HTML5 已经将 <style><script> 标签内的内容读取为 CDATA(字符数据)。如果您希望 HTML5 页面能够与 XHTML 和 XML 兼容,因为它们将 <style><script> 标记内容读取为标记。

XML 和 XHTML 会将 <style><script> 标记内容读取为 PCDATA,这意味着这些内容被解析为标记,并且可能会因在这些标记之间添加特殊字符而中断。当您在这些标签之间添加 CDATA 部分时,大多数主要的 HTML 浏览器不支持 CDATA 部分,因此如果您为 XML 支持添加 CDATA 块,则必须为这些代理注释掉 CDATA 块。由于 XML 和 XHTML 解析器将元素内的所有内容都读取为可能更多的标记,因此添加 CDATA 可防止某些字符被解释为 XML 或其他类型的字符引用。

此外,添加到这些标签中的所有 HTML 注释(<!---->)都被 HTML 忽略,但由 XHTML 实现。过去,许多人会在这些标签之间添加注释规则,以在通常无法理解 CSS 或 Javascript 的非常旧的浏览器(1998 年之前的浏览器)中隐藏样式和脚本。

那么您如何将 <style><script> 标签内的所有内容结合起来,您应该关心吗?

我是最纯粹的人,并且喜欢我的 HTML5 内容仍然XML/XHTML 友好,无论我使用什么标记建议。我也喜欢我的页面在支持 CSS 的浏览器和不支持 CSS 的旧浏览器中运行。所以这里有两个解决方案来支持所有这些场景,并且仍然在现代浏览器中显示您的样式和脚本而不会出错。 在现代 HTML5 浏览器中使用它们是完全安全的

风格

<style type="text/css">
    <!--/*--><![CDATA[/*><!--*/

    /* put your styles here */

    /*]]>*/-->
</style>

脚本

<script type="text/javascript">
    <!--//--><![CDATA[//><!--

    // put your scripts here

    //--><!]]>
</script>
  • 这两个代码块将允许 HTML5 浏览器正常使用 CSS 和 JavaScript,但对不支持这些技术的旧浏览器隐藏它们。

  • XHTML 浏览器现在将像以前一样解析您的 CSS 和 JavaScript,但不允许将 <>& 等特殊字符解释为标记或实体/转义会产生解析错误的字符。他们现在是 CDATA。

  • 当然,您页面的 XML 解析器不会理解您的 CSS 和 JavaScript,但会接受您在其中添加的任何类型的文本,而不会尝试将它们解析为标记。他们现在是 CDATA。

  • 示例的工作原理:对于支持 HTML5 的现代浏览器,默认情况下,<!----> 标签内的注释标记 scriptstyle 被视为 CDATA在 stylescript 元素内,因此完全被忽略。之后,CSS 和脚本注释将顶部和底部行的其余部分包裹在 CSS 和脚本注释中,因此被删除。这意味着在较新的 HTML5 浏览器中始终安全地隐藏和忽略顶行和底行。不知道脚本或 CSS 的旧浏览器不会将 scriptstyle 元素视为支持 CDATA 的元素,也不理解 CSS 和脚本注释,但会理解 HTML 注释。因此,他们将注释掉两个元素中每个元素中的所有 CSS 和脚本。首先应用第一行 HTML 注释 (<!--/*-->),然后读取 <![CDATA[/*> 块,它变成一个空的未知元素并被忽略。后面的 HTML 注释隐藏了从那里到块末尾的所有 CSS 和脚本。最后的 <!]]> 是另一个被忽略的空元素。对于 XHTML,这些解析器不会将这些元素中的内容作为 CDATA 读取,而是理解 HTML 注释。因此,他们删除了第一个评论块。 <![CDATA[ 接下来为它们启动 CDATA 块,环绕标签内的所有样式和脚本,直到读取 ]]>。 CDATA 块中的所有内容都像 HTML5 解析器现在所做的那样 - 作为普通的 CSS 和脚本 - 解释为 XHTML 解析器,而不是像以前那样作为 HTML 标记。所有 CSS 和脚本注释也适用。因为 XHTML 知道 CSS 和脚本,所以它现在仍然可以正确解析这些。 XML 解析器的工作方式与使用这些规则的 XHTML 相同,只是不知道 CDATA 块内的 CSS 和脚本注释,它们只是将所有内容解释为元素内的纯字符文本。