css:cdata

javascript <![CDATA[的web标准使用方法

根据W3C XHTML 1.0的规定:在XHTML中,因为<和&这两个符号有特殊意义(小于号用于标签的开始标记),所以这两个符号<和&需要转义成&lt;和&amp;。

比如下面的XHTML标准模式代码是错误,因为未使用转义字符(保存为itworks.xhtml文件,用firefox打开):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
        if(1<2)
        {
            alert(‘a‘);
        }
    </script>
</head>
<body>
<p>xhtml,It works.
</p>
</body>
</html> 

如果在javascript中使用转义字符,javascript解释器不理解,无法执行。代码如下:

     <script type="text/javascript">
        if(1&lt;2)
        {
            alert(‘a‘);
        }
    </script>

按照W3C的规定(http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8):XHTML中javascript使用CDATA即可,XHTML解析器会把CDATA中的内容当作纯文本处理,不会把<理解为元素开始。

下面这段XHTML标准模式代码,符合W3C XHTML语法,能够执行(保存为itworks.xhtml文件,用firefox打开):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
    <![CDATA[
        if(1<2)
        {
            alert(‘a‘);
        }
    ]]>
    </script>
</head>
<body>
<p>xhtml,It works.
</p>
</body>
</html> 

上面的代码使用的是XHTML标准模式:application/xhtml+xml,即浏览器按照XML语法解析。由于IE6、IE7、IE8不支持XHTML标准模式(http://www.cnblogs.com/sink_cup/archive/2010/01/11/IE6_IE7_IE8_not_support_xhtml_but_it_is_not_important.html)等其他原因 ,所以目前XHTML一般使用text/html兼容模式。

下面把代码改成text/html兼容模式(保存为itworks.html,用浏览器打开):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN" lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
        <![CDATA[
        if(1<2)
        {
            alert(‘a‘);
        }
        ]]>
    </script>
</head>
<body>
<p>html,It works.
</p>
</body>
</html>

如图所示,这段text/html代码是符合W3C XHTML语法标准的。

但是在IE6、Firefox、Chrome中都不执行上面这段javascript。

根据《HTML兼容性指导方针》(http://www.w3.org/TR/2002/REC-xhtml1-20020801/#C_4),W3C对于这种情况的说明是:

Use external style sheets if your style sheet uses < or & or ]]> or --. Use external scripts if your script uses < or & or ]]> or --.

即:XHTML工作在XML标准模式下(application/xhtml+xml),使用<![CDATA[即可;XHTML工作在兼容模式下(text/html),请使用外部script文件。

为什么浏览器不支持text/html模式下的<![CDATA[呢?

再来看http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8 :

CDATA sections are recognized by the XML processor and appear as nodes in the Document Object Model

即:CDATA是XML解析器能够识别的。当XHTML工作在兼容模式下(text/html),此时浏览器使用HTML解析器,所以不识别CDATA。

有两种方法能够解决这个问题。

一:工作在html模式下,向新兼容XML解析器(即符合XML语法),使用下面的代码(保存为itworks.xhtml或者itworks.html都可以执行):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN" lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
        //<![CDATA[
        if(1<2)
        {
            alert(‘a‘);
        }
        //]]>
    </script>
</head>
<body>
<p>html,It works.
</p>
</body>
</html> 

二:工作在html模式下,不兼容XML解析器(来自http://www.w3.org/TR/html401/interact/scripts.html#h-18.3.2),代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN" lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
        <!--
        if(1<2)
        {
            alert(‘a‘);
        }
        //-->
    </script>
</head>
<body>
<p>html,It works.
</p>
</body>
</html> 

为什么说上面这段代码不兼容XML解析器呢?

请看:http://www.w3.org/TR/2002/REC-xhtml1-20020801/#C_4

W3C的解释是:Note that XML parsers are permitted to silently remove the contents of comments. Therefore, the historical practice of "hiding" scripts and style sheets within "comments" to make the documents backward compatible is likely to not work as expected in XML-based user agents.

即:在XML语法中,<!--作为注释,会被XML解析器忽略,所以把javascript放在其中导致不执行。

把下面这段XHTML标准模式代码保存为itworks.xhtml,就可以看出来javascript不执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
    <!--
        if(1<2)
        {
            alert(‘a‘);
        }
    //-->
    </script>
</head>
<body>
<p>xhtml,It works.
</p>
</body>
</html> 
时间: 2024-12-12 12:42:15

css:cdata的相关文章

CSS+JS实现的div层定位功能和自动消失

CSS顶部固定功能,有空的时候研究了一下CSS的定位功能,做了这个大家熟悉的顶部固定功能,鼠标移上去顶部会消失,并可判断浏览器是否支持audio元素!顶部元素在时间控制下也可自动消失. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

【转】Styling And Animating SVGs With CSS

原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS-Weekly&utm_campaign=Issue-135&utm_medium=email CSS can be used to style and animate scalable vector graphics, much like it is used to style and ani

[cssTopic]浏览器兼容性问题整理 css问题集 ie6常见问题【转】

显示文档结构 JS常见兼容性问题 JS语言本身的兼容性问题 DOM方面的兼容性问题 JS基础库 CSS常见兼容性问题 什么是hasLayout 与hasLayout有关的问题 Peekaboo Guillotine Bug [IE6] Unscrollable Content Bug [IE6] Border Missing [IE6] Three Pixel Text Jog [IE6] 浮动的clear margin的collapsing 滤镜 绝对定位元素的起始点 小结 常见的IE问题及解

如何在编辑器里添加CSS或JS代码

最近在使用Wordpress做一个网站项目,需要在后台编辑器里添加自定义的JS脚本和CSS 在编辑器里添加好后,发现在浏览器里JS脚本执行有问题并且CSS的脚本直接被WordPress保存的时候过滤掉了 经过排查发现原因是Wordpress默认的TinyMCE在从代码模式切换到可视化模式的时候对脚本时行了处理 更无耻的是CSS的脚本直接被删除了 //编辑器里代码模式下的代码 <script type="text/javascript"> //my code.... <

玩转spring boot——properties配置

前言 在以往的java开发中,程序员最怕大量的配置,是因为配置一多就不好统一管理,经常出现找不到配置的情况.而项目中,从开发测试环境到生产环境,往往需要切换不同的配置,如测试数据库连接换成生产数据库连接,若有一处配错或遗漏,就会带来不可挽回的损失.正因为这样,spring boot给出了非常理想的解决方案——application.properties.见application-properties的官方文档:http://docs.spring.io/spring-boot/docs/curr

网站——循环图片切换效果(最近做网站,已经快炸了)

看一下效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"><head><meta

select动态增加option

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> &l

web css--鼠标滑过显示菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

我的博客--群星闪烁地球旋转动画特效

1.chang.html 文件内容: <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="author" content="Ken Collins&