W3C XHTML 1.0 / CSS 國際標(biāo)準(zhǔn)通關(guān)秘訣

　昨天本站(http://www.tangzhehao.com.cn)從XHTML1.0有121個錯誤和CSS近10個錯誤，本人用了近兩個小時，將所有錯誤搞定。積累技巧如下，與大家分享討論。為了讓大家印象深刻，我們采用邊做題，邊總結(jié)的方法。

W3C XHTML 1.0 國際標(biāo)準(zhǔn):

  第一題：在 <div class=tzh>I am TZH!</div> 這段語句中有什么錯誤？
1. 標(biāo)點符號問題。這其實也是大家最容易忽視的問題，其實就是小小的兩個引號，就造成了這個錯誤。雖然很多瀏覽器在不加引號的情況下仍然能正確識別渲染。但是這樣想要通過嚴(yán)格的W3C XHTML國際標(biāo)準(zhǔn)是不可能的，請大家記住等號后面一定要接引號。正確寫法：<div class="tzh">I am TZH!</div>

 第二題：在 <SPAN class="tzh">TZH is me!</SPAN> 這段語句中有什么錯誤？
2. 大小寫注意。這和第一個問題一樣，都是特別容易忽視的細節(jié)問題。在W3C標(biāo)準(zhǔn)中是絕對不允許大寫的，其中我仍記得我在檢測一段javascript代碼的時候，由于為了讓自己一目了然寫出的onLoad也被判斷成了錯誤，原因就是L不能大寫。正確寫法：<span class="tzh">TZH is me!</span>

 第三題：在 <p>I am TZH!</p><br><p>TZH is me!</p> 這段語句中有什么錯誤？
3. <br />標(biāo)簽問題。對于強制換行標(biāo)簽<br />來說，很多新手都分不清它和<br>的區(qū)別，甚至在FCKeditor編輯器中有時都會時不時冒出個<br>來充當(dāng)<br />。雖然同樣很多瀏覽器都能自動糾錯，將<br>作為<br />識別。但最好的編輯方法還是推薦大家使用Dreamweaver進行編輯，當(dāng)你按下Ctrl+Enter，就會自動寫上一個<br />。正確寫法： <p>I am TZH!</p><br /><p>TZH is me!</p>

 第四題：在 <h1>~tangzhehao~hey~</h1> 這段語句中有什么錯誤？
4. 注意標(biāo)簽結(jié)束后面接的標(biāo)點符號，很多標(biāo)簽結(jié)束后都不能接特殊標(biāo)點符號，比如這里的"~"波浪號，但你要問，那叫我怎么用呢？那就使用ISO Latin-1字符集（ISO Latin-1 Character Set），在這里，查找到“~”波浪號相對應(yīng)的字符集十進制編碼是&#126;，然后就用這個十進制編碼代替~波浪號，記住最后的分號不能丟。在ISO Latin-1字符集中以已命名實體（Named entity）最優(yōu)先，十進制編碼（Decimal code）其次，也就是說，一個符號在同時有十進制編碼和已命名實體的時候，優(yōu)先選用已命名實體而不使用十進制編碼。
P.S.：ISO Latin-1字符集地址：http://www.tangzhehao.com.cn/css/z_iso.html

 第五題：在 <form id="54tzh"></form> 這段語句中有什么錯誤？
5. 注意id和class特殊情況。W3C XHTML1.0 標(biāo)準(zhǔn)中規(guī)定，在id或class中，第一個字符是不能是數(shù)字的，必須是字母。正確寫法：<form id="tzh45"></form>

 第六題：在 <img src="logo.gif"> 這段語句中有什么錯誤？
6. <img>標(biāo)簽注意。W3C XHTML1.0 標(biāo)準(zhǔn)中規(guī)定，在<img>標(biāo)簽中，必須包括alt元素。正確寫法：<img alt="Logo" src="logo.gif">

 第七題：在<script language="JavaScript"> 這段語句中有什么錯誤？
7. <script>標(biāo)簽注意。W3C XHTML1.0 標(biāo)準(zhǔn)中規(guī)定，在<img>標(biāo)簽中，必須包括type元素。正確寫法：<script language="JavaScript" type=text/javascript>

 第八題：在<div><h1>I am TZH!</div></h1> 這段語句中有什么錯誤？
8. 注意標(biāo)簽開始結(jié)束順序?qū)?yīng)。正確寫法：<div><h1>I am TZH!</h1></div>

9. 注意特殊套裝。比如：<dl><dd><ul><li>等一些特殊標(biāo)簽，套裝順序中缺一不可。必須按照順序?qū)?lt;dl><dd><ul><li>四個標(biāo)簽寫完全。類似的還有許多。

10. 注意未打開標(biāo)簽。所謂未打開來自于W3C檢測，這類錯誤顯示的錯誤是 is not open，翻譯過來也就是未打開的意思。如果按照中文的意思來理解就是有首無尾或者有尾無首。通常這種錯誤出現(xiàn)的原因都是因為有一段代碼在修改的時候被刪除，而沒有顧及到相對較遠的結(jié)束或者開始標(biāo)簽。

W3C CSS國際標(biāo)準(zhǔn)：
1. 少用偏門。類似break-word斷行，z-index手動分層，還有像垂直對齊等等這些偏門CSS最好少用，因為不一定所有瀏覽器都支持，而且極難通過W3C檢測。
2. center不是float的值。很多新手都會把center誤認(rèn)為是float的值，而偏偏不是如此。center只是text-align的值。
3. 對齊不能包括兩個值。很多新手會在float或者text-align中填寫兩個值，比如：float:left top。這是不允許的，瀏覽器也無法識別。
4. 滾動條顏色最好不要自定義。很多瀏覽器不能正常識別自定義顏色的滾動條，況且很多自定義顏色都不能通過W3C。
5. 單獨滾動條設(shè)置。現(xiàn)在經(jīng)常使用overflow-x（橫向滾動條）或者overflow-y（縱向滾動條），在設(shè)置這個的時候經(jīng)常會發(fā)現(xiàn)并不是所有的客戶端上都有效果，大家在設(shè)置的時候最好在body和html同時進行設(shè)置。然而這個CSS也不是CSS2.1支持的（CSS2.1支持overflow，同時定義橫縱滾動條），直到CSS3才支持這種定義方式。盡量少用。
6. background和color顏色相同會受到警告。

在最后，如果你的站通過了W3C的檢測之后，將獲得檢測通過W3C認(rèn)證Logo，下圖（左圖為W3C XHTML 1.0通過，右圖為W3C CSS通過）

　　暫時就是以上幾點了，大家如果覺得還有什么可以互相交流，也可以聯(lián)系我http://www.tangzhehao.com.cn

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