通过代码实例跟我学css样式单技术的应用实例（第1部分）——了解与xhtml+div+css+js有关的技术._第1页
通过代码实例跟我学css样式单技术的应用实例（第1部分）——了解与xhtml+div+css+js有关的技术._第2页
通过代码实例跟我学css样式单技术的应用实例（第1部分）——了解与xhtml+div+css+js有关的技术._第3页
通过代码实例跟我学css样式单技术的应用实例（第1部分）——了解与xhtml+div+css+js有关的技术._第4页
通过代码实例跟我学css样式单技术的应用实例（第1部分）——了解与xhtml+div+css+js有关的技术._第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1.1 跟我学CSS样式单技术的应用实例（第1部分）了解与XHTML+DIV+CSS+JS有关的技术1.1.1 了解与HTML和XHTML有关的技术名词1、W3C组织介绍（1）W3C简介W3C是“World Wide Web Consortium”的缩写，中文称“万维网组织”。是一个专注于“领导和发展web技术”的国际工业行业协会。它由万维网发明者Time Berners-Lee领导，成立与1994年。W3C已经有超过500家的会员-包括微软、美国在线（Netscape的母公司）、苹果电脑、Adobe、Macromedia、SUN 以及各类主流硬件、软件制造商和电信公司。学会主要研究由三家学术

2、机构主理-美国麻省理工学院(MIT)、法国的欧洲信息与数学研究论坛（ERCIM）、日本的应庆大学（KEIO）。 （2）W3C主要工作重点是研究和制定开放的规范（事实上的标准），以便提高web相关产品的互用性。W3C的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成。工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为“推荐规范（Recommendations）”发布。更多的信息可以访问W3C的网站： （3）W3C的官方网站2、XHTML是什么形式的标记语言（1）XHTML本身并不是什么新的标记语言，它其实是更“规范”的

3、HTML 版本可以这样理解XHTML标记语言：“XHTML = HTML + XML”，也就是满足“XML语法”要求的HTML页面。W3C发布XHTML规范的主要目的是希望Web开发人员能够设计并实现出比较“严谨”和“规范”的HTML页面，也就是要求Web页面设计者能够按照XML（eXtensible Markup Language，可扩展的标记语言）的“语法规范”进行Web页面设计，以避免浏览器在显示时产生出“二义性”，并保证在各个不同的浏览器中能够实现一致的显示效果。（2）演示HTML标签的不规范（3）XHTML标准中的标签元素一般分为三大类l 辅助布局设计标签比如DIV、SPAN等标签这

4、类标签的主要功能是用来布局整个页面的（因为它们可以定义一个区域），灵活地使用这些标签元素的各种属性，可以让页面表现丰富多彩。l 结构化标签比如TABLE、UL、PRE、CODE等类标签是一种信息显示与整理方式TABLE很明显就是用来显示表格信息的，而UL是用来显示列化信息的。 l 实现一些辅助功能，如填上关键字的META keyword、超链接的A标签等。使用DIV等布局元素来制作页面的设计布局比如定位,色块,图片等，而使用TABLE、UL等标签显示页面中需要展示的数据。3、W3C为什么要放弃HTML标记语言（1）首先HTML只能在Web浏览器中显示和应用随着Internet网络技术的不断发展

5、，涌现出了许多手持形式的网络客户端设备：比如手机、PDA、信息家电等都不能直接显示由HTML所标识的信息。因此，HTML不能适应现在越来越多的网络设备和应用的需要。（2）其次HTML标签本身是不规范和比较臃肿的1) 由于W3C（World Wide Web Consortium的缩写，中文称“万维网组织”）当时在制定HTML规范时不是一个“强制性”的标准规范，从而导致目前的各个不同厂商的Web浏览器和不同版本的浏览器对同一个HTML标签的支持也是不一致的。因为，许多厂商为了提升浏览器的性能，而创建了自己的HTML扩展子集；2) 另外，Web页面开发者在应用HTML标签时也不严格遵守HTML的规

6、范要求而“随意”地编写HTML标签。（3）HTML标签是不规范的最终结果导致浏览器本身比较臃肿1) 这种状况的最终结果将导致Web浏览器程序需要足够“智能判断”、“程序庞大”和“程序复杂”才能够正确地显示出HTML页面；2) 另外，设计和开发实现能够在所有的Web浏览器上都能够一致性地显示的HTML页面其实也是十分困难的，甚至是不可能的。这为Web应用系统的兼容性设计和实现带来一定的复杂性和人为地增加了开发实现的工作量。（4）另外HTML标签是将“内容”和“表现”混杂在一起1) 任何标签所描述的“内容”发生改变、页面“结构”的局部调整变化都会影响到整个页面的“表现”部分的标签也都需要相应地修改

7、或者调整，而且还需要一点一点地和细致地修改。2) 而XML技术的可扩展性不仅允许Web开发者自己定制体现结构的标签，并且还提供了多种不同的显示风格的控制技术，如应用CSS和XSLT（eXtensible Stylesheet Language Transformation，XSLT是一种用来转换XML文档结构的语言）对页面内容的显示格式控制。3) 最终实现将Web页面中的“内容”和“表现”相互分离。（5）最后，还表现在重用页面内容时也比较困难正是由于HTML标签是将“内容”和“结构”与“表现”相混合在一起的，因此对同一个页面的内容再重用也比较困难。因此，必须要将“内容”和“结构”与“表现”相分

