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> 

css:cdata的更多相关文章

  1. XML简介与CDATA解释

    简介XML 是一种受到广泛支持的 Internet 标准,用于以一种特殊的方式编码结构化数据.实际上,以 XML 编码的数据可以通过任何编程语言解码,人们甚至可以使用标准的文本编辑器来阅读或编写 XM ...

  2. 【转】Styling And Animating SVGs With CSS

    原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...

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

    //编辑器里代码模式下的代码 <scripttype="text/javascript"> //my code.... </script> //编辑器里可视 ...

  4. svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)

    svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...

  5. svg格式的中国地图轮廓图

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C ...

  6. svg gradient

    SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性. 基本有下面这些定义颜色的方式: 1. 颜色名字: 直接使用颜色名字red ...

  7. 玩转spring boot——properties配置

    前言 在以往的java开发中,程序员最怕大量的配置,是因为配置一多就不好统一管理,经常出现找不到配置的情况.而项目中,从开发测试环境到生产环境,往往需要切换不同的配置,如测试数据库连接换成生产数据库连 ...

  8. select动态增加option

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  9. web标准常见问题整理

    1.超链接访问过后hover样式就不出现的问题 2.FF下如何使连续长字段自动换行 3.ff下为什么父容器的高度不能自适应 4. IE6的双倍边距BUG 5. IE6下绝对定位的容器内文本无法正常选择 ...

随机推荐

  1. ZOJ 2476 Total Amount

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2476 Time Limit: 2 Seconds         ...

  2. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  3. scale相关设置—颜色设置

    颜色设置,在R的可视化中,应该算是相对比较重要的一项内容,如何把握颜色,很大程度上影响图形的展现效果. 在ggplot的scale设置中,颜色相关的函数较多: scale_fill/colour_hu ...

  4. linux命令readlink

    readlink,从字面意思就可以看出来,输出符号链接值或者权威文件名. openwrt 下的readlink命令参数如下: root@hbg:/# readlink  --helpBusyBox v ...

  5. Qt4.8.x Linux WebKit依赖库安装

    yum install "pkgconfig(gstreamer-app-0.10)"

  6. TortoiseGit - 处理冲突

    处理冲突 冲突:远程的master已经被其他人更新到 2repo add 12,但是自己当前的工作区在未pull到最新前,增加了1repo add 12的改动. 右击最新的节点,选择Merge to ...

  7. UVA 624 CD (01背包)

    //路径记录方法:若是dp[j-value[i]]+value[i]>dp[j]说明拿了这个东西,标志为1, //for循环标志,发现是1,就打印出来,并把背包的容量减少,再在次容量中寻找标志: ...

  8. NOIP2012-普及组复赛-第二题-寻宝

    题目描述 Description 传说很遥远的藏宝楼顶层藏着诱人的宝藏.小明历尽千辛万苦终于找到传说中的这个藏宝楼,藏宝楼的门口竖着一个木板,上面写有几个大字:寻宝说明书.说明书的内容如下:藏宝楼共有 ...

  9. Newtonsoft.Json使用

    SkuBean sb = (SkuBean)Newtonsoft.Json.JsonConvert.DeserializeObject(jobj.ToString(), typeof(SkuBean) ...

  10. runtime官方文档

    OC是一种面向对象的动态语言,作为初学者可能大多数人对面向对象这个概念理解的比较深,而对OC是动态语言这一特性了解的比较少.那么什么是动态语言?动态语言就是在运行时来执行静态语言的编译链接的工作.这就 ...