何為XHTML??

更新時(shí)間：2007年01月08日 00:00:00 作者：

前言：
　　現(xiàn)在都講究標(biāo)準(zhǔn)建站，而標(biāo)準(zhǔn)建站使用的技術(shù)主要是XHTML+CSS，而現(xiàn)在我們普遍使用的是HTML代碼，那么我該如何轉(zhuǎn)換呢？以及HTML和XHTML有什么不同呢？在這個(gè)教程里，你將學(xué)到HTML和XHTML之間的不同，以及如何將HTML轉(zhuǎn)換為XHTML。畢竟XHTML是發(fā)展的方向，所以我覺(jué)得該教程有必要在本站上發(fā)布。我感覺(jué)要是你想使用標(biāo)準(zhǔn)還是最好先學(xué)HTML，因?yàn)楸容^簡(jiǎn)單，然后再來(lái)看該教程。同時(shí)這也是我曾發(fā)表過(guò)的WEB標(biāo)準(zhǔn) XHTML&CSS的延續(xù)。

　　XHTML介紹：
　　XHTML是 EXtensible HyperText Markup Language(可擴(kuò)展超文本標(biāo)記語(yǔ)言) 的英文縮寫，而HTML則是 HyperText Markup Language(超文本標(biāo)記語(yǔ)言) ，這是名字的不同。其實(shí)我們說(shuō)得標(biāo)準(zhǔn)應(yīng)該是XML，那為什么要學(xué)習(xí)XHTML呢？因?yàn)楝F(xiàn)在的HTML代碼煩瑣，危機(jī)四伏，但是XML使用環(huán)境還不成熟，所以推出了一個(gè)過(guò)度的產(chǎn)品就是XHTML，它起著呈上起下的作用。也有人認(rèn)為XHTML是HTML的一個(gè)升級(jí)版本，其實(shí)也是正確的，我的理解是XHTML把HTML做得更加規(guī)范的一個(gè)標(biāo)記語(yǔ)言，使HTML變得功能強(qiáng)大，減少了代碼的煩瑣尤其是表格。
　　XHTML是在2000年1月26日被國(guó)際標(biāo)準(zhǔn)組織機(jī)構(gòu)W3C(World Wide web Consortium)定為一個(gè)標(biāo)準(zhǔn)的，認(rèn)為是HTML的一個(gè)最新版本，并且將逐漸替換HTML。現(xiàn)在所有的瀏覽器都支持XHTML，XHTML兼容 HTML 4.0。也有人認(rèn)為XHTML就是HTML4.01。如果你在學(xué)習(xí)過(guò)程中自己編寫了一個(gè)符合標(biāo)準(zhǔn)的站，你可以通過(guò)W3C的驗(yàn)證，驗(yàn)證通過(guò)后你將會(huì)得到一個(gè)標(biāo)志，通常是XHTML1.0認(rèn)證和CSS驗(yàn)證。我也不清楚目前國(guó)內(nèi)有多少個(gè)網(wǎng)站同時(shí)通過(guò)了這兩個(gè)驗(yàn)證。大家可以去http://www.w3.org/這個(gè)站點(diǎn)去驗(yàn)證你的站，如果符合那兩個(gè)規(guī)則則會(huì)分別給我們兩段代碼加到你的網(wǎng)頁(yè)上向別人展示說(shuō)明你采用了標(biāo)準(zhǔn)建站啊，牛??！

