1.1 HTML与XHTML

<html>、<head>、<title>、<body>、<p>、<img>、<a>、<div>、

<ul>、<ol>、<li>、<style>、<table>、<tr>、<td>、<form>、<input>、<br>、<hr>。

如果读者还不清楚上面这些标记的含义，请先跟随网页学习网《HTML教程入门经典》，学习一下最基础的知识，然后再开始学习本教程。

此外，本教程将不再占用篇幅抽象地讲解使用css布局所具有的优势，相信大部分读者对此已经有所了解。如果对这个问题感兴趣。可访问http://www.lodidance.com/html/jc/552.html，清晰地阐速了从传统布局方式到css布局的采龙去脉，并给出比较深入的分析。

本章将就一些在工作中，会遇到的实际问题进行讲解，作为学习css设计的必备基础。

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是形成标准以后的第一个正式规范。lodidance.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=utf-8" />
6. <title>无标题文档</title>
7. </head>
8. <body>
9. </body>
10. </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>网页学习网(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个<p>标记就意味着前一个<p>标记的结束，但是在XHTML中，这是不允许的，二必须严格地使标记已封闭，正确写法如下所示。

1. <p>网页学习网</p>
2. <p>lodidance.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中，一些属性经常使用简写方式设定属性值，例如：lodidance.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>”。有兴趣的读者可以尝试一下这个新的网页设计软件。

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