打造W3C HTML 4.01標準的網站

Home Home
引用 | 編輯 笑笑
2008-06-20 09:00
樓主
推文 x0
最近在整理以前做的網頁,因為以前的頻寬小,硬碟不大,所以網頁中能省則省,所以像 <tr><td> 很多都沒有結尾,還有單引號及雙引號都省掉,不過現在瀏覽器很多都要符合 W3C 的標準,所以就上網找了一下相關的資料,大家可以參考一下

目前使用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瀏覽器版本會出現問題
想要符合標準又能在任何瀏覽器下正常顯示,以下幾個連結點提供參考:
<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">
才能順利進行測試動作,開始打造一個萬維標準的網站吧!

轉貼自 http://www.hsiu28.net/html/article_detail.php?id=12


獻花 x0