　　為什么我們使用XHTML
　　XHTML是HTML升級(jí)為XML的過(guò)度產(chǎn)品，被定為一個(gè)標(biāo)準(zhǔn)，XHTML完全兼容HTML4.01，并且具有XML的語(yǔ)法。下面我們來(lái)看一個(gè)含有錯(cuò)誤代碼的HTML，如下：
<html>
　　<head>
　　<title>This is bad HTML</title>
　　<body>
　　<h1>Bad HTML
　　</body>
　　雖然含有錯(cuò)誤代碼，但是當(dāng)我們?cè)跒g覽器中瀏覽時(shí)還能正常顯示。XML是一個(gè)標(biāo)記語(yǔ)言，但是它要求在網(wǎng)頁(yè)中出現(xiàn)的任何元素都應(yīng)該被標(biāo)記出來(lái)，XML是用來(lái)描述網(wǎng)頁(yè)中的數(shù)據(jù)的，而HTML用來(lái)顯示網(wǎng)頁(yè)中的元素的。目前我們上網(wǎng)使用的各種瀏覽器技術(shù)，包括手提電腦、手機(jī)上網(wǎng)瀏覽等等，都要求瀏覽的一些內(nèi)容都要被正確標(biāo)記，如果有錯(cuò)誤的標(biāo)記可能會(huì)使顯示特別混亂、甚至不能正常顯示。
　　因此聯(lián)合 HTML 和XML , 還有其他的一些技術(shù)，我們得到了一種現(xiàn)在有用的而且在將來(lái)也有用的語(yǔ)言 - XHTML。
　　當(dāng)在將來(lái)都規(guī)范的時(shí)候我們就要用的 XHTML 正確格式的標(biāo)記了,使所有的瀏覽器都能正確的執(zhí)行，所以我們現(xiàn)在有必要開(kāi)始學(xué)習(xí)XHTML了。

　　XHTML和HTML之間的區(qū)別：
　　XHTML是一項(xiàng)新技術(shù)，在瀏覽器和一些其他的軟件都支持它之前，我們應(yīng)該有必要熟悉一下這項(xiàng)技術(shù)。為了我們更好的學(xué)習(xí)XHTML之前我們應(yīng)該熟悉一下HTML4.0，我們可以去下載一個(gè)參考手冊(cè)來(lái)熟悉一下。以便于我們學(xué)起XHTML來(lái)更簡(jiǎn)單，換句話說(shuō)我們現(xiàn)在使用HTML編寫代碼時(shí)應(yīng)該盡力少寫錯(cuò)誤代碼，如：都要使用小寫的字符來(lái)編寫HTML，每個(gè)標(biāo)記之后都要加上標(biāo)記的結(jié)束如：<p>網(wǎng)頁(yè)教學(xué)網(wǎng)歡迎您的光臨</p> 結(jié)束一定要有，我們要保持這種規(guī)則。
　　它們之間最大的區(qū)別在于：
　　1.XHTML 元素一定要被正確的嵌套使用。
　　在HTML里一些元素可以不正確嵌套也能正常顯示，如：
　　<b><i>This text is bold and italic</b></i>
　　而在XHTML必須要正確嵌套之后才能正常使用，如：
　　<b><i>This text is bold and italic</i></b>
　　注意：這個(gè)錯(cuò)誤通常發(fā)生在當(dāng)嵌套多層之后的標(biāo)簽里面。如：
　　<ul>
　　　<li>Coffee</li>
　　　<li>Tea
　　　<ul>
　　　　<li>Black tea</li>
　　　　<li>Green tea</li>
　　　</ul>
　　　<li>Milk</li>
　　</ul>
　　正確的應(yīng)該是：
　　<ul>
　　　<li>Coffee</li>
　　　<li>Tea
　　　<ul>
　　　　<li>Black tea</li>
　　　　<li>Green tea</li>
　　　</ul>
　　　</li>
　　　<li>Milk</li>
　　</ul>
　　觀察上述的兩段代碼我們可以看到正確的里面我們?cè)?nbsp;</ul>之后插入 </li> 標(biāo)簽。
　　XHTML 文件一定要有正確的組織格式。
　　所有的XHTML應(yīng)該正確的被嵌套在以<html>開(kāi)始以</html>結(jié)束的元素里面，其他的元素可以有子元素，并且子元素也要被正確的嵌套在他們的父元素內(nèi)。如：
<html>
　　<head> ... </head>
　　<body> ... </body>
　　</html>
　　標(biāo)簽名字一定要用小寫字母。
　　因?yàn)?nbsp;XHTML文檔是XML應(yīng)用程序， XML 對(duì)大小寫是敏感的。象 <br> 和 <BR> 是兩個(gè)不同的標(biāo)記。如錯(cuò)誤代碼：
　　<BODY>
　　<P>This is a paragraph</P>
　　</BODY>
　　正確格式為：
　　<body>
　　<p>This is a paragraph</p>
　　</body>
　　所有的 XHTML 元素一定要關(guān)閉
　　不能有沒(méi)有關(guān)閉的空的元素存在我們的代碼中，其實(shí)對(duì)于這點(diǎn)我們是比較好結(jié)束的，有開(kāi)始就應(yīng)該有結(jié)束嗎？例如錯(cuò)誤代碼：
　　<p>This is a paragraph
　　<p>This is another paragraph
　　正確的為：
　　<p>This is a paragraph</p>
　　<p>This is another paragraph</p>
　　獨(dú)立的一個(gè)標(biāo)簽我們也要結(jié)束用 />來(lái)結(jié)束。
　　例如：錯(cuò)誤代碼
　　This is a break<br>
　　Here comes a horizontal rule:<hr>
　　Here's an image <img src="happy.gif" alt="Happy face">
　　正確代碼：
　　This is a break<br />
　　Here comes a horizontal rule:<hr />
　　Here's an image <img src="happy.gif" alt="Happy face" />
　　通過(guò)上面的幾個(gè)例子我們基本上看出了HTML和XHTML之間的不同，那么我們應(yīng)該從現(xiàn)在起應(yīng)該試著改變我們現(xiàn)在的HTML，例如都使用小寫的標(biāo)記、在標(biāo)記之后加上結(jié)束標(biāo)記的符號(hào) />。

