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

Posted

技术标签:

【中文标题】我应该在 HTML5 中使用 <![CDATA[...]]> 吗?【英文标题】:Should I use <![CDATA[...]]> in HTML5? 【发布时间】:2011-03-19 04:11:53 【问题描述】:

我很确定 &lt;![CDATA[...]]&gt; 部分可以在 Xhtml5 中使用,但是 HTML5 呢?

【问题讨论】:

【参考方案1】:

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

人们有时会在 XHTML 中的 script 标记中使用它们,因为这样就不需要转义 &lt;&gt;&amp; 字符。但在 HTML 中是不必要的,因为 HTML 中的 script 标记已经像 CDATA 部分一样被解析。

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

【讨论】:

我正在发送 HTML(不是 XHTML)并且我想要那个。谢谢回答:) 可以在pre 标签内使用CDATA,这样我就不必修复所有尖括号了吗? 不准确。 CDATA 用于 SGML 和 XML 子集。所以它适用于 HTML 和 XHTML。【参考方案2】:

来自同一页面@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很有用,在开发过程中用作严格的application/xml XML,但在生产模式下用作text/html HTML5,以获得更好的跨浏览器兼容性。 Polyglot pages have their benefits;我自己使用过它,因为它更容易调试 XML/XHTML5。例如,Google Chrome 会针对无效的 XML/XHTML5(包括例如character escaping)抛出错误,而作为 HTML5 提供的同一页面将“正常工作”,也称为“可能工作”。

【讨论】:

如果您想支持一些 20 年前的浏览器,即 NSCA Mosaic 或 Netscape 1...,则需要脚本标签中的 cmets【参考方案3】:

规范似乎解决了这个问题。 script 和 style 标签被认为是“原始文本元素”。他们不需要或不允许使用 CDATA。 CDATA 仅用于“外来内容”——即 MathML 和 SVG。请注意,脚本标签中可以包含的内容有一些限制——基本上你不能在里面放像var x = '&lt;/script&gt;' 这样的东西,因为它会关闭标签并且需要像他的回答中提到的 pst 那样拆分。 http://www.w3.org/TR/html5/syntax.html#cdata-rcdata-restrictions

【讨论】:

【参考方案4】:

支持 HTML5 的浏览器已经将 &lt;style&gt;&lt;script&gt; 标记内的内容作为 CDATA(字符数据)读取。这意味着它们可以解析 CSS 和 JavaScript,但也会忽略任何标记字符.示例:这些标记之间的 HTML cmets(&lt;!----&gt;)将被忽略。

如果您希望您的 HTML5 页面与不将这些标签读取为 CDATA 的 XHTML 和 XML 兼容,您只需在 &lt;style&gt;&lt;script&gt; 标签内添加 CDATA 块。 XML 和 XHTML 解析器将读取 &lt;style&gt;&lt;script&gt; 标记内容,就像它们读取所有 HTML 元素一样,作为 PCDATA(即普通的 HTML 元素),这意味着内容被解析为标记,并且可能会因在它们之间添加特殊字符而中断标签。您可以在这两个标签之间添加特殊的 CDATA 部分来支持它。因为 XML 和 XHTML 解析器将元素内的所有内容都读取为可能更多的标记,所以添加 CDATA 可以防止某些字符被解释为 XML 或其他类型的字符引用。

问题是,大多数 HTML4/HTML5 浏览器和解析器不支持在这些标记之间添加额外的 CDATA 部分,因此如果为 XHTML/XML 支持添加这些代理,则必须为这些代理注释掉 CDATA 块。

另外,请注意,添加在这些标记中的所有 HTML cmets(&lt;!----&gt;)会被 HTML 解析器忽略,但由 XHTML 实现,在添加时注释掉用于 XHTML 的 CSS 和 JavaScript。过去,许多人会在这些标签之间添加注释规则,以隐藏通常无法理解 CSS 或 Javascript 的非常旧的浏览器(1998 年之前的浏览器)的样式和脚本。但是在没有额外代码的情况下,该策略在 XHTML 中失败了。

那么,如何将 &lt;style&gt;&lt;script&gt; 标记中的所有内容结合起来,您应该关心吗?

我是一个纯粹主义者,并且喜欢我的 HTML5 内容仍然是 XML/XHTML-friendly,无论我使用什么标记建议。我也喜欢我的页面在知道 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,但不允许将 &lt;&gt;&amp; 等特殊字符解释为会产生解析错误的标记或实体/转义字符。他们现在是 CDATA。

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

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

【讨论】:

很高兴我在 2021 年 2 月 28 日之后找到了这个帖子,所以这个答案已经存在 - 感谢所有详细信息!【参考方案5】:

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

是虚假评论。

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

【讨论】:

我认为转义结束标签的最佳方式是“”。我读过一些解析器只检查“”,而不是“” @marcus 你是对的,&lt;/ 是这种情况下唯一的特殊标记。我对这个主题的更新答案是一致的,因为我的知识随着时间的推移而更新;-) 我会更新这个。话虽这么说,&lt;/scr + ipt&gt; 拆分似乎很常见,而且我不知道有哪个主流浏览器不起作用...

以上是关于我应该在 HTML5 中使用 <![CDATA[...]]> 吗?的主要内容,如果未能解决你的问题,请参考以下文章

<!DOCTYPE> 部分在 JSF 中应该如何显示? HTML5 还是 XHTML?

什么时候应该在 HTML4/HTML5 中使用 name 属性?

我应该为 HTML5 和 <canvas> 放弃 Adob​​e Flash 吗?

邮政编码应该使用啥 html5 表单属性?

Html 5规范[重复]

我应该为 HTML5 拖放操作使用啥格式(MIME 类型)?