打造W3C HTML 4.01標準的網站

目前使用Dreamweaver或其他網頁製作軟體做網站編輯,HTML大部份都是以HTML4.0和HTML4.01為主,但是能完全符合標準的卻不多, 有些人有這樣的的想法:[能正常再瀏覽器顯示就好],有些人則不清楚原來還有W3C標準的存在,達到W3C標準其實不難,只要多注意一些細節,拷貝教學網範例語法的時候,詳細檢查一下再貼上,如果能直接編輯HTML更好,避免錯誤的發生。
以下我列出幾點是比較常見的錯誤供參考:

1.不可省略雙引號或單引號
錯誤 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]

HTML4.01中有些屬性值沒有加引號是可以通過測試
但在XHTML1।0引號就是必須的,所以建議養成加引號的好習慣.

2.標籤必須是一對
[p] [/p]
[span][/span]
[div][/div]
[table][tr][td][/td][/tr][/table]

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

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

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

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

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"]

8.使用表格常犯的錯誤
我們在做表格通常會指定寬與高,例如:
[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

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

10.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]

11. [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]標籤。

12.HTML4.01文件類別宣告的正確寫法 (不可小寫)
過度標準（Transitional）
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"]
框架標準（Frameset）
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"]


嚴格標準（Strict）
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"]
HTML 4.01 標準規格 : HTML 4.01 Specification
W3C標準測試網址 http://validator.w3.org/
網頁自動測試網址 http://validator.w3.org/check?uri=referer
測試時一定要有「12.文件類別宣告」還有指定文件編碼
[meta http-equiv="Content-Type" content="text/html; charset=big5"]
才能順利進行測試動作,開始打造一個萬維標準的網站吧!