XHTML教程.doc

1、前言：（废话） 现在都讲究标准建站，而标准建站使用的技术主要是 XHTML+CSS，而现在我们普遍使用的是 HTML代码，那么我该如何转换呢？以及 HTML和 XHTML有什么不同呢？在这个教程里，你将学到 HTML和 XHTML之间的不同，以及如何将 HTML转换为 XHTML。毕竟 XHTML是发展的方向，所以我觉得该教程有必要在本站上发布。我感觉要是你想使用标准还是最好先学 HTML，因为比较简单，然后再来看该教程。XHTML 介绍：XHTML 是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写，而 HTML则是 HyperT

2、ext Markup Language(超文本标记语言) ，这是名字的不同。其实我们说得标准应该是 XML，那为什么要学习 XHTML呢？因为现在的 HTML代码烦琐，危机四伏，但是 XML使用环境还不成熟，所以推出了一个过度的产品就是 XHTML，它起着呈上起下的作用。也有人认为 XHTML是 HTML的一个升级版本，其实也是正确的，我的理解是 XHTML把 HTML做得更加规范的一个标记语言，使 HTML变得功能强大，减少了代码的烦琐尤其是表格。XHTML 是在 2000年 1月 26日被国际标准组织机构 W3C(World Wide web Consortium)定为一个标准的，认为是

3、HTML的一个最新版本，并且将逐渐替换HTML。现在所有的浏览器都支持 XHTML，XHTML 兼容 HTML 4.0。也有人认为XHTML就是 HTML4.01。如果你在学习过程中自己编写了一个符合标准的站，你可以通过 W3C的验证，验证通过后你将会得到一个标志，通常是 XHTML1.0认证和CSS验证。我也不清楚目前国内有多少个网站同时通过了这两个验证。大家可以去 http:/www.w3.org/这个站点去验证你的站，如果符合那两个规则则会分别给我们两段代码加到你的网页上向别人展示说明你采用了标准建站啊，牛啊！为什么我们使用 XHTML XHTML 是 HTML升级为 XML的过度产品，

4、被定为一个标准，XHTML 完全兼容HTML4.01，并且具有 XML的语法。下面我们来看一个含有错误代码的 HTML，如下： This is bad HTMLBad HTML虽然含有错误代码，但是当我们在浏览器中浏览时还能正常显示。XML 是一个标记语言，但是它要求在网页中出现的任何元素都应该被标记出来，XML 是用来描述网页中的数据的，而 HTML用来显示网页中的元素的。目前我们上网使用的各种浏览器技术，包括手提电脑、手机上网浏览等等，都要求浏览的一些内容都要被正确标记，如果有错误的标记可能会使显示特别混乱、甚至不能正常显示。因此联合 HTML 和 XML , 还有其他的一些技术，我们得到

5、了一种现在有用的而且在将来也有用的语言 - XHTML。当在将来都规范的时候我们就要用的 XHTML 正确格式的标记了,使所有的浏览器都能正确的执行，所以我们现在有必要开始学习 XHTML了。XHTML 和 HTML之间的区别：XHTML 是一项新技术，在浏览器和一些其他的软件都支持它之前，我们应该有必要熟悉一下这项技术。为了我们更好的学习 XHTML之前我们应该熟悉一下HTML4.0，我们可以去下载一个参考手册来熟悉一下。以便于我们学起 XHTML来更简单，换句话说我们现在使用 HTML编写代码时应该尽力少写错误代码，如：都要使用小写的字符来编写 HTML，每个标记之后都要加上标记的结束如：

6、网页教学网欢迎您的光临 结束一定要有，我们要保持这种规则。它们之间最大的区别在于：1.XHTML 元素一定要被正确的嵌套使用。在 HTML里一些元素可以不正确嵌套也能正常显示，如： This text is bold and italic 而在 XHTML必须要正确嵌套之后才能正常使用，如： This text is bold and italic注意：这个错误通常发生在当嵌套多层之后的标签里面。如： CoffeeTeaBlack teaGreen teaMilk正确的应该是： CoffeeTeaBlack teaGreen teaMilk观察上述的两段代码我们可以看到正确的里面我们在 之后插

7、入 标签。 XHTML 文件一定要有正确的组织格式。所有的 XHTML应该正确的被嵌套在以开始以结束的元素里面，其他的元素可以有子元素，并且子元素也要被正确的嵌套在他们的父元素内。如：. . 标签名字一定要用小写字母。因为 XHTML 文档是 XML应用程序， XML 对大小写是敏感的。象 和 是两个不同的标记。如错误代码： This is a paragraph正确格式为： This is a paragraph所有的 XHTML 元素一定要关闭不能有没有关闭的空的元素存在我们的代码中，其实对于这点我们是比较好结束的，有开始就应该有结束吗？例如错误代码： This is a paragrap

8、hThis is another paragraph正确的为： This is a paragraphThis is another paragraph独立的一个标签我们也要结束用 /来结束。例如：错误代码 This is a breakHere comes a horizontal rule:Heres an image 正确代码： This is a breakHere comes a horizontal rule:Heres an image 通过上面的几个例子我们基本上看出了 HTML和 XHTML之间的不同，那么我们应该从现在起应该试着改变我们现在的 HTML，例如都使用小写的标记

9、、在标记之后加上结束标记的符号 /。XHTML 的语法简单的说写 XHTML 要用干净的 HTML 语法。XHTML 的一些其他语法要求：属性名字必须小写。如：错误代码： 正确的代码： 属性值必须要被引用。如：错误的代码： 正确的代码： 属性的缩写被禁止。如：错误的代码： 正确的代码： 列出一个表让大家知道： HTML XHTML compact compact=“compact“ checked checked=“checked“ declare declare=“declare“ readonly readonly=“readonly“ disabled disabled=“disable

