通过代码实例跟我学css样式单技术的应用实例（第1部分）——了解与xhtml+div+css+js有关的技术.
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 以及各类主流硬件、软件制造商和电信公司学会主要研究由三家学术机构主理--美国麻省理工学院(MIT)、法国的欧洲信息与数学研究论坛（ERCIM）、日本的应庆大学（KEIO） （2）W3C主要工作重点是研究和制定开放的规范（事实上的标准），以便提高web相关产品的互用性W3C的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为“推荐规范（Recommendations）”发布。
更多的信息可以访问W3C的网站： w3.org （3）W3C的官方网站2、XHTML是什么形式的标记语言（1）XHTML本身并不是什么新的标记语言，它其实是更“规范”的 HTML 版本可以这样理解XHTML标记语言：“XHTML = HTML + XML”，也就是满足“XML语法”要求的HTML页面W3C发布XHTML规范的主要目的是希望Web开发人员能够设计并实现出比较“严谨”和“规范”的HTML页面，也就是要求Web页面设计者能够按照XML（eXtensible Markup Language，可扩展的标记语言）的“语法规范”进行Web页面设计，以避免浏览器在显示时产生出“二义性”，并保证在各个不同的浏览器中能够实现一致的显示效果2）演示HTML标签的不规范（3）XHTML标准中的标签元素一般分为三大类l 辅助布局设计标签比如DIV、SPAN等标签——这类标签的主要功能是用来布局整个页面的（因为它们可以定义一个区域），灵活地使用这些标签元素的各种属性，可以让页面表现丰富多彩l 结构化标签比如TABLE、UL、PRE、CODE等类标签是一种信息显示与整理方式——TABLE很明显就是用来显示表格信息的，而UL是用来显示列化信息的。
l 实现一些辅助功能，如填上关键字的META keyword、超链接的A标签等使用DIV等布局元素来制作页面的设计布局——比如定位,色块,图片等，而使用TABLE、UL等标签显示页面中需要展示的数据3、W3C为什么要放弃HTML标记语言（1）首先HTML只能在Web浏览器中显示和应用随着Internet网络技术的不断发展，涌现出了许多手持形式的网络客户端设备：比如手机、PDA、信息家电等都不能直接显示由HTML所标识的信息因此，HTML不能适应现在越来越多的网络设备和应用的需要2）其次HTML标签本身是不规范和比较臃肿的1) 由于W3C（World Wide Web Consortium的缩写，中文称“万维网组织”）当时在制定HTML规范时不是一个“强制性”的标准规范，从而导致目前的各个不同厂商的Web浏览器和不同版本的浏览器对同一个HTML标签的支持也是不一致的因为，许多厂商为了提升浏览器的性能，而创建了自己的HTML扩展子集；2) 另外，Web页面开发者在应用HTML标签时也不严格遵守HTML的规范要求而“随意”地编写HTML标签3）HTML标签是不规范的最终结果导致浏览器本身比较臃肿1) 这种状况的最终结果将导致Web浏览器程序需要足够“智能判断”、“程序庞大”和“程序复杂”才能够正确地显示出HTML页面；2) 另外，设计和开发实现能够在所有的Web浏览器上都能够一致性地显示的HTML页面其实也是十分困难的，甚至是不可能的。
这为Web应用系统的兼容性设计和实现带来一定的复杂性和人为地增加了开发实现的工作量4）另外HTML标签是将“内容”和“表现”混杂在一起1) 任何标签所描述的“内容”发生改变、页面“结构”的局部调整变化都会影响到整个页面的“表现”部分的标签也都需要相应地修改或者调整，而且还需要一点一点地和细致地修改2) 而XML技术的可扩展性不仅允许Web开发者自己定制体现结构的标签，并且还提供了多种不同的显示风格的控制技术，如应用CSS和XSLT（eXtensible Stylesheet Language Transformation，XSLT是一种用来转换XML文档结构的语言）对页面内容的显示格式控制3) 最终实现将Web页面中的“内容”和“表现”相互分离5）最后，还表现在重用页面内容时也比较困难正是由于HTML标签是将“内容”和“结构”与“表现”相混合在一起的，因此对同一个页面的内容再重用也比较困难因此，必须要将“内容”和“结构”与“表现”相分离，才能有利于对页面“内容”的再重用，和对同一个页面“内容”附加不同的“表现”而产生出“换皮肤”的显示效果4、有必要规范HTML标签本身及对HTML的应用方式（1）需要制定出强制性的标准和规范Web标准化本身和设计的Web文档的标准化给Web开发人员带来的好处不仅体现在页面结构清晰，而且也能够提高页面的可读性和可维护性、降低客户端浏览器的版本升级和改变浏览器时所可能带来的兼容性方面的成本开销；（2）由于页面“内容”和“表现”两者相互分离更易于对页面“内容”的维护和“表现”形式的扩展。
3）标准化的Web文档也更能够被搜索引擎搜索命中（4）由于页面“内容”和“表现”相互分离，页面“内容”能够被更多的设备访问，如打印机、手机等设备5、W3C为什么要推荐XML和XHTML标记语言（1）XHTML代表更规范和更严谨的HTMLW3C首先制定了XML的基本规范，并不断地推广XML技术的应用目前XML的可扩展性广泛地应用在不同平台的数据交换、网络通讯协议等领域，在Java及J2EE技术平台中还广泛地应用XML文档作为项目的系统配置文件但XML的可扩展性（也就是允许XML使用者自己定义标签和属性的名称）为浏览器程序的设计和开发实现也带来了许多不便——没有标准的标签名和属性名，浏览器程序也就无法识别和理解不同用户自定义的各种XML标签的“表现”要求2）为此，W3C又制定了XHTML技术标准和相应的技术规范XHTML不仅是将“随意”的HTML的应用向“规范”和“严谨”的XML技术过度的一个桥梁，同时也是一个引导Web页面设计人员逐步走向规范、走向XML的过渡技术实现的方案尽管在XHTML的名称中也有“X”但它并不能扩展（自定义标签名），只是在HTML规范的基础上要求Web页面设计人员一定要严格遵循和应用XML的技术规范设计和开发实现Web页面。
3）应用XHTML可以提高HTML页面信息的可重用性在应用中经常需要在XML文档中重用HTML页面中的标签信息，但由于普通的HTML并不是基于XML语法格式的，无法直接重用而必须要对HTML文档进行修改或者转换后成为正确的XML文档，才能被重用XHTML由于本身就是XML，因此在XML文档中可以直接包含XHTML片断，同样在XHTML文档中也可以包含XML的片断4）保证相同的HTML页面内容在不同的浏览器中显示相同的效果浏览器在解析不规范的HTML页面时，必须首先要修正它而不同厂商的浏览器（而且目前的浏览器除了PC机，还有PDA、手机、电视等设备中的浏览器）的修复方式并不一致，这就有可能出现相同的HTML页面内容在不同的浏览器中显示出不同的效果6、W3C为什么要建立Web标准（1）建立Web标准的目的 建立Web标准的目的是解决网站中由于浏览器升级、网站代码冗余、臃肿等带来的问题Web标准是在W3C（W3C.org万维网联盟）的组织下建立的，主要有以下几个目的：1) 简化了代码，从而降低成本 2) 实现了结构和表现分离，所以确保了任何网站文档的长期有效性 3) 可以简单的调用不同的样式文件，所以使得网站更易使用，适合更多的用户和网络设备。
4) 因为实现了向后兼容，即使当浏览器版本更新，或者出现新的网络交互设备的时候，所有应用能够继续正确执行2）使用Web标准后对网站拥有者的好处 最大的好处是大大缩减了页面代码，提高浏览速度，缩减宽待成本由于结构清晰，能使网页更容易被搜索引擎搜索到具体的好处体现在以下几方面：1) 代码更简洁，组件用的更少，所以维护也更加便捷 2) 页面结构更清晰，使搜索引擎的搜索更加容易 3) 对宽带要求降低，从而节约了成本 4) 实现了结构和表现分离，使得修改页面外观更容易操作，同时不改变页面内容 5) 页面结构清晰合理，也提高了网站的易用性3）使用Web标准后对浏览者带来的好处1) 清晰的语义结构，使得内容能够被更多的用户浏览、访问 2) 页面冗余代码减少，下载文件速度更快，同时页面显示的速度也更快 3) 由于结构和表现分离，所以内容能够被更多的设备访问，比如：打印机、手机等 4) 独立的样式文件，可以使用户更加容易的选择自己喜欢的界面7、XHTML页面文档的总体结构要求（1）XHTML页面文档的总体结构要求所有的XHTML 文档必须要提供有对应的文档类型声明（DocType Declaration）定义，并且所有的XHTML标签都必须要嵌套于根标签中，而且在页面中还必须要包含有成对的、
和等标签，保证在同一个XHTML文档中可以包含多个不同命名空间内的标签元素，实现重用3) 其次在成对的
标签内，可以提供有本页面文档的设计者、页面信息的文字编码等相关的内容（各种形式的标签，参见【例1-5】中的标签示例及说明文字）4) 最后在成对的标签内的各个不同的信息描述的子标签必须要能够被正确地嵌套在对应的父标签体内；所有的非空标签必须要能够提供对应的结束标签，而空标签如、
和
、
和
（5）用 id 属性名代替 name 属性名以定义该标签的对象名、属性值包含在双括号内（“”）（6）XHTML页面中的DTD（Document Type Definition，文档类型定义）定义页面文件中的各个标准的HTML标签元素及属性的语法规则9、常规的HTML页面和XHTML页面的DTD的差别（1）DTD的主要作用DTD定义了HTML及XHTML页面文档的逻辑结构，并规定了页面文档中所使用的标签、实体、标签的属性、标签和实体之间的关系等语法方面的信息内容浏览器通过分析DTD文件中的语法规则的定义，可以检测应用该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中，允许在页面文档中包含被反对使用的标签和属性；3) “HTML 4.01 Frameset”框架式类型的DTD则主要适用于框架集的Web页面的定义3）过渡类型DTD定义的代码片段示例下面为一个过渡类型（HTML 4.01 Transitional，也称为宽松行Loose）的HTML 4.01规范中的DTD定义的代码片段示例，与以前的HTML其它版本兼容：10、XHTML风格的页面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定义的代码片段示例：（3）DTD中包含有文件的URL，但浏览器不会去读取这些文件它仅用于识别，然后决定以什么样的规范去执行页面中的代码11、在Dreamweaver工具程序中创建符合XHTML规范要求的页面（1）XHTML规范中强制要求每个Web页面必须提供相应的DTD定义 由于在XHTML规范中强制要求每个Web页面都必须要提供有相应的DTD定义，但三种不同形式的DTD定义的代码不便于Web开发人员手写因此，为了减少在Web页面设计中的错误，在开发中可以应用各种Web页面设计的开发工具辅助页面设计2）在Dreamweaver工具程序中可以选择XHTML页面中的DTD类型选择Dreamweaver 程序中的【文件】主菜单中的【新建】子菜单，将出现【新建文档】的对话框；然后再选择所需要创建的Web页面文档类型，并在【文档类型】下拉式选择框中选择某种与XHTML相匹配的DTD选项，参见下图所示的局部截图。
12、在Dreamweaver工具程序中创建符合XHTML要求的页面在上面的图示中选择了与XHTML相匹配的某种类型的DTD后，最后单击该对话框中的【创建】按钮将创建出该Web页面的XHTML标签代码而如果仍然希望创建普通的HTML标签的页面，则只需要在【文档类型】下拉式选择框中选择某种与HTML相匹配的DTD选项，并最终后单击该对话框中的【创建】按钮，将创建出普通的HTML页面13、在Macromedia Dreamweaver工具中提供有对基于XHTML页面的有效性检查的功能当Web开发人员设计完成该页面后，可以借助于在Dreamweaver工具程序中所提供的基于XHTML页面的有效性检查的功能对本页面进行语法正确性的检查，及时发现出不规范的标签Dreamweaver工具程序不仅可以实现对XHTML进行有效性的检查，也可以实现对CSS进行有效性的检查。
