W3C代碼標(biāo)準(zhǔn)規(guī)范
一、目的: 為什么要遵循標(biāo)準(zhǔn)
我們作為生產(chǎn)者實(shí)際上只是位于中游，既不是上游的瀏覽器制造商，他們是標(biāo)準(zhǔn)的真正制定者，也不算是下游，他們是瀏覽器的終端使用者。這個(gè)角色就意味著我們位于一個(gè)接口的位置，我們需要想辦法滿足下游的用戶使用上游不同瀏覽器時(shí)看到的是同樣的內(nèi)容。用一個(gè)程序的語(yǔ)言說(shuō)，我們是轉(zhuǎn)換器……adapter，我們想方設(shè)法讓我們的頁(yè)面、我們的程序能夠支持所有的瀏覽器、能夠滿足盡可能多的用戶。我們要滿足所有的客戶，即使做不到，我們也要滿足我們技術(shù)范圍之內(nèi)的所有用戶。
二、目標(biāo)
一個(gè)標(biāo)準(zhǔn)制作的網(wǎng)站，讓你壓根感覺(jué)不到跟標(biāo)準(zhǔn)有關(guān)。
三、受眾
所有ui設(shè)計(jì)師、技術(shù)工程師、運(yùn)營(yíng)維護(hù)人員。
四、標(biāo)準(zhǔn)內(nèi)容
拋棄聲明：以后我們將拋棄font標(biāo)簽，新的頁(yè)面中不應(yīng)該再出現(xiàn)如<font color=”red”></font>，已經(jīng)存在的老的頁(yè)面也應(yīng)該在修改時(shí)盡量替代，替代方法：<span
class=”red_tex”></span>。
一個(gè)標(biāo)準(zhǔn)XHTML頭信息格式如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>慧聰網(wǎng)_中國(guó)領(lǐng)先的B2B電子商務(wù)平臺(tái)、電子商務(wù)網(wǎng)站</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="慧聰網(wǎng)(hc360.com)是為中小企業(yè)提供B2B電子商務(wù)服務(wù)的網(wǎng)上貿(mào)易平臺(tái)，是企業(yè)尋求電子商務(wù)網(wǎng)絡(luò)貿(mào)易信息的首選行業(yè)門戶。中小企業(yè)通過(guò)慧聰網(wǎng)可以快速發(fā)布產(chǎn)品供求信息并達(dá)成交易。慧聰網(wǎng)為您提供全面的B2B行業(yè)資訊，供應(yīng)，求購(gòu)，庫(kù)存信息，努力讓每個(gè)老板都成為B2B電子商務(wù)活動(dòng)的一員。" /> <meta name="keywords" content="B2B,hc360,電子商務(wù),供求信息,加工,庫(kù)存,二手,網(wǎng)上貿(mào)易,行業(yè)門戶,商機(jī),網(wǎng)上交易,行業(yè)資訊,在線交易,中小企業(yè),供應(yīng),求購(gòu),商務(wù)網(wǎng),商業(yè)貿(mào)易,貿(mào)易平臺(tái)" /> </head>
1、什么是DOCTYPE
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聲明可供選擇：
i) 過(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">
ii) 嚴(yán)格的(Strict)：要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，例如<br>。
完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
iii) 框架的(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">
注：DOCTYPE聲明必須放在每一個(gè)XHTML文檔最頂部，在所有代碼和標(biāo)識(shí)之上。
2、名字空間 namespace
<html xmlns="http://www.w3.org/1999/xhtml">
通常我們HTML4.0的代碼只是<html>，這里的"xmlns"是什么呢？
這個(gè)“xmlns”是XHTML namespace的縮寫，叫做“名字空間”聲明。XHTML是HTML向XML過(guò)渡的標(biāo)識(shí)語(yǔ)言，它需要符合XML文檔規(guī)則，因此也需要定義名字空間。又因?yàn)閄HTML1.0不能自定義標(biāo)識(shí)，所以它的名字空間都相同，就是"http://www.w3.org/1999/xhtml"。目前階段我們只要照抄代碼就可以了。
3、定義語(yǔ)言編碼
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言，我們一般使用gb2312(簡(jiǎn)體中文)，制作多國(guó)語(yǔ)言頁(yè)面也有可能用Unicode、ISO-8859-1等，根據(jù)你的需要定義。
注：如果忘記了定義語(yǔ)言編碼,可能就會(huì)出現(xiàn),你在DW(dreamweaver)做完一個(gè)頁(yè)面，第二次打開(kāi)時(shí)所有的中文變成了亂碼。
4、Javascript定義
Js必須要用<script language="javascript" type="text/javascript">來(lái)開(kāi)頭定義，而不是原來(lái)的<script language=javascript>或干脆直接<script>，并且需要加個(gè)注釋符<!-- -->，以保證不在不支持js的瀏覽器上直接顯示出代碼來(lái)。
例如：
<script language="javascript" type="text/javascript"> //<![CDATA[ function show_layout(selObj){ var n = selObj.options[selObj.selectedIndex].value; document.getElementById('stylesheet').href = n; } //]]> </script>
注：具體參考js規(guī)范。
5、CSS定義
CSS必須要用<style type=“text/css”>開(kāi)頭來(lái)定義，而不是原來(lái)的直接<style>，也不建議直接寫在內(nèi)容代碼里如：<div style=”padding-left:20px;”></div>，并需要加個(gè)注釋符<!-- -->
例如：
<style type="text/css" media="screen"> <!-- body {margin:0px;padding:0px;font-size:12px;text-align:center} --> </style>為保證各瀏覽器的兼容性，在寫CSS時(shí)請(qǐng)都寫上數(shù)量單位，例如：錯(cuò)誤：.space_10{padding-left:10} 正確：.space_10 {padding-left:10px}
6、不要在注釋內(nèi)容中使用“--”
“--”只能發(fā)生在XHTML注釋的開(kāi)頭和結(jié)束，也就是說(shuō)，在內(nèi)容中它們不再有效。
例如下面的代碼是無(wú)效的：<!--這里是注釋-----------這里是注釋-->
正確的應(yīng)用等號(hào)或者空格替換內(nèi)部的虛線。<!--這里是注釋============這里是注釋-->
7、所有標(biāo)簽的元素和屬性的名字都必須使用小寫
與HTML不一樣，XHTML對(duì)大小寫是敏感的，<title>和<TITLE>是不同的標(biāo)簽。XHTML要求所有的標(biāo)簽和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body>。大小寫夾雜也是不被認(rèn)可的，通常dreamweaver自動(dòng)生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。
8、所有的屬性必須用引號(hào)""括起來(lái)
在HTML中，你可以不需要給屬性值加引號(hào)，但是在XHTML中，它們必須被加引號(hào)。
例如：<height=80>必須修改為：<height="80">。
特殊情況，你需要在屬性值里使用雙引號(hào)，你可以用"，單引號(hào)可以使用'，例如：<alt="say'hello'">
9、把所有<和&特殊符號(hào)用編碼表示
任何小于號(hào)（<），不是標(biāo)簽的一部分，都必須被編碼為 <
任何大于號(hào)（>），不是標(biāo)簽的一部分，都必須被編碼為 >
任何與號(hào)（&），不是實(shí)體的一部分的，都必須被編碼為 &
錯(cuò)誤：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
正確：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
10、給所有屬性賦一個(gè)值
XHTML規(guī)定所有屬性都必須有一個(gè)值，沒(méi)有值的就重復(fù)本身。例如：
<td nowrap><input type="checkbox" name="shirt" value="medium" checked>必須修改為：
<td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked" />
11、所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
以前在HTML中，你可以打開(kāi)許多標(biāo)簽，例如<p>和<li>而不一定寫對(duì)應(yīng)的</p>和</li>來(lái)關(guān)閉它們。但在XHTML中這是不合法的。XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。如果是單獨(dú)不成對(duì)的標(biāo)簽，在標(biāo)簽最后加一個(gè)"/"來(lái)關(guān)閉它。
例如：<br />
<img height="80" alt="網(wǎng)頁(yè)" title=”網(wǎng)頁(yè)” src="logo.gif" width="200" />
特殊結(jié)束標(biāo)記
錯(cuò)誤：
Document.write(“<td width=\"300\"><a href=\"1.html\">ok</a></td>”);
正確:
Document.write(“<td width=\"300\"><a href=\"1.html\">ok<\/a><\/td>”);
在js中，原已結(jié)束的標(biāo)簽需要再轉(zhuǎn)義再結(jié)束。
12、所有的標(biāo)記都必須合理嵌套
同樣因?yàn)閄HTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：
<p><b></p></b>必須修改為：<p><b></b></p>
就是說(shuō)，一層一層的嵌套必須是嚴(yán)格對(duì)稱。
錯(cuò)誤：
<table><tr><form><td></td></form></tr></table>
正確：
<form><table><tr><td></td></tr></table></form>
13、圖片添加有意義的alt屬性
例如：<img src="logo.gif" width="100" height="100" boder="0" alt="阿里巴巴" />
盡可能的讓作為內(nèi)容的圖片都帶有屬于自己的alt屬性。
同理：添加文字鏈接的title屬性。
<a href="#" target="_blank" title="新聞新聞新聞新聞">新聞新聞…</a>，在一些限定字?jǐn)?shù)的內(nèi)容展示尤為重要，幫助顯示不完成的內(nèi)容顯示完整，而不用考慮頁(yè)面會(huì)因此而撐大。
14、在form表單中增加lable，以增加用戶友好度
例如：
<form action="http://somesite.com/prog/adduser" method="post"> <label for="firstname">first name: </label> <input type="text" id="firstname" /> <label for="lastname">last name: </label> <input type="text" id="lastname" /> </form>
附錄一
1、XHTML校驗(yàn)
校驗(yàn)網(wǎng)址：http://validator.w3.org/
校驗(yàn)方式：網(wǎng)址校驗(yàn)、文件上傳校驗(yàn)
一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯(cuò)誤代碼所在行和錯(cuò)誤原因。
XHTML校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?/span>
1.No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
2.No Character Encoding Found! Falling back to UTF-8.--未定義語(yǔ)言編碼。
3.end tag for "img" omitted, but OMITTAG NO was specified--圖片標(biāo)簽沒(méi)有加"/"關(guān)閉。
4.an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號(hào)。
5.element "DIV" undefined---DIV標(biāo)簽不能用大寫，要改成小寫div。
6.required attribute "alt" not specified---圖片需要加alt屬性。
7.required attribute "type" not specified---JS或者CSS調(diào)用的標(biāo)簽漏了type屬性。
其中最最常見(jiàn)的錯(cuò)誤就是標(biāo)簽的大小寫問(wèn)題了。通常這些錯(cuò)誤都是關(guān)聯(lián)的，比如忘記了一個(gè)</li>其他<li>標(biāo)簽都會(huì)報(bào)錯(cuò)，所以不要看到一堆的錯(cuò)誤害怕，通常解決了一個(gè)錯(cuò)誤，其他的錯(cuò)誤也都沒(méi)有了。
附錄二
2、CSS2校驗(yàn)
校驗(yàn)網(wǎng)址：http://jigsaw.w3.org/css-validator/
校驗(yàn)方式：網(wǎng)址校驗(yàn)、文件上傳校驗(yàn)、直接貼入代碼校驗(yàn)
校驗(yàn)成功，會(huì)顯示"恭喜恭喜，此文檔已經(jīng)通過(guò)樣式表校驗(yàn)! "。校驗(yàn)失敗，會(huì)顯示兩類錯(cuò)誤：錯(cuò)誤和警告。錯(cuò)誤表示一定要修正，否則無(wú)法通過(guò)校驗(yàn)；警告表示有代碼不被W3C推薦,建議修改。
同樣，通過(guò)檢驗(yàn)后，可以放置一個(gè)CSS校驗(yàn)通過(guò)圖標(biāo)。
CSS2校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?/span>
1.(錯(cuò)誤)無(wú)效數(shù)字：color909090不是一個(gè)color值，909090---十六進(jìn)制顏色值必須加"#"號(hào)，即#909090
2.(錯(cuò)誤)無(wú)效數(shù)字：margin-topUnknown dimension：6pixels ---pixels不是一個(gè)單位值，正確寫法6px
3.(錯(cuò)誤)屬性：scrollbar-face-color 不存在 : #eeeeee --- 定義滾動(dòng)條顏色是非標(biāo)準(zhǔn)的屬性
4.(錯(cuò)誤)值：cursorhand不存在 : hand是非標(biāo)準(zhǔn)屬性值，修改為cursor:pointer
5.(警告)Line:0 font-family: 建議你指定一個(gè)種類族科作為最后的選擇 --W3C建議字體定義的時(shí)候，最后以一個(gè)類別的字體結(jié)束，例如"sans-serif"，以保證在不同操作系統(tǒng)下，網(wǎng)頁(yè)字體都能被顯示。
6.(警告)Line:0 can't find the warning message for otherprofile --表示在代碼中有非標(biāo)準(zhǔn)屬性或值，校驗(yàn)程序無(wú)法判斷和提供相應(yīng)的警告信息。