10、d“ selected selected=“selected“ defer defer=“defer“ ismap ismap=“ismap“ nohref nohref=“nohref“ noshade noshade=“noshade“ nowrap nowrap=“nowrap“ multiple multiple=“multiple“ noresize noresize=“noresize“ 用 id属性代替 name属性。如：HTML 4.01 中为 a，applet, frame, iframe, img 和 map 定义了一个 name属性.在 XHTML 里 name属性是不能

11、被使用的，应该用 id 来替换它。如： 错误代码： 正确的代码：注意：我们为了使旧浏览器也能正常的执行该内容我们也可以在标签中同时使用 id和 name属性。如： 为了适应新的浏览器浏览我们在上述代码中的最后我加了/来结束标签。XHTML DTD定义文档的类型。在 XHTML中我们必须声明文档的类型，以便于浏览器知道你的文档是什么类型的，而且声明部分要加在文档的 head之前。如：Title goes hereBody text goes here注:DOCTYPE 声明不是 XHTML 文档的一部分，它也不是文档的一个元素，所以我们没必要加上结束标签。注:XHTML 属性都是在标签里面。然而

12、当我们在 w3.org验证时，并不解释我们的文档有没有声明类型。这是因为“xmlns=http:/www.w3.org/1999/xhtml“是一个固定的值，如果你没声明的话，它也会被自动的加到标签前。我们使用 DOCTYPE时的基本机构： . . DOCTYPE 是 document type(文档类型)的简写，用来说明你用的 XHTML或者HTML是什么版本。 其中的 DTD(例如 xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的 DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE 声明是必不可少的关键组成部

13、分；除非你的 XHTML确定了一个正确的 DOCTYPE，否则你的标识和 CSS都不会生效。XHTML 1.0 提供了三种 DTD声明可供选择：过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01的标识(但是要符合 xhtml的写法)。完整代码如下：严格的(Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，完整代码如下：框架的(Frameset):专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要采用这种 DTD。完整代码如下：如何转换现有的结构为 XHTML我们选择什么样的 DOCTYPE？理想情况当然是严格的 D

14、TD，但对于我们大多数刚接触 web标准的设计师来说，过渡的 DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型 DTD)。因为这种 DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C的代码校验。我们从现在的 HTML转换为 XHTML注意以下几点： 一、在每个页面的首部都加上文档类型的说明。如：当然可以选择其他类型的。二、标记和 name 要都用小写。我们可以自己编写一个替换程序，将你的 HTML文档中的所有的标记都换为小写字母，还有 name属性也要变为小写。三、所有的属性值都要用引号引起来。四、单独的标签，如: , and

15、，都要在后面加/来结束。在这里不建议使用诸如：和形式的方式，直接在其后面加/就可以了，如。五、我们打开 W3C DTD 的官方网站：http:/validator.w3.org/check/referer，验证时一般错误可能会出现在你的标签嵌套里。也可以用官方网站提供的转换工具 tidy来实现转换：http:/www.w3.org/People/Raggett/tidy/，我不建议大家直接来使用该工具来验证，因为我们毕竟是新学 XHTML我们还是自己转换，这样我们可以熟悉 XHTML啊，再者说我们还要学习 tidy工具的使用，那样也是比较麻烦的。六、我们直接打开下面的页面可以直接输入网址来验证

16、我们的程序了：http:/validator.w3.org/check?uri=http%3A%2F%2F%2FXHTML 的模块化为什么要模块化设计 XHTML呢？XHTML 虽然简单，但是它的内容很多，包括了一个网络设计师需要的绝大多数功能。XHTML 一方面内容繁多复杂，但是从另一个角度来看它却是非常简单的。为了将 XHTML分割成小的模块，W3C 已经建立起了小型的已经定义好了的一系列 XHTML元素，他们独立的能被与其他 XML标准合并成的大型的更复杂的程序的简单设备所使用。通过 XHTML模型，程序设计师能够做如下的事情：1.选择那些能够被使用 XHTML构建块标准的设备所支持的元

17、素。2.在遵循 XHTML标准的同时使用 XML可以对 XHTML扩展。3.简单化的 XHTML可以应用于像掌上电脑、移动电话、电视和家用电器等设备。4.通过加入心的 XML功能（像声音、多媒体的）将 XHTML延续到复杂程序的设计上。5.像 XHTML基本（XHTML 对于移动设备的一个子集）那样来定义 XHTML的轮廓。 模块名 描述Applet Module * applet元素.Base Module 定义基本元素.Basic Forms Module 定义基本的表单元素Basic Tables Module 定义基本的表格元素Bi-directional Text Module定义

18、bdo 元素.Client Image Map Module 定义浏览器的 image map 元素.Edit Module Defines the editing elements del and ins.Forms Module Defines all elements used in forms.Frames Module 定义框架集元素Hypertext Module 定义 a 元素.Iframe Module 定义 iframe 元素.Image Module 定义 img 元素.Intrinsic Events Module 定义事件改变属性元素Legacy Module Defi

19、nes deprecated* elements and attributes.Link Module 定义 link 元素.List Module 定义 list 元素 ol, li, ul, dd, dt, dl.Metainformation Module 定义 meta 元素.Name Identification ModuleDefines the deprecated* name attribute.Object Module 定义 object 和 param 元素.Presentation Module 定义表现元素如 b 和 i.Scripting Module 定义 script and noscript 元素.Server Image Map Module 定义 server side image map 元素.Structure Module 定义结构 html, head, title and body.Style Attribute Module 定义 style 属性.Style Sheet Module 定义 style 元素.Tables Module 定义表内应用的元素.Target Module 定义 target 属性.Text Module 定义 text container 元素如： p and h1.*表示不赞成应用到 XHTML中