　　XHTML 的語(yǔ)法
　　簡(jiǎn)單的說(shuō)寫 XHTML 要用干凈的 HTML 語(yǔ)法。
　　XHTML的一些其他語(yǔ)法要求：
　　屬性名字必須小寫。如：
　　錯(cuò)誤代碼：
　　<table WIDTH="100%">
　　正確的代碼：
　　<table width="100%">
　　屬性值必須要被引用。如：
　　錯(cuò)誤的代碼：
　　<table width=100%>
　　正確的代碼：
　　<table width="100%">
　　屬性的縮寫被禁止。如：
　　錯(cuò)誤的代碼：
　　<dl compact>
　　<input checked>
　　<input readonly>
　　<input disabled>
　　<option selected>
　　<frame noresize>
　　正確的代碼：
　　<dl compact="compact">
　　<input checked="checked" />
　　<input readonly="readonly" />
　　<input disabled="disabled" />
　　<option selected="selected" />
　　<frame noresize="noresize" />
　　列出一個(gè)表讓大家知道：
　　HTML　　　　　　　　　　XHTML
　　compact　　　　　　　compact="compact"
　　checked　　　　　　　checked="checked"
　　declare　　　　　　　declare="declare"
　　readonly　　　　　　 readonly="readonly"
　　disabled　　　　　　　disabled="disabled"
　　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定義了一個(gè)name屬性.在 XHTML 里name屬性是不能被使用的，應(yīng)該用id 來(lái)替換它。如：
　　錯(cuò)誤代碼：
　　<img src="picture.gif" name="picture1" />
正確的代碼：
　　<img src="picture.gif" id="picture1" />
　　注意：我們?yōu)榱耸古f瀏覽器也能正常的執(zhí)行該內(nèi)容我們也可以在標(biāo)簽中同時(shí)使用id和name屬性。如：
　　<img src="picture.gif" id="picture1" name="picture1" />
　　為了適應(yīng)新的瀏覽器瀏覽我們?cè)谏鲜龃a中的最后我加了/來(lái)結(jié)束標(biāo)簽。

