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="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>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="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>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>”。有興趣的讀者可以嘗試一下這個新的網頁設計軟件。