如何正确地在XHTML文档中使用JavaScript和CSS

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1302
收藏 0 赞 0 分享
在越来越多的网站中,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转变的过程中,至少在接下来的这些年里不会出现什么问题。
更多精彩内容其他人还在看

XHTML三种文件类型声明

XHTML定义了三种文件类型声明。 最普遍使用的是XHTML Transitional。 <!DOCTYPE>是强制使用的。 一个XHTML文档有三个主要的部分: DOCTYPE Head Body ... 查看详情
收藏 0 赞 0 分享

通过实例掌握BR和P标签的区别

换行标记<br>的使用 换行标记<br>是一个没有结尾的标记,HTML文件中任何位置只要使用了<br>标记,当文件显示在浏览器中时,该位置之后的文字将显示于下一行,该<br>标记就是起到换行的标记! 请注意!在一般的文字文件... 查看详情
收藏 0 赞 0 分享

网页设计制作之改进超级链接效果

Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety. 超链接可以使访问者从一个页面跳转至另外一个页面,或从一个... 查看详情
收藏 0 赞 0 分享

网页表格或div层在网页中被撑开解决之道

在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总... 查看详情
收藏 0 赞 0 分享

超链接图标规范:提升文章的可阅读性

1、什么是超链接图标规范超链接图标规范是根据《Iconize Textlinks with CSS》修改调整完成的。主要是整理出常用到的一些icon,整合成一张图片,减少图片的服务器请求次数。通过这套css framework,给链接文件的类型加上icon标识。提升文章的可阅读性... 查看详情
收藏 0 赞 0 分享

网页设计之网页音乐的实现技巧

当网页中插入音乐时,要根据不同的后缀名,来写不同的代码!下面面就是多种格式文件的详细使用代码。 注: "音乐文件和地址"——待播放文件的文件名,前面带上绝对路径,或者本站的相对路径。  width_num—&m... 查看详情
收藏 0 赞 0 分享

XHTML常用标签介绍

一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。 XHTML里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也... 查看详情
收藏 0 赞 0 分享

HTML网页图片标记

插入图片标记<IMG> 今天看到的丰富多彩的网页,都是因为有了图像的作用。想一想过去,网络中全部都是纯文本的网页,非常枯燥,就知道图像在网页设计中的重要性了。在html页面中可以插入图像,网页常用的图像格式有JPEG和GIF两种: JPEG(Joint Pho... 查看详情
收藏 0 赞 0 分享

网页表单设计实例技巧五则

1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <t... 查看详情
收藏 0 赞 0 分享

HTML网页列表标记学习教程

HTML网页列表标记学习教程. 在html页面中,列表可以起到提纲写领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。 所谓有序,指的是按照数字或字母等顺序排列列表项目。 ... 查看详情
收藏 0 赞 0 分享
查看更多