XHTML DTD定義文檔的類型?！　?BR>在XHTML中我們必須聲明文檔的類型，以便于瀏覽器知道你的文檔是什么類型的，而且聲明部分要加在文檔的head之前。如：
　　<!DOCTYPE Doctype goes here>
　　<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　<title>Title goes here</title>
　　</head><body>
　　Body text goes here
　　</body></html>
　　注:DOCTYPE聲明不是 XHTML 文檔的一部分，它也不是文檔的一個(gè)元素，所以我們沒(méi)必要加上結(jié)束標(biāo)簽。
　　注:XHTML屬性都是在<html>標(biāo)簽里面。然而當(dāng)我們?cè)趙3.org驗(yàn)證時(shí)，并不解釋我們的文檔有沒(méi)有聲明類型。這是因?yàn)?xmlns=http://www.w3.org/1999/xhtml"是一個(gè)固定的值，如果你沒(méi)聲明的話，它也會(huì)被自動(dòng)的加到<html>標(biāo)簽前。
　　我們使用DOCTYPE時(shí)的基本機(jī)構(gòu)：
　　<!DOCTYPE ...>
　　<html>
　　<head>
　　<title>... </title>
　　</head>
　　<body> ... </body>
　　</html>
　　DOCTYPE是document type(文檔類型)的簡(jiǎn)寫，用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。
　　其中的DTD(例如xhtml1-transitional.dtd)叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的DTD來(lái)解釋你頁(yè)面的標(biāo)識(shí)，并展現(xiàn)出來(lái)。
　　要建立符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；除非你的XHTML確定了一個(gè)正確的DOCTYPE，否則你的標(biāo)識(shí)和CSS都不會(huì)生效。

　　XHTML 1.0 提供了三種DTD聲明可供選擇：

　　過(guò)渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
　　框架的(Frameset):專門針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD，如果你的頁(yè)面中包含有框架，需要采用這種DTD。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　如何轉(zhuǎn)換現(xiàn)有的結(jié)構(gòu)為XHTML　　
我們選擇什么樣的DOCTYPE？理想情況當(dāng)然是嚴(yán)格的DTD，但對(duì)于我們大多數(shù)剛接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來(lái)說(shuō)，過(guò)渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過(guò)渡型DTD)。因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通過(guò)W3C的代碼校驗(yàn)。
　　我們從現(xiàn)在的HTML轉(zhuǎn)換為XHTML注意以下幾點(diǎn)：
　一、在每個(gè)頁(yè)面的首部都加上文檔類型的說(shuō)明。如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">當(dāng)然可以選擇其他類型的。
　　二、標(biāo)記和name 要都用小寫?！　?BR>三、所有的屬性值都要用引號(hào)引起來(lái)。
　四、單獨(dú)的標(biāo)簽，如: <hr> , <br> and <img>，都要在后面加/來(lái)結(jié)束。
在這里不建議使用諸如：<img>和</img>形式的方式，直接在其后面加/就可以了，如<br />。
　　五、通過(guò)W3C 驗(yàn)證。進(jìn)入W3C DTD 的官方網(wǎng)站:http://validator.w3.org/check/referer，驗(yàn)證時(shí)會(huì)顯示錯(cuò)誤。也可以用官方網(wǎng)站提供的工具tidy來(lái)實(shí)現(xiàn)轉(zhuǎn)換：http://www.w3.org/People/Raggett/tidy/

　　XHTML的模塊化
為什么要模塊化設(shè)計(jì)XHTML呢？XHTML雖然簡(jiǎn)單，但是它的內(nèi)容很多，包括了一個(gè)網(wǎng)絡(luò)設(shè)計(jì)師需要的絕大多數(shù)功能。XHTML一方面內(nèi)容繁多復(fù)雜，但是從另一個(gè)角度來(lái)看它卻是非常簡(jiǎn)單的。為了將XHTML分割成小的模塊，W3C已經(jīng)建立起了小型的已經(jīng)定義好了的一系列XHTML元素，他們獨(dú)立的能被與其他XML標(biāo)準(zhǔn)合并成的大型的更復(fù)雜的程序的簡(jiǎn)單設(shè)備所使用。

　　通過(guò)XHTML模型，程序設(shè)計(jì)師能夠做如下的事情：

　　1.選擇那些能夠被使用XHTML構(gòu)建塊標(biāo)準(zhǔn)的設(shè)備所支持的元素。
　　2.在遵循XHTML標(biāo)準(zhǔn)的同時(shí)使用XML可以對(duì)XHTML擴(kuò)展。
　　3.簡(jiǎn)單化的XHTML可以應(yīng)用于像掌上電腦、移動(dòng)電話、電視和家用電器等設(shè)備。
　　4.通過(guò)加入心的XML功能（像聲音、多媒體的）將XHTML延續(xù)到復(fù)雜程序的設(shè)計(jì)上。
　　5.像XHTML基本（XHTML對(duì)于移動(dòng)設(shè)備的一個(gè)子集）那樣來(lái)定義XHTML的輪廓。