前言:
現在都講究標準建站,而標準建站使用的技術主要是XHTML+CSS,而現在我們普遍使用的是HTML代碼,那麼我該如何轉換呢?以及HTML和XHTML有什麼不同呢?在這個教程裡,你將學到HTML和XHTML之間的不同,以及如何將HTML轉換為XHTML。畢竟XHTML是發展的方向,所以我覺得該教程有必要在本站上發布。我感覺要是你想使用標準還是最好先學HTML,因為比較簡單,然後再來看該教程。同時這也是我曾發表過的WEB標準 XHTML&CSS的延續。
XHTML介紹:
XHTML是 EXtensible HyperText Markup Language(可擴充超文字標記語言 (HTML)) 的英文縮寫,而HTML則是 HyperText Markup Language(超文字標記語言 (HTML)) ,這是名字的不同。其實我們說得標準應該是XML,那為什麼要學習XHTML呢?因為現在的HTML代碼煩瑣,危機四伏,但是XML使用環境還不成熟,所以推出了一個過度的產品就是XHTML,它起著呈上起下的作用。也有人認為XHTML是HTML的一個升級版本,其實也是正確的,我的理解是XHTML把HTML做得更加規範的一個標記語言,使HTML變得功能強大,減少了代碼的煩瑣尤其是表格。
XHTML是在2000年1月26日被國際標準組織機構W3C(World Wide web Consortium)定為一個標準的,認為是HTML的一個最新版本,並且將逐漸替換HTML。現在所有的瀏覽器都支援XHTML,XHTML相容 HTML 4.0。也有人認為XHTML就是HTML4.01。如果你在學習過程中自己編寫了一個符合標準的站,你可以通過W3C的驗證,驗證通過後你將會得到一個標誌,通常是XHTML1.0認證和CSS驗證。我也不清楚目前國內有多少個網站同時通過了這兩個驗證。大家可以去http://www.w3.org/這個網站去驗證你的站,如果符合那兩個規則則會分別給我們兩段代碼加到你的網頁上向別人展示說明你採用了標準建站啊,牛啊!
為什麼我們使用XHTML
XHTML是HTML升級為XML的過度產品,被定為一個標準,XHTML完全相容HTML4.01,並且具有XML的文法。下面我們來看一個含有錯誤碼的HTML,如下:
This is bad HTML
Bad HTML
雖然含有錯誤碼,但是當我們在瀏覽器中瀏覽時還能正常顯示。XML是一個標記語言,但是它要求在網頁中出現的任何元素都應該被標記出來,XML是用來描述網頁中的資料的,而HTML用來顯示網頁中的元素的。目前我們上網使用的各種瀏覽器技術,包括手提電腦、手機上網瀏覽等等,都要求瀏覽的一些內容都要被正確標記,如果有錯誤的標記可能會使顯示特別混亂、甚至不能正常顯示。
因此聯合 HTML 和XML , 還有其他的一些技術,我們得到了一種現在有用的而且在將來也有用的語言 - XHTML。
當在將來都規範的時候我們就要用的 XHTML 正確格式的標記了,使所有的瀏覽器都能正確的執行,所以我們現在有必要開始學習XHTML了。
XHTML和HTML之間的區別:
XHTML是一項新技術,在瀏覽器和一些其他的軟體都支援它之前,我們應該有必要熟悉一下這項技術。為了我們更好的學習XHTML之前我們應該熟悉一下HTML4.0,我們可以去下載一個參考手冊來熟悉一下。以便於我們學起XHTML來更簡單,換句話說我們現在使用HTML編寫代碼時應該儘力少寫錯誤碼,如:都要使用小寫字元來編寫HTML,每個標記之後都要加上標記的結束如:
網頁教學網歡迎您的光臨
結束一定要有,我們要保持這種規則。
它們之間最大的區別在於:
1.XHTML 元素一定要被正確的嵌套使用。
在HTML裡一些元素可以不正確嵌套也能正常顯示,如:
This text is bold and italic 而在XHTML必須要正確嵌套之後才能正常使用,如:
This text is bold and italic 注意:這個錯誤通常發生在當嵌套多層之後的標籤裡面。如:
正確的應該是:
觀察上述的兩段代碼我們可以看到正確的裡面我們在 之後插入 標籤。
XHTML 檔案一定要有正確的組織格式。
所有的XHTML應該正確的被嵌套在以開始以結束的元素裡面,其他的元素可以有子項目,並且子項目也要被正確的嵌套在他們的父元素內。如:
...
...
標籤名字一定要用小寫字母。
因為 XHTML文檔是XML應用程式, XML 對大小寫是敏感的。象
和
是兩個不同的標記。如錯誤碼:
This is a paragraph
正確格式為:
This is a paragraph
所有的 XHTML 元素一定要關閉
不能有沒有關閉的空的元素存在我們的代碼中,其實對於這點我們是比較好結束的,有開始就應該有結束嗎?例如錯誤碼:
This is a paragraph
This is another paragraph
正確的為:
This is a paragraph
This is another paragraph
獨立的一個標籤我們也要結束用 />來結束。
例如:錯誤碼
This is a break
Here comes a horizontal rule:
Here's an image
正確代碼:
This is a break
Here comes a horizontal rule:
Here's an image
通過上面的幾個例子我們基本上看出了HTML和XHTML之間的不同,那麼我們應該從現在起應該試著改變我們現在的HTML,例如都使用小寫標記、在標記之後加上結束標記的符號 />。
XHTML 的文法
簡單的說寫 XHTML 要用乾淨的 HTML 文法。
XHTML的一些其他文法要求:
屬性名稱字必須小寫。如:
錯誤碼:
正確的代碼:
列出一個表讓大家知道:
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定義了一個name屬性.在 XHTML 裡name屬性是不能被使用的,應該用id 來替換它。如:
錯誤碼:
正確的代碼:
注意:我們為了使舊瀏覽器也能正常的執行該內容我們也可以在標籤中同時使用id和name屬性。如:
為了適應新的瀏覽器瀏覽我們在上述代碼中的最後我加了/來結束標籤。
XHTML DTD定義文檔的類型。
在XHTML中我們必須聲明文檔的類型,以便於瀏覽器知道你的文檔是什麼類型的,而且聲明部分要加在文檔的head之前。如:
Title goes here
Body text goes here
注:DOCTYPE聲明不是 XHTML 文檔的一部分,它也不是文檔的一個元素,所以我們沒必要加上結束標籤。
注:XHTML 屬性都是在標籤裡面。然而當我們在w3.org驗證時,並不解釋我們的文檔有沒有宣告類型。這是因為"xmlns=http://www.w3.org/1999/xhtml"是一個固定的值,如果你沒聲明的話,它也會被自動的加到標籤前。
我們使用DOCTYPE時的基本機構:
...
...
DOCTYPE是document type(文件類型)的簡寫,用來說明你用的XHTML或者HTML是什麼版本。
其中的DTD(例如xhtml1-transitional.dtd)叫文件類型定義,裡麵包含了文檔的規則,瀏覽器就根據你定義的DTD來解釋你頁面的標識,並展現出來。
要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效。
XHTML 1.0 提供了三種DTD聲明可供選擇:
過渡的(Transitional):要求非常寬鬆的DTD,它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下:
嚴格的(Strict):要求嚴格的DTD,你不能使用任何錶現層的標識和屬性,完整代碼如下:
架構的(Frameset):專門針對架構頁面設計使用的DTD,如果你的頁面中包含有架構,需要採用這種DTD。完整代碼如下:
如何轉換現有的結構為XHTML
我們選擇什麼樣的DOCTYPE?理想情況當然是嚴格的DTD,但對於我們大多數剛接觸web標準的設計師來說,過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站,使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性,也比較容易通過W3C的代碼校正。
我們從現在的HTML轉換為XHTML注意以下幾點:
一、在每個頁面的首部都加上文件類型的說明。如:
當然可以選擇其他類型的。
二、標記和name 要都用小寫。
三、所有的屬性值都要用引號引起來。
四、單獨的標籤,如: ,
and ,都要在後面加/來結束。
在這裡不建議使用諸如:和形式的方式,直接在其後面加/就可以了,如
。
五、通過W3C 驗證。進入W3C DTD 的官方網站:http://validator.w3.org/check/referer,驗證時會顯示錯誤。也可以用官方網站提供的工具tidy來實現轉換:http://www.w3.org/People/Raggett/tidy/
XHTML的模組化
為什麼要模組化設計XHTML呢?XHTML雖然簡單,但是它的內容很多,包括了一個網路設計師需要的絕大多數功能。XHTML一方面內容繁多複雜,但是從另一個角度來看它卻是非常簡單的。為了將XHTML分割成小的模組,W3C已經建立起了小型的已經定義好了的一系列XHTML元素,他們獨立的能被與其他XML標準合并成的大型的更複雜的程式的簡單裝置所使用。
通過XHTML模型,程式設計師能夠做如下的事情:
1.選擇那些能夠被使用XHTML構建塊標準的裝置所支援的元素。
2.在遵循XHTML標準的同時使用XML可以對XHTML擴充。
3.簡單化的XHTML可以應用於像掌上型電腦、行動電話、電視和家用電器等裝置。
4.通過加入心的XML功能(像聲音、多媒體的)將XHTML延續到複雜程式的設計上。
5.像XHTML基本(XHTML對於行動裝置的一個子集)那樣來定義XHTML的輪廓。
*表示不贊成應用到XHTML中