8、离，才能有利于对页面“内容”的再重用，和对同一个页面“内容”附加不同的“表现”而产生出“换皮肤”的显示效果。4、有必要规范HTML标签本身及对HTML的应用方式（1）需要制定出强制性的标准和规范Web标准化本身和设计的Web文档的标准化给Web开发人员带来的好处不仅体现在页面结构清晰，而且也能够提高页面的可读性和可维护性、降低客户端浏览器的版本升级和改变浏览器时所可能带来的兼容性方面的成本开销；（2）由于页面“内容”和“表现”两者相互分离更易于对页面“内容”的维护和“表现”形式的扩展。（3）标准化的Web文档也更能够被搜索引擎搜索命中（4）由于页面“内容”和“表现”相互分离，页面“内容”能够被

9、更多的设备访问，如打印机、手机等设备。5、W3C为什么要推荐XML和XHTML标记语言（1）XHTML代表更规范和更严谨的HTMLW3C首先制定了XML的基本规范，并不断地推广XML技术的应用。目前XML的可扩展性广泛地应用在不同平台的数据交换、网络通讯协议等领域，在Java及J2EE技术平台中还广泛地应用XML文档作为项目的系统配置文件。但XML的可扩展性（也就是允许XML使用者自己定义标签和属性的名称）为浏览器程序的设计和开发实现也带来了许多不便没有标准的标签名和属性名，浏览器程序也就无法识别和理解不同用户自定义的各种XML标签的“表现”要求。（2）为此，W3C又制定了XHTML技术标准和

10、相应的技术规范XHTML不仅是将“随意”的HTML的应用向“规范”和“严谨”的XML技术过度的一个桥梁，同时也是一个引导Web页面设计人员逐步走向规范、走向XML的过渡技术实现的方案。尽管在XHTML的名称中也有“X”但它并不能扩展（自定义标签名），只是在HTML规范的基础上要求Web页面设计人员一定要严格遵循和应用XML的技术规范设计和开发实现Web页面。（3）应用XHTML可以提高HTML页面信息的可重用性在应用中经常需要在XML文档中重用HTML页面中的标签信息，但由于普通的HTML并不是基于XML语法格式的，无法直接重用。而必须要对HTML文档进行修改或者转换后成为正确的XML文档，才

11、能被重用。XHTML由于本身就是XML，因此在XML文档中可以直接包含XHTML片断，同样在XHTML文档中也可以包含XML的片断。（4）保证相同的HTML页面内容在不同的浏览器中显示相同的效果浏览器在解析不规范的HTML页面时，必须首先要修正它。而不同厂商的浏览器（而且目前的浏览器除了PC机，还有PDA、手机、电视等设备中的浏览器）的修复方式并不一致，这就有可能出现相同的HTML页面内容在不同的浏览器中显示出不同的效果。6、W3C为什么要建立Web标准（1）建立Web标准的目的建立Web标准的目的是解决网站中由于浏览器升级、网站代码冗余、臃肿等带来的问题。Web标准是在W3C（W3C.org

12、万维网联盟）的组织下建立的，主要有以下几个目的：1) 简化了代码，从而降低成本。 2) 实现了结构和表现分离，所以确保了任何网站文档的长期有效性。 3) 可以简单的调用不同的样式文件，所以使得网站更易使用，适合更多的用户和网络设备。 4) 因为实现了向后兼容，即使当浏览器版本更新，或者出现新的网络交互设备的时候，所有应用能够继续正确执行。（2）使用Web标准后对网站拥有者的好处最大的好处是大大缩减了页面代码，提高浏览速度，缩减宽待成本。由于结构清晰，能使网页更容易被搜索引擎搜索到。具体的好处体现在以下几方面：1) 代码更简洁，组件用的更少，所以维护也更加便捷。 2) 页面结构更清晰，使搜索引擎

13、的搜索更加容易。 3) 对宽带要求降低，从而节约了成本。 4) 实现了结构和表现分离，使得修改页面外观更容易操作，同时不改变页面内容。 5) 页面结构清晰合理，也提高了网站的易用性。（3）使用Web标准后对浏览者带来的好处1) 清晰的语义结构，使得内容能够被更多的用户浏览、访问。 2) 页面冗余代码减少，下载文件速度更快，同时页面显示的速度也更快。 3) 由于结构和表现分离，所以内容能够被更多的设备访问，比如：打印机、手机等。 4) 独立的样式文件，可以使用户更加容易的选择自己喜欢的界面。7、XHTML页面文档的总体结构要求（1）XHTML页面文档的总体结构要求所有的XHTML 文档必须要提供

