在XHTML文档中合适的使用CSS和JavaScript

2016-02-19 19:49 2 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐在XHTML文档中合适的使用CSS和JavaScript,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

在XHTML文档中合适的使用CSS和JavaScriptXHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) 定义XHTML是为了把HTML 4扩展成像XML 1.0一样的应用程序。

在许多站点中XHTML正在迅速的替代HTML 4;然而,主流浏览器对完全支持XHTML方面表现得不足,和网页设计师对HTML 4与XHTML的基本差异缺乏理解,产生了当今网络上的一个不断扩大的问题。

XHTML是XML,不是HTML 其中关于XHTML的主要的误解是,它仅仅是另外一个版本的HTML。这个误解产生于这样的事实:Microsoft® Internet Explorer只在文件以Mime类型为 text/html提交时,才支持XHTML,而标准中建议的类型其实是application/xhtml+xml。

当一个XHTML页面的MIME类型被提交为text/html时,它被所有的浏览器当作HTML处理,就好像XHTML比起HTML来没有任何不同。但是当一个XHTML页面的MIME类型被提交为text/xml或application/xhtml+xml时,它将被当作XML文档处理,而设计和显示XML都是必须要遵守严格规则的。

真正的XHTML就是一个XML的应用,所以创建XHTML时也要遵守严格的规则。特别是:

未经过处理的和&不允许出现在CDATA区域(!CDATA...)之外。
注释(!—— ... ——)中不能包含双横线。
包含在注释(!—— ... ——)中的内容将被忽略。
在内嵌的style和script中出现的问题
在被当作XML而不是HTML处理时,内嵌的style和script标记会产生几个不同的问题。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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;} --/stylescript 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+
无法正常显示文档。
包含双横线的内嵌style和script
另一个把JavaScript包含在XHTML文件的注释中产生的问题,与在XHTML的注释中使用双横线会产生的问题一样。

script type="text/javascript"!--  var i;  var sum = 0;  for (i = 10; i 0; --i)  {    sum += i;  }// --/script使用CDATA替代注释
直接把JavaScript放入CDATA区域会在低版本不支持XML的浏览器中产生问题,不过,把JavaScript的注释(//……)与CDATA一起使用,就能解决向下兼容的问题了。

script type="text/javascript" //![CDATA[  var i = 0;  while  (++i 10)  {    // ...  } //]]/script例子
在注释中使用内嵌style的CSS规则
例子1 - XHTML 1.0 Strict在text/html
这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在text/html的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+那一个都能像期望一样应用CSS规则。
例子2 - XHTML 1.0 Strict在text/xml
这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在text/xml的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注释的内联CSS规则将被忽略。
例子3 - XHTML 1.0 Strict在application/xhtml+xml
这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在application/xhtml+xml的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注释的内联CSS规则将被忽略。
使用外部文件的CSS规则
例子4 - XHTML 1.0 Strict在text/html
这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在text/html的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+。
例子5 - XHTML 1.0 Strict在text/xml
这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在text/xml的行为。这个例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+。
例子6 - XHTML 1.0 Strict在application/xhtml+xml
这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在application/xhtml+xml的行为。这个例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+。
建议 不要在XHTML中内联style或script 用外部文件包含CSS规则和JavaScript来替换内联样式和脚本是创建XHTML最佳方式,在向后兼容方式时,如果内容的MIME类型从text/html向application/xhtml+xml改变时将不会被打断。

这个建议可能看起来更强烈,可是,它是未来XHTML要打算的问题,当XHTML在text/html向application/xhtml+xml转移在几年后发生。

如果你仅仅测试你的XHTML在text/html的时候,那么你可能产生问题,例如像:不能准确的描述出主题。移动CSS和JavaScript到单独的文件是可靠的方法,关于改变你XHTML的服务方式。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

理解XHTML 1.0的HTML兼容指导
这个XHTML 1.0 HTML Compatibility Guidelines帮助创建XHTML文档向后兼容性在那些不能理解XML的老浏览器。

请注意那是纯粹的XHTML文档,你不需要使用xml-stylesheet处理指导,但应该使用link涉及的外部文件包含CSS。

资料引用:http://www.knowsky.com/441106.html

来源:http://www.tulaoshi.com/n/20160219/1621915.html

延伸阅读
标签: ASP
  Overview A wise programmer once said, "The one constant in computing is change." There couldn't be a truer statement. This article is about such change, specifically moving from HTML to the next generation, XHTML (Extensible Hypertext Markup Language). This article includes the following sections...
标签: word
怎样在Word2013中打开最近使用的文档   第1步,打开Word2013文档窗口,依次单击文件→打开按钮,如图1所示。 图1 单击打开按钮 第2步,在打开选项卡右侧的最近使用的文档列表中准备打开的Word文档名称即可,如图2所示。 图2 选择最近使用的Word文档 Word2013中打开任意Word文档的方法   第1步,打...
标签: 电脑入门
在Word2010中默认会显示20个最近打开或编辑过的Word文档,用户可以通过最近面板打开最近使用的文档,操作步骤如下所述: 第1步,打开Word2010文档窗口,单击文件按钮,如图4所示。 图4 单击文件按钮第2步,在文件面板右侧的最近使用的文档列表中单击准备打开的Word文档名称即可,如图5所示。 图5 单击最近使用的Word文档 推荐:点击...
标签: Web开发
今天有点闲,想向大家请教一下id和class的使用。 按照字面的意思,id是指一个元素在整个文档中的唯一标志,而class则是它所属的类别。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。 但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单: 那些只会在页面中出现一次的元素...
标签: Web开发
今天有点闲,想向大家请教一下id和class的使用。 按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。 但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单: 那些只会在页面中出现一次的元...

经验教程

431

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部