1，
HTML
与
XHTML
的区别
HTML
与
XHTML
是一种语言还是两种语言？基本上可以认为，它们是一种语言的
不同阶段，有点类似于文言文和白话文之间的关系。因此它们也经常被写作
(X)HTML
。下面首先从它们的渊源和区别开始本教程的讲解：
一、追根溯源
(X)HTML
是所有上网的人每天都离不开的基础，所有网页都是使用
(X)HTML
编写
的。
随着网络技术日新月异的发展．
HTML
也经历了不断的改进。
可以认为
XHTML
是
HTML
的“严谨版”。
HTML
在初期，为了它更广泛地被接受，大幅度放宽了标准的严格性，例如标记
可以不封闭，属性可以加引号，也可以不加引号，等等，导致出现了很多混乱和
不规范的代码。这
显然不符合标准化的发展趋势，影响了互联网的进一步发展。
为此，相关规范的制订者——
W3C
组织．一直在不断地努力，逐步推出新的版本
规范。从
HTML
到
XHTML
．大致经历了以下几个版本。
◆ HTML 2.0: 于
1995
年
l 1
月发布。
◆ HTML 3.2: 于
1996
年
1
月
14
日发布．
◆ HTML 4.0: 于
1997
年
12
月
18
日发布。
◆ HTML 4.01（微小改进）
:
于
1999
年
12
月
24
日发布，
◆
XHTML
1.0:
于
2000
年
1
月发布，
后叉经迂修订于
2002
年
8
月
1
日重新发布。
◆ XHTML 1.1: 于
2001
年
5
月
31
日发布。
◆ XHTML 2.0: 正在制定中。
在正式的标准序列中，
没有
HTML1.0
版，
这是因为在最初阶段．
各个机构都推出
了目己的方案，没有形成统一的标准。因此．
W3C
组织发布的
HTML 2.O
是形成
标准以后的第一个正式规范。
WANGYEXX.COM
这些规范实际上主要是为浏览器的开发者阅读的，
因为他们必须了解这些规范的
所有细节。
而对于网页设计师来说，
并不需要了解规范之间的细微差别，
这与
实
际工作并不十分相关。因此，网页设计师通常只要知道一些大的原则就可以了。
而且这些规范的文字也都比较晦涩，
并不易阅读。
当然．
如果设计师真的能够花
一
些时间把
HTML
和
css
的规范仔细通读一遍，
将会有巨大的收获。
因为这些规
范是所有设计师的“圣经”。
知识：
W3C
组织就是
World Wide Web Consortium
（全秋万维网联盟）的简称。
W3C
组织创建于
l994
年．研究
Web
规范和指导方针，致力于推动
Web
发展，保
证各种
Web
技术能很
好地协同工作。
W3C
的主要职责是确定来来万维网的发展
方向，并且制定相关的建议（
Recommendation
．由
W3C
是一个民间组织，没有约
束性，
因此只提供建议）。
HTML 4.01
规范建议（
HTML 4.01 Specification Recommendation
）就是由
W3CF
制定的。它还负制
CSS
、
XML
、
XHTML
和
MathML
等其他网络语言规范。
二、
DOCTYPE
（文档类型）的含义与选择
从
Dreamweaver
MX
2004
版开始，
在使用
Dreamweaver
新建一个网页文档的时候，
默认情况下生成的基本网页代码是这样的：
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"
2.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.
<html xmlns="http://www.w3.org/1999/xhtml">
4.
<head>
5.
<meta http-equiv="Content-Type" content="text/html; charset=u
tf-8" />
6.
<title>
无标题文档
</title>
7.
</head>
8.
9.
<body>
10.
</body>
11.
</html>
可以看到最上面有两行关于“DOCTYPE”（文档类型）的声明，它就是告诉浏览
器，使用哪种规范来解释这个文档中的代码。
设计师可以在新建文档的时候选择使用哪种文档类型。
在
Dreamweaver
的新建文
档对话框中，在右下方有—个文档类型下拉框，如图
1
所示。
图
1
在
Dreamweaver
中选择文档类型
对于
HTML
4.01
和
XHTML 1.0
分别对应于一种严格（
Strict
）类型和一种过渡
（
Transitional
）
类型。
过渡类型兼容以前版本定义的，
而在新版本已经废弃的
标记和属性。严格类型则不兼容已经废弃的标记和属性。
注意：
目前，建议读者使用
XHTML 1.O transitional
（
XHTML 1.0
过渡类型），
这样设计师可以按照
XHTML
的标准书写符合
Web
标准的网页代码。
司时在一些特
蛛情况下还可以使用传统的做法。
三、
XHTML
与
HTML
的重要区别
尽管目前浏览器都兼容
HTML
．但是为了使网页能够符合标准，设计师应该尽量
使用
XHTML
规范来编写代码，需要注意以下事项。
1.
在
XHTML
中标记名称必须小写
在
HTML
中，
标记名称可以大写或者小写。
例如，
下面的代码在
HTML
中是正确的。
1.
<BODY>
2.
<P>
网页学习网
(WANGYEXX.COM)</P>
3.
</BODY>
但是在
XHTML
中，则必须写为：
1.
<body>
2.
<p>
网页学习网
(WANGYEXX.COM)</p>
3.
</body>
2.
在
XHTML
中属性名称必须小写
HTML
属性的名称也必须是小写的。例如，在
XHTML
中下面的代码的写法是错误
的。
1.
<IMG SRC="p_w_picpath.gif" WIDTH="200" HEIGHT="100" BORDER="0">
正确的写法应该是：
1.
<img src="p_w_picpath.gif" width="200" height="100" border="0">
3.
在
XHTML
中标记必须严格嵌套
HTML
中对标记的嵌套没有严格的规定。例如，下面的代码在
HTML
中是正确的。
1.
<b><i>
这行文字以粗体倾斜显示
</b></i>
然而在
XHTML
中，必须改为：
1.
<b><i>
这行文字以粗体倾斜显示
</i></b>
此外，
经常被忽略的是对列表标记的嵌套写法。
例如，
下面的写法在
XHTML
中是
错误的。
1.
<ul>
2.
<li>
咖啡
</li>
3.
<li>
茶
4.
<ul>
5.
<li>
红茶
</li>
6.
<li>
绿茶
</li>
7.
</ul>
8.
<li>
牛奶
</li>
9.
</ul>
正确的写法是：
1.
<ul>
2.
<li>
咖啡
</li>
3.
<li>
茶
4.
<ul>
5.
<li>
红茶
</li>
6.
<li>
绿茶
</li>
7.
</ul>
8.
</li>
9.
<li>
牛奶
</li>
10.
</ul>
4.
在
XHTML
中标记必须封闭
在
HTML
规范中，下列代码是正确的。
1.
<p>
网页学习网
2.
<p>WANGYEXX.COM
上述代码中，第
2
个
<p>
标记就意味着前一个
<p>
标记的结束，但是在
XHTML
中，
这是不允许的，二必须严格地使标记已封闭，正确写法如下所示。
1.
<p>
网页学习网
</p>
2.
<p>WANGYEXX.COM</p>
5.
在
XHTML
中，即使是空元素的标记也必须封闭
这里说的空元素的标记，就是指那些
<img>
，
<br>
等不成对的标记，它们也必须
封闭，例如下面的写法是错误的。
1.
换行
<br>
2.
水平线
<hr>
3.
图像
<img src="happy.gif" alt="
知识：
W3C
组织就是
World Wide Web Consortium
（全秋万维网联盟）的简称。
W3C
组织创建于
l994
年．研究
Web
规范和指导方针，致力于推动
Web
发展，保
证各种
Web
技术能很
好地协同工作。
W3C
的主要职责是确定来来万维网的发展
方向，并且制定相关的建议（
Recommendation
．由
W3C
是一个民间组织，没有约
束性，
因此只提供建议）。
HTML 4.01
规范建议（
HTML 4.01 Specification Recommendation
）就是由
W3CF
制定的。它还负制
CSS
、
XML
、
XHTML
和
MathML
等其他网络语言规范。
二、
DOCTYPE
（文档类型）的含义与选择
从
Dreamweaver
MX
2004
版开始，
在使用
Dreamweaver
新建一个网页文档的时候，
默认情况下生成的基本网页代码是这样的：
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"
2.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.
<html xmlns="http://www.w3.org/1999/xhtml">
4.
<head>
5.
<meta http-equiv="Content-Type" content="text/html; charset=u
tf-8" />
6.
<title>
无标题文档
</title>
7.
</head>
8.
9.
<body>
10.
</body>
11.
</html>
可以看到最上面有两行关于“DOCTYPE”（文档类型）的声明，它就是告诉浏览
器，使用哪种规范来解释这个文档中的代码。
设计师可以在新建文档的时候选择使用哪种文档类型。
在
Dreamweaver
的新建文
档对话框中，在右下方有—个文档类型下拉框，如图
1
所示。
图
1
在
Dreamweaver
中选择文档类型
对于
HTML
4.01
和
XHTML 1.0
分别对应于一种严格（
Strict
）类型和一种过渡
（
Transitional
）
类型。
过渡类型兼容以前版本定义的，
而在新版本已经废弃的
标记和属性。严格类型则不兼容已经废弃的标记和属性。
注意：
目前，建议读者使用
XHTML 1.O transitional
（
XHTML 1.0
过渡类型），
这样设计师可以按照
XHTML
的标准书写符合
Web
标准的网页代码。
司时在一些特
蛛情况下还可以使用传统的做法。
三、
XHTML
与
HTML
的重要区别
尽管目前浏览器都兼容
HTML
．但是为了使网页能够符合标准，设计师应该尽量
使用
XHTML
规范来编写代码，需要注意以下事项。
1.
在
XHTML
中标记名称必须小写
在
HTML
中，
标记名称可以大写或者小写。
例如，
下面的代码在
HTML
中是正确的。
1.
<BODY>
2.
<P>
网页学习网
(WANGYEXX.COM)</P>
3.
</BODY>
但是在
XHTML
中，则必须写为：
1.
<body>
2.
<p>
网页学习网
(WANGYEXX.COM)</p>
3.
</body>
2.
在
XHTML
中属性名称必须小写
HTML
属性的名称也必须是小写的。例如，在
XHTML
中下面的代码的写法是错误
的。
1.
<IMG SRC="p_w_picpath.gif" WIDTH="200" HEIGHT="100" BORDER="0">
正确的写法应该是：
1.
<img src="p_w_picpath.gif" width="200" height="100" border="0">
3.
在
XHTML
中标记必须严格嵌套
HTML
中对标记的嵌套没有严格的规定。例如，下面的代码在
HTML
中是正确的。
1.
<b><i>
这行文字以粗体倾斜显示
</b></i>
然而在
XHTML
中，必须改为：
1.
<b><i>
这行文字以粗体倾斜显示
</i></b>
此外，
经常被忽略的是对列表标记的嵌套写法。
例如，
下面的写法在
XHTML
中是
错误的。
1.
<ul>
2.
<li>
咖啡
</li>
3.
<li>
茶
4.
<ul>
5.
<li>
红茶
</li>
6.
<li>
绿茶
</li>
7.
</ul>
8.
<li>
牛奶
</li>
9.
</ul>
正确的写法是：
1.
<ul>
2.
<li>
咖啡
</li>
3.
<li>
茶
4.
<ul>
5.
<li>
红茶
</li>
6.
<li>
绿茶
</li>
7.
</ul>
8.
</li>
9.
<li>
牛奶
</li>
10.
</ul>
4.
在
XHTML
中标记必须封闭
在
HTML
规范中，下列代码是正确的。
1.
<p>
网页学习网
2.
<p>WANGYEXX.COM
上述代码中，第
2
个
<p>
标记就意味着前一个
<p>
标记的结束，但是在
XHTML
中，
这是不允许的，二必须严格地使标记已封闭，正确写法如下所示。
1.
<p>
网页学习网
</p>
2.
<p>WANGYEXX.COM</p>
5.
在
XHTML
中，即使是空元素的标记也必须封闭
这里说的空元素的标记，就是指那些
<img>
，
<br>
等不成对的标记，它们也必须
封闭，例如下面的写法是错误的。
1.
换行
<br>
2.
水平线
<hr>
3.
图像
<img src="happy.gif" alt="
欢迎笑脸
">
">
正确的写法应该是：
1.
换行
<br />
2.
水平线
<hr />
3.
图像
<img src="happy.gif" alt="
欢迎笑脸
" />
6.
在
XHTML
中属性值用双引号括起来
在
HTML
中，属性可以不必使用双引号，例如：
1.
<p class=subTitle>
而在
XHTML
中，必须严格写作：
1.
<p class="subTitle">
7.
在
XHTML
中属性值必须使用完×××式
在
HTML
中，一些属性经常使用简写方式设定属性值，例如：
WANGYEXX.COM
1.
<input disabled>
而在
XHTML
中，必须完整地写作：
1.
<input disabled = "true">
8.
在
XHTML
中，应该区分“内容标记”与¨结构标记”
例如
<p>
标记是一个内容标记，
而
<table>
标记是结构标记，
因此不允许将
<tabIe>
标记置于
<p>
内部。而如果将
<p>
标记置于
<td></td>
之间，则是完全正确的。
有时这种错误不容易被注意到，
在
Dreamweaver
中也得不到提示。
但是在微软公
司新推出的网页制作软件
Expression Web
中。则会给出明确的提示，如图
2
所
示。
图
2
在
Expression Web
中提示错误
在
<table>
标记的下方出现红色波浪线，表示存在错误。将鼠标指针移动到
<table>
标记上，则会出现提示文字“在
XHTML 1.0 Transitional
中，标记
<p>
不能包含标记<table>”。有兴趣的读者可以尝试一下这个新的网页设计软件。
