关于W3C验证
學網站程序開發,必定要學到W3C標準,對于這個標準我也不知怎么說了,因為很多知名網站在W3C HTML驗證時都有Error!如百度:但又想想,人家是大公司,沒辦法,人家是制定標準的! 我們是使用標準的,所以做為一個小站長或者說一個程序員,還是要遵循的好!W3C HTML驗證工具:http://validator.w3.org/
W3C CSS? 驗證工具:http://jigsaw.w3.org/css-validator/
?
對于w3c測試做如下總結:1.代碼中除了XHTML?1.0 文件類別宣告 不可以小寫,其它代碼全部小寫2.?所有屬性值要用?雙引號或單引號引起來3. 所有標識都必須關閉?沒有成對的空標識以 /> 結束4. 所有IMG標識中必有 alt 屬性5. javascript 寫法一定要指定類型即寫成:? type="text/javascript"6. 非標識部分的符號以編碼表示:<?以?<?表 示??>?以?>?表示?
&?以?&?表示??
7.?一個頁面的?id 屬性不能重復8.? <a>, <span>, <font>.?內聯標簽里不能有 form, div, table 這樣的塊元素
9. 塊元素的 height , width 必須寫到style?內, 不可以直接使用
為了規范化,為了互聯網的規范化,以后再寫程序時要很注意這個問題,并按照標準寫程序!
大部分的站長和擁有網站的企業負責人都會知道,每當有瀏覽器發布大更新的時候,我們剛建立不久的網站就會發生無法預知的嚴重錯誤,我們只能重新 建立或改版網站,使其可以應歸新發布的瀏覽器。好比1996-1999年典型的瀏覽器戰爭,為了同時兼容Netscape和Microsoft Internet Explorer,各大站點不得不為這兩種瀏覽器寫不同的兼容代碼。同樣的,當有新的網絡技術或交互設備出現時,我們就需要開發一個新版本來支持新的技術 和設備,例如目前流行的手機瀏覽器瀏覽的WPA網頁。類似的問題還有很多:網頁代碼的錯亂、網頁頁面顯示偏差;針對各種瀏覽器的動態JS特效,忽略了部分 潛在用戶;移植性差的代碼,殘障人士無法順利瀏覽網站內容等。這都是技術上的重要環節,需要每一個網頁制作者去克服!
???? 如何的解決這些問題一直是國際萬維網聯盟需要考慮的。問題的根本就是我們需要建立一種普遍認可的技術標準來告別這種糟糕的境況。因此通過W3C(萬維網聯盟)的表決,網站HTML代碼標準開始建立,并在網站標準化組織的監督下推廣執行。
建立網站標準的目的就是:
1. 簡化HTML代碼,降低網站建設的成本;
2. 保證網站在長期互聯網環境中能有效;
3. 加強網站的兼容性,能適應不同的網絡設備和網絡終端。
遵循標準對瀏覽者的好處:
1. 瀏覽者可以根據需求定制自己想要的表現形式;
2. 網頁內容可以被更多的特殊人群所瀏覽(包括色盲、視弱等);
3. 網頁的加載速度會明顯提升;
4. 瀏覽者不必專門為一個網頁去下載另一個瀏覽器瀏覽,保持了網頁在各種瀏覽器中的兼容性;
5. 網頁有適用于打印的版本。
對站長和企業的好處:
1. 容易被搜索引擎所抓取;
2. 網絡帶寬要求下降,節省服務器成本;
3. 提高網站的可移植性,可擴展性,可塑性;
4. 客戶體驗上升,從而吸引更多用戶駐足您的網站,給您帶來更多的效益。
參考資料1:
網站要通過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: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& lt;/a>?
11.W3C標準規定圖片標識加上文字 說明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標準規定不允許使用框架標簽<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+’"& gt;</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{font-size:9pt;}?
-->?
</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& gt;?TEXT?</td></tr>?</table>?但若使用太多表格,在CSS一一指定不同高,也不是好 方法其實很簡單將高度height屬性指定在儲存格就可以了通過測試
<table?border="0"?width="300"& gt;?<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規定所有屬 性都必須有值,?若沒有就必須重復屬性作為值
錯 誤?<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">??
參考資料2:以下由 www.oogps.com站長整理:什么是W3C標準?W3C標準是什么意思?
目前W3C標準已經成為高端客戶設計網站的首選,我們知道國內上網者中,用IE瀏覽器的比較多,但從國內或全世界的上網客戶來看,有些客戶并不 是用IE來上網瀏覽內容的,他們會用 一些其它的瀏覽工具如: Netscape, Mozilla, FireFox,Opera等等,如果您的網站不是采用的w3c標準,使用其它瀏覽器的用戶,就無法看到您的網站。即:此標準是國際上的通用標準,符合此 標準的網站,能用任何瀏覽器來瀏覽您的網站。
首先我們要怎么W3C驗證的兩個網址:
W3C HTML 驗證工具:http://validator.w3.org/
W3C CSS驗證工具:http://jigsaw.w3.org/css-validator/
知道先上面兩個網址后,我們來先看W3C HTML 驗證,打開上面的網址后,輸入你的網址確定后,他就會提示你網址的N個錯誤。看到太多的錯誤。不用急一個一個來。
先來看看怎么讓統計代碼符合W3C標準,以CNZZ為例子,CNZZ默認的代碼是這樣的:<script src="http://s76.cnzz.com/stat.php?id=1384518&web_id=1384518" language="JavaScript" charset="gb2312"></script>
而W3C中的&要改成&才符合要求。別人不多講了。來看看下面要注意的W3C標準:
??????? 1、所有字母要小寫,要指定"type"類型,注意雙引號的使用
2、所有的 & 要全部替換成&
3、圖片img標簽必須要有alt 參數
4、換行必須使用 <br />
5、看看有沒有多了或者少了標簽。
6、引號一定要加上。
W3C HTML 驗證教程到此結束。
W3C CSS驗證有點難度,對于不太了解CSS的還是有點吃力,和上面一樣打開驗證網站輸入你的網址,這一步你可以點更多選項.選擇你想過的版本。一般CSS 3的更容易一點。下面講的是過CSS 2.1.
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
word-wrap: break-word;
像上面兩段代碼是通不過CSS2.1。這個要想辦法去掉。
還有就是CSS里面font-family:"宋體"; 宋體兩個字一定要加引號。等等類似這樣的問題。大家慢慢去改。一定可以過的。
上面HTML和CSS過w3c的共同點:
1、 確保所有的標簽都使用小寫字母
2、 確保所有的屬性值都放在引號里
3、 確保所有成對標簽出現的順序、不成對的標簽都用/>結束, ”/”和”>”之間不要有空格。
轉載于:https://www.cnblogs.com/see7di/archive/2011/06/18/2239720.html
總結
- 上一篇: 双宽带双路由搭建同一网段局域网
- 下一篇: html 手机语音聊天,华为手机打开这个