1.1 HTML与XHTML

、

、

、
1. 、
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=utf-8" /> 
6. title>无标题文档title> 
7. head> 
8.  
9. body> 
10. body> 
11. html> 

可以看到最上面有两行关于“DOCTYPE”（文档类型）的声明，它就是告诉浏览器，使用哪种规范来解释这个文档中的代码。

设计师可以在新建文档的时候选择使用哪种文档类型。在Dreamweaver的新建文档对话框中，在右下方有—个文档类型下拉框，如图1所示。

对于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>网页学习网(lodidance.com)P> 
3. BODY> 

但是在XHTML中，则必须写为：

1. body> 
2.      p>网页学习网(lodidance.com)p>   
3. body>  

2.在XHTML中属性名称必须小写

HTML属性的名称也必须是小写的。例如，在XHTML中下面的代码的写法是错误的。

1. IMG SRC="image.gif" WIDTH="200" HEIGHT="100" BORDER="0"> 

正确的写法应该是：

1. img src="image.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>lodidance.com 

上述代码中，第2个

标记就意味着前一个

标记的结束，但是在XHTML中，这是不允许的，二必须严格地使标记已封闭，正确写法如下所示。

1. p>网页学习网p> 
2. p>lodidance.comp> 

5.在XHTML中，即使是空元素的标记也必须封闭

这里说的空元素的标记，就是指那些，
等不成对的标记，它们也必须封闭，例如下面的写法是错误的。

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中，一些属性经常使用简写方式设定属性值，例如：lodidance.com

1. input disabled> 

而在XHTML中，必须完整地写作：

1. input disabled = "true">  

8.在XHTML中，应该区分“内容标记”与¨结构标记”

例如

标记是一个内容标记，而

标记是结构标记，因此不允许将标记置于

内部。而如果将

标记置于

之间，则是完全正确的。

有时这种错误不容易被注意到，在Dreamweaver中也得不到提示。但是在微软公司新推出的网页制作软件Expression Web中。则会给出明确的提示，如图2所示。

在

标记的下方出现红色波浪线，表示存在错误。将鼠标指针移动到标记上，则会出现提示文字“在XHTML 1.0 Transitional中，标记

不能包含标记

”。有兴趣的读者可以尝试一下这个新的网页设计软件。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表