網站如何達到W3C標準？網頁如何通過W3C驗證？
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
網站要通過W3C標準，需要注意以下幾個問題：
1.XHTML 1.0文件類別宣告的正確寫法 (不可小寫) A:過度標準（Transitional） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> B:框架標準（Frameset） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> C:嚴格標準（Strict） 包含以上須注意的問題,還有其他更嚴格的標準 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd 2.頭文件問題 所有的網頁頭文件都一律都改為W3C標準形式，寫法如下： <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是不被允許的. 比如原來這樣寫的代碼：<a href="document.html" target="_blank"> 打開一個新窗口</a> 現在需要寫成這樣：<a href="document.html" rel="external">打開一個新窗口</a> 這是符合strict標準的方法。 當然還必須配合一個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; 然后把它保存成一個.js文件(比如open.js)，再通過外部聯接方法調用： <script type="text/javascript" src="external.js"></script> 4.XHTML 1.0要求所有的標識必須關閉 所有沒有成對的空標識必須以 /> 結尾 <p></p>和<a href="index.html"></a>這就是成對 錯誤 <br> <hr> 正確 <br /> <hr /> 錯誤 <input type="text" name="name"> 正確 <input type="text" name="name" /> 錯誤 <meta ...> 正確 <meta ... /> 錯誤 <link rel="stylesheet" type="text/css" href="style.css"> 正確 <link rel="stylesheet" type="text/css" href="style.css" /> 錯誤 <img src="bg.gif" border="0" alt="說明文字"> 正確 <img src="bg.gif" border="0" alt="說明文字" /> 5.所有標識元素名稱都使用小寫 錯誤 <HTML> <TITLE> <HEAD> <BODY> 正確 <html> <title> <head> <body> 錯誤 <IMG SRC="BG.GIF" BORDER="0" ALT="說明文字"> 正確 <img src="bg.gif" border="0" alt="說明文字" /> 錯誤 <UL><LI></LI></UL> 正確 <ul><li></li></ul> 以上只是舉例,是"所有"標簽元素名稱都必須是小寫 6.同一個id選擇器不可重復使用一個網頁中id="xx"同一個選擇器不能重復使用,若需要重復請用class="xx" 7.W3C標準標識必須是成對的 <p> </p> <span></span> <div></div> 8.正確的標識順序 錯誤 <b><i>文字</b></i> 正確 <b><i>文字</i></b> 9.JS寫法 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> 10.絕對不可省略雙引號或單引號 錯誤 style=font-size:14px 正確 style="font-size:14px" 錯誤 <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> 11.W3C標準規(guī)定圖片標識加上文字說明alt="圖片說明" 錯誤 <img src="bg.gif" height="50" border="0" /> 正確 <img src="bg.gif" height="50" border="0" alt="說明文字" /> 12.背景音樂不允許使用 bgsound 標簽，不過我們依然可以用JavaScript來解決這個問題。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=背景音樂地址 LOOP=INFINITE>"); } else { document.write("<EMBED SRC=背景音樂地址 AUTOSTART=TRUE "); document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>"); } // end -->然后保存成.js文件(比如background_music.js)，通過外部聯接方法調用它 13. <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>標識。 14. W3C標準規(guī)定不允許使用框架標簽<IFRAME> 用JavaScript解決問題了。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>’);} 然后把它保存成一個.js文件(比如iframe.js)，然后通過外部聯接方法調用：<script type="text/javascript" src="ifr.js"></script> 在你需要插入框架的地方寫以下代碼即可：<script type="text/javascript">ifr(’需插入的網頁地址’,’567’,’485’);</script> 函數ifr()使用說明：ifr(’這里寫地址’,’這里寫寬度’,’這里寫長度’,) 15.google廣告問題 google廣告的代碼是不符合W3C標準的，只好又把它轉成JS調用，但GOOGLE政策里是寫著不允許修改代碼的， 關于這點只能等待看看在以后會有什么修改了。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>") 各位可以按照自己的情況修改，網上也有許多把HTML代碼轉為JS代碼的地方。最后在需要掛廣告的地方放入代碼 <script type="text/javascript" src="google.js"></script> 16.W3C標準注解文字不可包含--符號 錯誤 <!-- index--box --> 正確 <!-- indexbox --> 小貼士：在樣式表的注釋中注意盡量避免用中文 17.正確使用CSS樣式表 樣式表放在文件本身的時候，一定要放在<head></head>之間 <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> <!-- body{} --> </style> 注意： 錯誤 <style> 正確 <style type="text/css"> 18.使用表格常犯的錯誤 在做表格通常會指定寬與高,例如:<table border="1" width="300" height="100"> <tr><td> 內容 </td></tr> </table> 這樣做是沒有辦法通過,可使用CSS來控制標識元素的高度.table{ height:100px; }<table class="table"><tr><td> TEXT </td></tr> </table> 但若使用太多表格,在CSS一一指定不同高,也不是好方法其實很簡單將高度height屬性指定在儲存格就可以了通過測試 <table border="0" width="300"> <tr><td height="100"> TEXT </td></tr> </table> 但這不是W3C標準,建議多使用div代替不必要的table 19.非標識一部分的符號以編碼表示(窗體內包含以下符號也必須用編碼表示) < 以 < 表示 > 以 > 表示 & 以 & 表示 程序中的連結 & 也要改用 & 錯誤 <a href="foo.cgi?chapter=1§ion=2"> 正確 <a href="foo.cgi?chapter=1&section=2"> 20.所有屬性都必須有值 XHTML1.0規(guī)定所有屬性都必須有值, 若沒有就必須重復屬性作為值 錯誤 <input type="radio" value="v1" checked name="s1" /> 正確 <input type="radio" value="v1" checked="checked" name="s1" /> 錯誤 <option selected>S1</option> 正確 <option selected="selected">S1</option> 錯誤 <td nowrap> 正確 <td nowrap="nowrap"> 1.XHTML校驗 校驗網址：http://validator.w3.org/ 校驗方式:網址校驗、文件上傳校驗 校驗成功，會顯示"This Page Is Valid XHTML 1.0 Transitional!"。 校驗失敗，會顯示更多校驗選項和錯誤信息。 一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯誤代碼所在行和錯誤原因。 XHTML校驗常見錯誤原因對照表 No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。 No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。 end tag for "img" omitted, but OMITTAG NO was specified--圖片標簽沒有加"/"關閉。 an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號。 element "DIV" undefined---DIV標簽不能用大寫，要改成小寫div。 required attribute "alt" not specified---圖片需要加alt屬性。 required attribute "type" not specified---JS或者CSS調用的標簽漏了type屬性。 其中最最常見的錯誤就是標簽的大小寫問題了。通常這些錯誤都是關聯的，比如忘記了一個</li>其他<li>標簽都會報錯，所以不要看到一堆的錯誤害怕，通常解決了一個錯誤，其他的錯誤也都沒有了。 2.CSS2校驗 校驗網址：http://jigsaw.w3.org/css-validator/ 校驗方式:網址校驗、文件上傳校驗、直接貼入代碼校驗 校驗成功，會顯示"恭喜恭喜，此文檔已經通過樣式表校驗! "。 校驗失敗，會顯示兩類錯誤：錯誤和警告。錯誤表示一定要修正，否則無法通過校驗；警告表示有代碼不被W3C推薦,建議修改。 CSS2校驗常見錯誤原因對照表 (錯誤)無效數字 : color909090 不是一個 color 值 : 909090 ---十六進制顏色值必須加"#"號，即#909090 (錯誤)無效數字 : margin-topUnknown dimension : 6pixels ---pixels不是一個單位值，正確寫法6px (錯誤)屬性 scrollbar-face-color 不存在 : #eeeeee --- 定義滾動條顏色是非標準的屬性 (錯誤)值 cursorhand不存在 : hand是非標準屬性值，修改為cursor:pointer (警告)Line : 0 font-family: 建議你指定一個種類族科作為最后的選擇 --W3C建議字體定義的時候，最后以一個類別的字體結束，例如"sans-serif"，以保證在不同操作系統下，網頁字體都能被顯示。 (警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標準屬性或值，校驗程序無法判斷和提供相應的警告信息。 W3C標準測試網址 http://validator.w3.org/ W3C CSS 校驗網址 http://jigsaw.w3.org/css-validator/ 該文章在 2011/6/22 1:55:40 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
