打造W3C XHTML 1.0標準的網站

XHTML1.0是HTML4.0的重新組織,
算是HTML4.01的修正版,發行命名為XHTML1.0
XHTML1.0要求比較嚴格,跟HTML4.01有些差別,以XHTML1.0標準下列1-4項是絕對必要的也是不同於HTML4.01的地方
網頁製作使用Dreamweaver MX 2004,可以在
「編輯」-「偏好設定」-「新文件」-「將文件設為XHTML相容」
然後新增HTML,就可以開始製作XHTML的網頁,
以下我列出幾點比較常見會發生的錯誤供參考:

1.所有標籤元素名稱都使用小寫
錯誤 [HTML] [TITLE] [HEAD] [BODY]
正確 [html] [title] [head] [body]
錯誤 [IMG SRC="BG.GIF" BORDER="0" ALT="說明文字"]
正確 [img src="bg.gif" border="0" alt="說明文字" /]
錯誤 [UL][LI][/LI][/UL]
正確 [ul][li][/li][/ul]
以上只是舉例,是"所有"標籤元素名稱都必須是小寫

2.XHTML 1.0要求所有的標籤必須關閉
所有沒有成對的空標籤必須以 /]結尾
[p][/p]和[a href="home.html"][/a]這就是成對
錯誤 [br] [hr]
正確 [br /] [hr /]
錯誤 [input type="text" name="name"]
正確 [input type="text" name="name" /]
錯誤 [meta ...]
正確 [meta ... /]
錯誤 [link rel="stylesheet" type="text/css" href="style.css"]
正確 [link rel="stylesheet" type="text/css" href="style.css" /]
錯誤 [img src="bg.gif" border="0" alt="說明文字"]
正確 [img src="bg।gif" border="0" alt="說明文字" /]

3.不允許使用target="_blank"
在HTML4.01可以使用target="_blank",
但XHTML1.0是不被允許的,你可以改寫為 target="new"
不過最好的方式還是以js來做調用(解決_blank開新視窗不符合標準)

4.所有屬性都必須有值
XHTML1.0規定所有屬性都必須有值,若沒有就必須重複屬性作為值
錯誤 [input type="radio" value="v1" checked name="s1" /]
正確 [input type="radio" value="v1" checked="checked" name="s1" /]
錯誤 [option selected]S1[/option]
正確 [option selected="selected"]S1[/option]
錯誤 [td nowrap]
正確 [td nowrap="nowrap"]

5.非標籤一部分的符號以編碼表示
表單內包含以下符號也必須用編碼表示
[ 以 < 表示
] 以 > 表示
& 以 & 表示
程式中的連結 & 也要改用 &
錯誤 [a href="foo.cgi?chapter=1&section=2"]
正確 [a href="foo।cgi?chapter=1&section=2"]

6.使用表格常犯的錯誤
我們在做表格通常會指定寬與高,例如:
[table border="1" width="300" height="55"]
[tr][td] 內容 [/td][/tr]
[/table]
這樣做是沒有辦法通過,W3C建議使用CSS來控制標籤元素的高度
.table{
height:55px;
}
[table class="table"]
[tr][td] TEXT [/td][/tr]
[/table]
但是若使用太多表格,在CSS一一指定不同高,也不是好方法
其實很簡單將高度height屬性指定在儲存格就可以了通過測試
[table border="0" width="300"]
[tr][td height="55"] TEXT [/td][/tr]
[/table]
但這不是w3c希望的標準,建議能夠使用div代替不必要的table

7.正確使用CSS樣式表
一定要放在[head][/head]之間
[link rel="stylesheet" type="text/css" href="style.css" /]
[style type="text/css"]
[!--
body{font-size:9pt;}
--]
[/style]

錯誤 [style]
正確 [style type="text/css"]
建議全站的樣式都寫在।css文件中

8.同一個id選擇器不可重複使用
一個網頁中id="xx"同一個選擇器不能重複使用,若需要重複請用class="xx"

9.絕對不可省略雙引號或單引號
錯誤 style=font-size:9pt
正確 style="font-size:9pt"
錯誤 [img src=bg.gif width=140 height=30 alt=text /]
正確 [img src="bg.gif" width="140" height="30" alt="text" /]
錯誤 [a href=home]text[/a]
正確 [a href="home"]text[/a]

10.標籤必須是一對
[p] [/p]
[span][/span]
[div][/div]

11.圖片標籤加上文字說明alt="說明"
錯誤 [img src="bg.gif" height="50" border="0" /]
正確 [img src="bg।gif" height="50" border="0" alt="說明文字" /]

12.正確的標籤順序
錯誤 [b][i]文字[/b][/i]
正確 [b][i]文字[/i][/b]

13.註解文字不可包含--符號
錯誤 [!-- OEC--SPACE --]
正確 [!-- OECSPACE --]

14.JavaScript寫法
Javascript我們通常會寫為
錯誤 [script language="javascript"]
W3C標準必須為程式指定類型type=text/javascript,所以要寫為
正確 [script type="text/javascript"]
或者 [script language="javascript" type="text/javascript"]
載入外部.js獨立檔案的寫法
正確 [script type="text/javascript" src="script।js"][/script]

15. [embed]標籤的爭議
[embed]是Netscape的私有標籤,W3C 從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒有這個標籤,所以使用[embed]的頁面是不能通過標準測試。
W3C推薦使用 [object] 標籤,用[object]插入flash影片的代碼可以寫為:
[object type="application/x-shockwave-flash" data="index.swf" width="400" height="200"]
[param name="movie" value="index.swf" /]
[/object]
但這樣的寫法可能IE5/IE6 Win瀏覽器版本會出現問題。想要符合標準又能在任何瀏覽器下正常顯示,以下幾個連結點提供參考:

* torresburriel.com
* A List Apart

[embed]標籤因為廣大的受到運用,不再標準範圍引起很大的爭議,想要解決這個問題,只能等IE瀏覽器對[object]有更好的支持或者W3C願意收錄[embed]標籤。

16.XHTML 1.0文件類別宣告的正確寫法 (不可小寫)
過度標準（Transitional）
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
框架標準（Frameset）
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"]

嚴格標準（Strict）包含以上須注意的問題,還有其他更嚴格的標準
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]

XHTML 1.0 標準規格 : The Extensible HyperText Markup Language
W3C標準測試網址 http://validator.w3.org/
網頁自動測試網址 http://validator.w3.org/check?uri=referer
測試時一定要有「16.文件類別宣告」還有指定文件編碼
[meta http-equiv="Content-Type" content="text/html; charset=big5" /]
才能順利進行測試動作,開始打造一個萬維標準的網站吧!

PHP 程式學習筆記本

2007年12月6日星期四