当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 如何正确地在XHTML文档中使用JavaScript和CSS

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 如何正确地在XHTML文档中使用JavaScript和CSS


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 128 ::
收藏到网摘: n/a

在越来越多的网站中,XHTML的使用正以很快的速度替代HTML4,但是,目前一些主流浏览器对XHTML的支持还不是很好,加上一些网页制作者对XHTML和HTML4之间的差异理解不够,使得XHTML在WEB发展上进程变得缓慢。


XHTML是XML而不是HTML

目前,对XHTML的一个主要误解是它是HTML的另外一个版本。造成此误解的一个事实是Microsoft Internet Explorer仅支持MIME格式为text/html的XHTML而不是被推荐的application/xhtml+xml格式。

当一个XHTML页面被以text/html的MIME格式解析时,它和HTML页面没有任何差别,而当它以text/xml或者application/xhtml+xml的MIME格式解析时,它将遵从严格的XML书写和显示规则。

正确的XHTML格式是一个XML程序并且在书写的时候需要按照以下的严格规则:

1.字符<和&不允许出现在XHTML文档内容中,除非它们被包含在CDATA标签中(<![CDATA[...]]>)

2.注释标签(<!--...-->)内容中不能包含两个连续的横杠(--)

3.包含在注释标签(<!--...-->)中的内容将被忽略


style和script内容中的问题

style和script标签内的内容在XHTML被以XML格式(而不是HTML格式)解析时将造成一些不同的差异。

JavaScript中包含了XHTML中不能存在的字符

Javascript的一些特别字符是XHTML的CDATA标签外不能存在的字符。

<script type="text/javascript">
  var i = 0;
  while(++i < 10){
    //...
  }
</script>

注意:上面的示例代码并非良好的XHTML格式,因为它使用了XHTML或XML中不允许的标记"< "


在style和script内容中使用注释

熟悉HTML的作者通常了解,将style和script标签内容放到注释标签内,将在浏览器中隐藏这些内容,但有些浏览器却不能理解它们。

<style type="text/css">
<!--
  body {background-color: blue; color: yellow;}
-->
</style>
<script type="text/javascript">
<!--
  var i = 0;
  var sum = 0;

  for (i = 0; i < 10; ++i)
  {
    sum += i;
  }
  alert('sum = ' + sum);
// -->
</script>

上面的示例说明了如何在浏览器中忽略注释标签内的内容,同时,这个示例还显示了浏览器在处理text/xml格式和application/xhtml+xml格式的内容的区别。

Mozilla 1.1+ / Opera 7
不应用CSS,不执行JavaScript

Netscape 7.0x / Mozilla 1.0.x
不应用CSS,但执行JavaScript

Internet Explorer 5.5+
不显示该文档.(参见:https://developer.mozilla.org/Ta ... _in_XHTML_Documents )


style和javascript内含有两个连续的横杠(--)

在XHTML页面的JavaScript中使用注释标签进行处理时产生的另一个问题就是JavaScript中会有出现两个连续的横杠(--)的情况:


<script type="text/javascript">
<!--
  var i;
  var sum = 0;

  for (i = 10; i > 0; --i)
  {
    sum += i;
  }
// -->
</script>

使用CDATA代替注释

将script标签内的内容放到CDATA块中可以很好地处理注释中出现两个连续的横杠的问题,不过这将使得一些低版本的浏览器不支持它,因为它们不能理解XML。好在,我们可以通过使用JavaScript中的注释符对CDATA块进行注释以达到兼容的目的。

<script type="text/javascript">
//<![CDATA[
  var i = 0;

  while  (++i < 10)
  {
    // ...
  }
//]]>
</script>


推荐的xhtml与html兼容处理方式

不要在XHTML页面中直接书写style和script,一个好的替代方案是使用外部文件来书写CSS和JavaScript,然后再在XHTML中进行引入。

这个推荐方案看起来非常不错,不管怎样,它使得页面从text/html向application/xhtml+xml转变的过程中,至少在接下来的这些年里不会出现什么问题。