網(wǎng)站如何達(dá)到W3C標(biāo)準(zhǔn)？網(wǎng)頁(yè)如何通過(guò)W3C驗(yàn)證？
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
網(wǎng)站要通過(guò)W3C標(biāo)準(zhǔn)，需要注意以下幾個(gè)問(wèn)題：
1.XHTML 1.0文件類(lèi)別宣告的正確寫(xiě)法 (不可小寫(xiě)) A:過(guò)度標(biāo)準(zhǔn)（Transitional） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> B:框架標(biāo)準(zhǔn)（Frameset） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> C:嚴(yán)格標(biāo)準(zhǔn)（Strict） 包含以上須注意的問(wèn)題,還有其他更嚴(yán)格的標(biāo)準(zhǔn) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd 2.頭文件問(wèn)題 所有的網(wǎng)頁(yè)頭文件都一律都改為W3C標(biāo)準(zhǔn)形式，寫(xiě)法如下： <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta http-equiv="content-language" content="zh-cn" /> <meta name="keywords" content="..." /> <meta name="description" content="..."/> <title>...</title> </head> 3.不允許使用target="_blank" 在HTML4.01可以使用target="_blank",但XHTML1.0是不被允許的. 比如原來(lái)這樣寫(xiě)的代碼：<a href="document.html" target="_blank"> 打開(kāi)一個(gè)新窗口</a> 現(xiàn)在需要寫(xiě)成這樣：<a href="document.html" rel="external">打開(kāi)一個(gè)新窗口</a> 這是符合strict標(biāo)準(zhǔn)的方法。 當(dāng)然還必須配合一個(gè)javascript才有效。javascript完整的代碼JS如下: function externallinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload = externallinks; 然后把它保存成一個(gè).js文件(比如open.js)，再通過(guò)外部聯(lián)接方法調(diào)用： <script type="text/javascript" src="external.js"></script> 4.XHTML 1.0要求所有的標(biāo)識(shí)必須關(guān)閉 所有沒(méi)有成對(duì)的空標(biāo)識(shí)必須以 /> 結(jié)尾 <p></p>和<a href="index.html"></a>這就是成對(duì) 錯(cuò)誤 <br> <hr> 正確 <br /> <hr /> 錯(cuò)誤 <input type="text" name="name"> 正確 <input type="text" name="name" /> 錯(cuò)誤 <meta ...> 正確 <meta ... /> 錯(cuò)誤 <link rel="stylesheet" type="text/css" href="style.css"> 正確 <link rel="stylesheet" type="text/css" href="style.css" /> 錯(cuò)誤 <img src="bg.gif" border="0" alt="說(shuō)明文字"> 正確 <img src="bg.gif" border="0" alt="說(shuō)明文字" /> 5.所有標(biāo)識(shí)元素名稱(chēng)都使用小寫(xiě) 錯(cuò)誤 <HTML> <TITLE> <HEAD> <BODY> 正確 <html> <title> <head> <body> 錯(cuò)誤 <IMG SRC="BG.GIF" BORDER="0" ALT="說(shuō)明文字"> 正確 <img src="bg.gif" border="0" alt="說(shuō)明文字" /> 錯(cuò)誤 <UL><LI></LI></UL> 正確 <ul><li></li></ul> 以上只是舉例,是"所有"標(biāo)簽元素名稱(chēng)都必須是小寫(xiě) 6.同一個(gè)id選擇器不可重復(fù)使用一個(gè)網(wǎng)頁(yè)中id="xx"同一個(gè)選擇器不能重復(fù)使用,若需要重復(fù)請(qǐng)用class="xx" 7.W3C標(biāo)準(zhǔn)標(biāo)識(shí)必須是成對(duì)的 <p> </p> <span></span> <div></div> 8.正確的標(biāo)識(shí)順序 錯(cuò)誤 <b><i>文字</b></i> 正確 <b><i>文字</i></b> 9.JS寫(xiě)法 Javascript我們通常會(huì)寫(xiě)為 錯(cuò)誤 <script language="javascript"> W3C標(biāo)準(zhǔn)必須為程式指定類(lèi)型type=text/javascript,所以要寫(xiě)為 正確 <script type="text/javascript"> 或者 <script language="javascript" type="text/javascript"> 載入外部.js： 正確 <script type="text/javascript" src="script.js"></script> 10.絕對(duì)不可省略雙引號(hào)或單引號(hào) 錯(cuò)誤 style=font-size:14px 正確 style="font-size:14px" 錯(cuò)誤 <img src=bg.gif width=140 height=30 alt=text /> 正確 <img src="bg.gif" width="140" height="30" alt="text" /> 錯(cuò)誤 <a href=home>text</a> 正確 <a href="home">text</a> 11.W3C標(biāo)準(zhǔn)規(guī)定圖片標(biāo)識(shí)加上文字說(shuō)明alt="圖片說(shuō)明" 錯(cuò)誤 <img src="bg.gif" height="50" border="0" /> 正確 <img src="bg.gif" height="50" border="0" alt="說(shuō)明文字" /> 12.背景音樂(lè)不允許使用 bgsound 標(biāo)簽，不過(guò)我們依然可以用JavaScript來(lái)解決這個(gè)問(wèn)題。js代碼如下： <!-- Begin var MSIE=navigator.userAgent.indexOf("MSIE"); var NETS=navigator.userAgent.indexOf("Netscape"); var OPER=navigator.userAgent.indexOf("Opera"); if((MSIE>-1) || (OPER>-1)) { document.write("<BGSOUND SRC=背景音樂(lè)地址 LOOP=INFINITE>"); } else { document.write("<EMBED SRC=背景音樂(lè)地址 AUTOSTART=TRUE "); document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>"); } // end -->然后保存成.js文件(比如background_music.js)，通過(guò)外部聯(lián)接方法調(diào)用它 13. <embed>標(biāo)識(shí)的爭(zhēng)議 <embed>是Netscape的私有標(biāo)識(shí),W3C標(biāo)準(zhǔn)從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒(méi)有這個(gè)標(biāo)識(shí),所以使用<embed>的頁(yè)面是不能通過(guò)標(biāo)準(zhǔn)測(cè)試。 W3C標(biāo)準(zhǔn)推薦使用 <object> 標(biāo)識(shí),用<object>插入flash影片的代碼可以寫(xiě)為: <object type="application/x-shockwave-flash" data="index.swf" width="400" height="200"> <param name="movie" value="index.swf" /> </object> 但這樣的寫(xiě)法可能IE5/IE6 Win瀏覽器版本會(huì)出現(xiàn)問(wèn)題. <embed>標(biāo)識(shí)因?yàn)閺V大的受到運(yùn)用,不再標(biāo)準(zhǔn)范圍引起很大的爭(zhēng)議,想要解決這個(gè)問(wèn)題,只能等IE瀏覽器對(duì)<object>有更好的支持或者W3C愿意收錄<embed>標(biāo)識(shí)。 14. W3C標(biāo)準(zhǔn)規(guī)定不允許使用框架標(biāo)簽<IFRAME> 用JavaScript解決問(wèn)題了。javascript完整的代碼如下： function ifr(url,w,h){document.write(’<iframe id="ifr" name="ifr" width="’+w+’" height="’+h+’" border="0" frameborder="0" scrolling="no" src="’+url+’"></iframe>’);} 然后把它保存成一個(gè).js文件(比如iframe.js)，然后通過(guò)外部聯(lián)接方法調(diào)用：<script type="text/javascript" src="ifr.js"></script> 在你需要插入框架的地方寫(xiě)以下代碼即可：<script type="text/javascript">ifr(’需插入的網(wǎng)頁(yè)地址’,’567’,’485’);</script> 函數(shù)ifr()使用說(shuō)明：ifr(’這里寫(xiě)地址’,’這里寫(xiě)寬度’,’這里寫(xiě)長(zhǎng)度’,) 15.google廣告問(wèn)題 google廣告的代碼是不符合W3C標(biāo)準(zhǔn)的，只好又把它轉(zhuǎn)成JS調(diào)用，但GOOGLE政策里是寫(xiě)著不允許修改代碼的， 關(guān)于這點(diǎn)只能等待看看在以后會(huì)有什么修改了。JS文件(google.js)代碼如下：document.writeln("<script type=\"text\/javascript\"><!--"); document.writeln("google_ad_client = \"pub-0538745384335317\";"); document.writeln("google_ad_width = 125;"); document.writeln("google_ad_height = 125;"); document.writeln("google_ad_format = \"125x125_as\";"); document.writeln("google_ad_type = \"text_image\";"); document.writeln("\/\/2007-06-29: http://www.100byte.com/"); document.writeln("google_ad_channel = \"4751988107\";"); document.writeln("google_color_border = \"1a1a1a\";"); document.writeln("google_color_bg = \"1a1a1a\";"); document.writeln("google_color_link = \"d0eb6a\";"); document.writeln("google_color_text = \"ffffff\";"); document.writeln("google_color_url = \"8ad459\";"); document.writeln("google_ui_features = \"rc:6\";"); document.writeln("\/\/-->"); document.writeln("<\/script>"); document.writeln("<script type=\"text\/javascript\""); document.writeln(" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">"); document.writeln("<\/script>") 各位可以按照自己的情況修改，網(wǎng)上也有許多把HTML代碼轉(zhuǎn)為JS代碼的地方。最后在需要掛廣告的地方放入代碼 <script type="text/javascript" src="google.js"></script> 16.W3C標(biāo)準(zhǔn)注解文字不可包含--符號(hào) 錯(cuò)誤 <!-- index--box --> 正確 <!-- indexbox --> 小貼士：在樣式表的注釋中注意盡量避免用中文 17.正確使用CSS樣式表 樣式表放在文件本身的時(shí)候，一定要放在<head></head>之間 <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> <!-- body{} --> </style> 注意： 錯(cuò)誤 <style> 正確 <style type="text/css"> 18.使用表格常犯的錯(cuò)誤 在做表格通常會(huì)指定寬與高,例如:<table border="1" width="300" height="100"> <tr><td> 內(nèi)容 </td></tr> </table> 這樣做是沒(méi)有辦法通過(guò),可使用CSS來(lái)控制標(biāo)識(shí)元素的高度.table{ height:100px; }<table class="table"><tr><td> TEXT </td></tr> </table> 但若使用太多表格,在CSS一一指定不同高,也不是好方法其實(shí)很簡(jiǎn)單將高度height屬性指定在儲(chǔ)存格就可以了通過(guò)測(cè)試 <table border="0" width="300"> <tr><td height="100"> TEXT </td></tr> </table> 但這不是W3C標(biāo)準(zhǔn),建議多使用div代替不必要的table 19.非標(biāo)識(shí)一部分的符號(hào)以編碼表示(窗體內(nèi)包含以下符號(hào)也必須用編碼表示) < 以 < 表示 > 以 > 表示 & 以 & 表示 程序中的連結(jié) & 也要改用 & 錯(cuò)誤 <a href="foo.cgi?chapter=1§ion=2"> 正確 <a href="foo.cgi?chapter=1&section=2"> 20.所有屬性都必須有值 XHTML1.0規(guī)定所有屬性都必須有值, 若沒(méi)有就必須重復(fù)屬性作為值 錯(cuò)誤 <input type="radio" value="v1" checked name="s1" /> 正確 <input type="radio" value="v1" checked="checked" name="s1" /> 錯(cuò)誤 <option selected>S1</option> 正確 <option selected="selected">S1</option> 錯(cuò)誤 <td nowrap> 正確 <td nowrap="nowrap"> 1.XHTML校驗(yàn) 校驗(yàn)網(wǎng)址：http://validator.w3.org/ 校驗(yàn)方式:網(wǎng)址校驗(yàn)、文件上傳校驗(yàn) 校驗(yàn)成功，會(huì)顯示"This Page Is Valid XHTML 1.0 Transitional!"。 校驗(yàn)失敗，會(huì)顯示更多校驗(yàn)選項(xiàng)和錯(cuò)誤信息。 一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯(cuò)誤代碼所在行和錯(cuò)誤原因。 XHTML校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?BR> No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。 No Character Encoding Found! Falling back to UTF-8.--未定義語(yǔ)言編碼。 end tag for "img" omitted, but OMITTAG NO was specified--圖片標(biāo)簽沒(méi)有加"/"關(guān)閉。 an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號(hào)。 element "DIV" undefined---DIV標(biāo)簽不能用大寫(xiě)，要改成小寫(xiě)div。 required attribute "alt" not specified---圖片需要加alt屬性。 required attribute "type" not specified---JS或者CSS調(diào)用的標(biāo)簽漏了type屬性。 其中最最常見(jiàn)的錯(cuò)誤就是標(biāo)簽的大小寫(xiě)問(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ì)顯示兩類(lèi)錯(cuò)誤：錯(cuò)誤和警告。錯(cuò)誤表示一定要修正，否則無(wú)法通過(guò)校驗(yàn)；警告表示有代碼不被W3C推薦,建議修改。 CSS2校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?/B> (錯(cuò)誤)無(wú)效數(shù)字 : color909090 不是一個(gè) color 值 : 909090 ---十六進(jìn)制顏色值必須加"#"號(hào)，即#909090 (錯(cuò)誤)無(wú)效數(shù)字 : margin-topUnknown dimension : 6pixels ---pixels不是一個(gè)單位值，正確寫(xiě)法6px (錯(cuò)誤)屬性 scrollbar-face-color 不存在 : #eeeeee --- 定義滾動(dòng)條顏色是非標(biāo)準(zhǔn)的屬性 (錯(cuò)誤)值 cursorhand不存在 : hand是非標(biāo)準(zhǔn)屬性值，修改為cursor:pointer (警告)Line : 0 font-family: 建議你指定一個(gè)種類(lèi)族科作為最后的選擇 --W3C建議字體定義的時(shí)候，最后以一個(gè)類(lèi)別的字體結(jié)束，例如"sans-serif"，以保證在不同操作系統(tǒng)下，網(wǎng)頁(yè)字體都能被顯示。 (警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標(biāo)準(zhǔn)屬性或值，校驗(yàn)程序無(wú)法判斷和提供相應(yīng)的警告信息。 W3C標(biāo)準(zhǔn)測(cè)試網(wǎng)址 http://validator.w3.org/ W3C CSS 校驗(yàn)網(wǎng)址 http://jigsaw.w3.org/css-validator/ 該文章在 2011/6/22 1:55:40 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
