• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 如何正确地在XHTML文档中使用JavaScript和CSS

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含XHTML,JavaScript,CSS等相关知识,佚名 希望在学习及工作中可以帮助到您
在越来越多的网站中,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转变的过程中,至少在接下来的这些年里不会出现什么问题。

您可能想查找下面的文章:

  • 详解HTML/XHTML中img图像标签的基本用法
  • 详解XHTML中的标题标签与段落标签的使用
  • XHTML中的常用标签整理
  • HTML与XHTML、以及HTML4与HTML5标签之间的区别简介
  • HTML与XHTML、以及HTML4与HTML5标签之间的区别简介
  • xHTML与HTML标签的写法有哪些不同
  • html,xhtml,xml的区别介绍
  • XHTML编码七条基本规范小结
  • XHTML标签语义化介绍
  • XHTML标签的嵌套规则分析

相关文章

  • 2017-08-05HTML中Li标签的使用示例
  • 2017-08-05文字滚动后自动停止效果示例
  • 2017-08-05iframe 自适应大小实现代码
  • 2017-08-05a标签怎么去下划线以及实现点击前和点击后不变色
  • 2017-08-05设置搜索框的默认文字当鼠标单击时该默认文字消失
  • 2017-08-05HTML语法大全_html语言语法大全(必看)
  • 2017-08-05ul和li 基本用法分析
  • 2017-08-05HTML中select标签单选多选用法详解
  • 2017-08-05HTML基础 HTML的组成结构
  • 2017-08-05a标签href属性和onclick事件的比较介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML+CSS项目开发经验总结(推荐)
    • HTML中Form表单的method属性使用介绍
    • 关于分割线 hr 在各浏览器中的差异
    • HTML 版本声明 DOCTYPE 标签
    • 正确使用HTML title属性的一些建议
    • html中br和br/的区别介绍
    • HTML页面3秒后自动跳转的三种常见方法
    • table设置背景图片,不能100%显示解决方法
    • W3C教程(7):W3C XSL 活动
    • 将html文本中所有的标签替换掉的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有