14、有对应的文档类型声明（DocType Declaration）定义，并且所有的XHTML标签都必须要嵌套于<html>根标签中，而且在页面中还必须要包含有成对的<html>、<head>和<body>等标签，<title>标签必须要放在成对的<head>标签之内。<body>标签用来显示页面的内容部分，可以包含文本、图片等页面元素。在浏览器中只显示<body>标签所包含的部分，但文档头部定义的内容没有出现在页面中其中有一些会出现在浏览器的其他地方，比如：文档的标题出现在了浏览器的标题栏里。（2）体现

15、XHTML页面文档的结构要求的代码示例通过该示例代码能够明确XHTML规范是一个“强制性”的规范。下面为体现XHTML页面文档的结构要求的代码示例。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=" :/ /1999/xhtml"><head><meta -equiv="Content-Type&qu

16、ot; content="text/html;charset=gb2312"/><title>体现XHTML页面文档的结构要求的示例页面标题条中的信息文字</title></head><body> <div id="pageHead"> </div> </body></html>（3）对示例中的XHTML代码的说明1) 首先是关于文档类型文件的声明项目2) 然后是页面文档的开始标签<html>，但在其中声明了一个命名空间的属性（黑体所标识的代

17、码，本示例为默认命名空间，而且是W3C推荐的命名空间字符串），因为在XHTML 文档中的<html> 标签内的xmlns属性是必需的。保证在同一个XHTML文档中可以包含多个不同命名空间内的标签元素，实现重用。3) 其次在成对的<head>标签内，可以提供有本页面文档的设计者、页面信息的文字编码等相关的内容（各种形式的<meta>标签，参见【例1-5】中的<meta>标签示例及说明文字）。4) 最后在成对的<body>标签内的各个不同的信息描述的子标签必须要能够被正确地嵌套在对应的父标签体内；所有的非空标签必须要能够提供对应的结束标签

18、，而空标签如<hr>、<br> 和<img>等应该要被替换为<hr/>、<br/>和<img/>等形式。注意：应用XHTML实现的Web页面和应用普通的HTML实现的Web页面的不同点。8、总结XHTML标记语言的基本语法要求Web页面设计人员在应用XHTML开发Web页面时，不仅要遵守HTML语法的基本要求，也还要遵守与XHTML有关的如下附加要求：（1）所有的标签元素必须要能够被正确地嵌套和有结束标签。<body> <a></body> </a>（2）标签名必须要用小写字

19、母。<BODY> </body>（3）XHTML页面文档必须要拥有<html>根标签。（4）属性名必须小写、并且必须要加引号包围和属性名不能采用简写形式。 <body BGcolor=#FF0000>（5）用 id 属性名代替 name 属性名以定义该标签的对象名、属性值包含在双括号内（“”）。<div name="someOneContent" id="someOneContent"></div>（6）XHTML页面中的DTD（Document Type Definition，文档

20、类型定义）定义页面文件中的各个标准的HTML标签元素及属性的语法规则。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd">9、常规的HTML页面和XHTML页面的DTD的差别（1）DTD的主要作用DTD定义了HTML及XHTML页面文档的逻辑结构，并规定了页面文档中所使用的标签、实体、标签的属性、标签和实体之间的关系等语法方面的信息内容。浏览器通过分析DTD文件中的语法规则的

21、定义，可以检测应用该DTD的HTML及XHTML页面文档的结构及每个标签名称是否正确（满足DTD中声明的要求）。因此，DTD是一种保证HTML及XHTML文档格式正确的有效方法。但常规的HTML页面的DTD与XHTML页面的DTD存在差别。（2）常规的HTML风格的页面DTD定义 在HTML 4.01的规范中提供有三种不同形式的DTD定义，其中的：1) “HTML 4.01 Strict”严格类型的DTD要求在页面文档中不能包含被反对使用的各种标签和属性（必须使用符合HTML4.01中定义的标签）；2) 而在“HTML 4.01 Transitional”过渡类型的DTD中，允许在页面文档中包

22、含被反对使用的标签和属性；3) “HTML 4.01 Frameset”框架式类型的DTD则主要适用于框架集的Web页面的定义。（3）过渡类型DTD定义的代码片段示例下面为一个过渡类型（HTML 4.01 Transitional，也称为宽松行Loose）的HTML 4.01规范中的DTD定义的代码片段示例，与以前的HTML其它版本兼容：<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" " :/ /TR/html4/loose.dtd">10、XHTML风格的页

23、面DTD定义（1）W3C同样也提供有三种类型的DTD定义对于XHTML1.0版本的页面DTD规范，W3C同样也提供有三种类型的DTD定义，其中的：1) “XHTML 1.0 Strict”严格类型的DTD要求在页面文档中不能包含有被反对使用的各种标签和属性；2) 而“XHTML 1.0 Transitional”的过渡类型的DTD中，允许在页面文档中可以包含被反对使用的标签和属性（但要符合XHTML的基本语法要求）；3) “XHTML 1.0 Frameset”框架式类型的DTD则同样也主要适用于框架集类型的Web页面的定义。（2）严格类型DTD定义的代码片段示例下面为一个严格类型（XHTML 1.0 Strict）的XHTML1.0版本规范中的DTD定义的代码片段示例：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd">

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论