標(biāo)準(zhǔn)測試(shì)內容(róng)
頁麵(miàn)校(xiào)驗地址(zhǐ) http://validator.w3.org/
CSS文(wén)檔校驗 http://jigsaw.w3.org/css-validator/
XHTML 1.0 標(biāo)準規(guī)格 : The Extensible HyperText Markup Language
W3C標(biāo)準(zhǔn)測試網址 http://validator.w3.org/
測試時(shí)一(yī)定(dìng)要有(yǒu)文件類(lèi)別(bié)宣告還有指(zhǐ)定(dìng)文件編碼
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
才(cái)能順利進(jìn)行(háng)測試動(dòng)作，開始打造(zào)一個標準的(dí)網(wǎng)站！
W3C標準測(cè)試(shì)使用說(shuō)明(míng)
1.XHTML 1.0文(wén)件類(lèi)別宣(xuān)告的(dí)正確寫(xiě)法 (不(bù)可小寫)
過度標準(zhǔn)（外語(yǔ)全(quán)稱：Transitional）
公(gōng)共(gòng)標(biāo)識符(fú)[1] 稱為：“-//W3C//DTD XHTML 1.0 Transitional//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>
框(kuàng)架(jià)標準（外語全(quán)稱(chēng)：Frameset）
公(gōng)共標(biāo)識符(fú)[1] 稱為(wéi)：“-//W3C//DTD XHTML 1.0 Frameset//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
>
嚴格(gé)標準（外語全(quán)稱：Strict） 包含以(yǐ)上(shàng)須(xū)注意(yì)的問題,還(huán)有其他(tā)更(gēng)嚴(yán)格(gé)的標準(zhǔn)
公共標識符(fú)[1] 稱(chēng)為：“-//W3C//DTD XHTML 1.0 Strict//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>
2.頭文(wén)件問(wèn)題(tí)
所有的(dí)網頁頭(tóu)文件都(dū)一(yī)律(lǜ)都(dū)改(gǎi)為(wéi)標準(zhǔn)形(xíng)式，寫法(fǎ)如(rú)下：
<head>
<meta
http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="keywords" content="..." />
<meta name="description" content="..."/>
<title>...</title>
</head>
3.不允(yǔn)許(xǔ)使用(yòng)target="_blank"
在HTML4.01可以使用target="_blank",但XHTML1.0是不(bù)被允(yǔn)許的.
我使用(yòng)了一(yī)個HTML4.0的新(xīn)屬性(xìng)：rel，這(zhè)個(gè)屬性用來(lái)說(shuō)明鏈(liàn)接和包(bāo)含(hán)此鏈接頁麵的關係，以及鏈接打開的(dí)目(mù)標。
原來(lái)這樣(yàng)寫的(dí)代(dài)碼： 打(dǎ)開一(yī)個(gè)新窗(chuāng)口
現在(zài)要寫成(chéng)這樣：打開(kāi)一(yī)個新(xīn)窗口
這是符合strict標準(zhǔn)的方法。當然還必須(xū)配(pèi)合一個Javascript才有(yǒu)效。
javascript完(wán)整的(dí)代碼JS如下(xià)：
function 外部鏈接(jiē)()//萬國碼(mǎ)unicode javascript
{
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors;
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = 外(wài)部(bù)鏈(liàn)接;
你可(kě)以把(bǎ)它(tā)保(bǎo)存成(chéng)一個.js文件(比如外部(bù)鏈接.js)，然(rán)後通過外(wài)部聯接(jiē)方法調(tiáo)用(yòng)：
<script type="text/javascript" src="外部鏈接.js"></script>
4.XHTML 1.0要求所有(yǒu)的(dí)標簽(qiān)必須關閉
所有(yǒu)沒(méi)有成對(duì)的空標簽必(bì)須(xū)以 />結(jié)尾(wěi)
和這就是(shì)成對(duì)
錯誤
<hr>
正確(què)
<hr />
錯誤(wù) <input type="text" name="name">
正(zhèng)確(què) <input type="text" name="name" />
錯(cuò)誤 <meta ...>
正確 <meta ... />
錯(cuò)誤 <link rel="stylesheet" type="text/css" href="style.css">
正(zhèng)確 <link rel="stylesheet" type="text/css" href="style.css" />
錯誤 <img src="bg.gif" border="0" alt="說明文(wén)字(zì)">
正(zhèng)確 <img src="bg.gif" border="0" alt="說明文字(zì)" />
5.所(suǒ)有標(biāo)簽元素名稱都(dū)使用(yòng)小(xiǎo)寫
錯(cuò)誤(wù) <HTML> <TITLE> <HEAD> <BODY>
正(zhèng)確 <html> <title> <head> <body>
錯(cuò)誤(wù) <IMG SRC="BG.GIF" BORDER="0" ALT="說(shuō)明文(wén)字">
正(zhèng)確 <img src="bg.gif" border="0" alt="說(shuō)明文(wén)字(zì)" />
錯誤 <UL><LI></LI></UL>
正確 <ul><li></li></ul>
以上(shàng)隻是舉例(lì),是(shì)"所(suǒ)有(yǒu)"標簽元素(sù)名稱都必(bì)須(xū)是小(xiǎo)寫(xiě)
6.同一個id選擇(zé)器不可重復(fù)使用
一個(gè)網(wǎng)頁(yè)中id="xx"同(tóng)一(yī)個選擇器不(bù)能重復使用,若(ruò)需(xū)要(yào)重復(fù)請(qǐng)用class="xx"
7.標簽(qiān)必(bì)須(xū)是一對(duì)
[font][/font]
8.正確的標(biāo)簽(qiān)順序
錯(cuò)誤(wù)文字(zì)
正(zhèng)確文(wén)字(zì)
9.JavaScript寫法(fǎ)
Javascript我們(mén)通常會(huì)寫(xiě)為
錯(cuò)誤 <script language="javascript">
W3C標準必(bì)須(xū)為(wéi)程(chéng)式(shì)指(zhǐ)定類(lèi)型type=text/javascript,所(suǒ)以(yǐ)要寫為
正(zhèng)確 <script type="text/javascript">
或(huò)者 <script language="javascript" type="text/javascript">
載(zǎi)入外(wài)部.js獨(dú)立檔案(àn)的(dí)寫法(fǎ)
正確(què) <script type="text/javascript" src="script.js"></script>
10.絕(jué)對不可省(shěng)略(lüè)雙引號(hào)或單引號(hào)
錯(cuò)誤 style=font-size:9pt
正確 style="font-size:9pt"
錯誤 <img src=bg.gif width=140 height=30 alt=text />
正確(què) <img src="bg.gif" width="140" height="30" alt="text" />
錯(cuò)誤 text
正(zhèng)確 text
11.圖片標簽加上文(wén)字說(shuō)明alt="說明"
錯誤 <img src="bg.gif" height="50" border="0" />
正(zhèng)確 <img src="bg.gif" height="50" border="0" alt="說(shuō)明(míng)文(wén)字(zì)" />
12.背(bèi)景(jǐng)音樂不允(yǔn)許使(shǐ)用(yòng) bgsound 標(biāo)簽
我隻(zhī)好用JavaScript解(jiě)決這個(gè)問題。javascript完整(zhěng)的(dí)代(dài)碼如下：
<!-- 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=背(bèi)景(jǐng)音(yīn)樂(lè)地址 LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=背(bèi)景(jǐng)音樂(lè)地址 AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// end -->
你可以把它保存成一(yī)個.js文件(比如bjmusic.js)，然(rán)後(hòu)通過外部聯(lián)接方法調(tiáo)用：
<script type="text/javascript" src="bjmusic.js"></script>
13. 標簽(qiān)的爭議
<embed>是(shì)Netscape的(dí)私有標簽,W3C 從(cóng)HTML3.2 HTML 4.01 到(dào) XHTML 1.0 中都沒(méi)有(yǒu)這個(gè)標簽,所(suǒ)以(yǐ)使(shǐ)用(yòng)的(dí)頁麵是(shì)不能(néng)通過標準測(cè)試(shì)。
W3C推薦使用 <object> 標(biāo)簽,用<object>插(chā)入(rù)flash影片的代碼可(kě)以(yǐ)寫(xiě)為:
<object type="application/x-shockwave-flash" data="index.swf" width="400" height="200">
</object>
但這(zhè)樣(yàng)的寫法(fǎ)可(kě)能IE5/IE6 Win瀏(liú)覽器版(bǎn)本(běn)會出現問(wèn)題(tí)。
標(biāo)簽(qiān)因為(wéi)廣(guǎng)大(dà)的(dí)受到(dào)運用(yòng),不再(zài)標(biāo)準(zhǔn)範圍(wéi)引(yǐn)起很大的爭(zhēng)議，想要解(jiě)決這個(gè)問(wèn)題(tí)，隻能(néng)等(děng)IE瀏(liú)覽器(qì)對(duì)<object>有更(gēng)好(hǎo)的支(zhī)持或者W3C願(yuàn)意(yì)收錄標簽(qiān)。
14. 不允許(xǔ)使(shǐ)用(yòng)框架(jià)標簽<IFRAME>
這次又(yòu)要(yào)用(yòng)JavaScript解決問題了(liǎo)。javascript完(wán)整的(dí)代碼(mǎ)如(rú)下(xià)：
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>');}
把它保存(cún)成一(yī)個.js文件(jiàn)(比如ifr.js)，然後通(tōng)過外部(bù)聯(lián)接(jiē)方(fāng)法(fǎ)調用：
<script type="text/javascript" src="ifr.js"></script>
在你需(xū)要(yào)插入框架(jià)的地(dì)方寫以下(xià)代碼即可(kě)：
<script type="text/javascript">ifr('需插入的網頁(yè)地址','567','485');</script>
函(hán)數ifr()使用(yòng)說(shuō)明(míng)：ifr('這裏寫地址','這裏(lǐ)寫寬(kuān)度(dù)','這裏寫長(cháng)度(dù)',)
15.google廣告(gào)問題
google廣(guǎng)告的(dí)代(dài)碼是不(bù)符合W3C標準(zhǔn)的，我(wǒ)隻好又把它轉(zhuǎn)成JS調用，但GOOGLE政策裏(lǐ)是寫(xiě)著不(bù)允許(xǔ)修改代(dài)碼的，
關(guān)於這點(diǎn)我正在(zài)寫(xiě)信給GOOGLE詢(xún)問(wèn)中，應該很快(kuài)會有(yǒu)答案(àn)。
我的JS文件(google.js)代碼(mǎ)如(rú)下：
document.writeln("<script type=\"text\/javascript\"><!--");
document.writeln("google_ad_client = \"pub-5317\";");
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: www.ybj86.cn");
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èi)朋友(yǒu)可(kě)以按(àn)照自(zì)己的情(qíng)況(kuàng)修(xiū)改(gǎi)，網上也(yě)有(yǒu)把HTML代(dài)碼轉為(wéi)JS代(dài)碼(mǎ)的地(dì)方(fāng)。
最後(hòu)在需要(yào)掛廣(guǎng)告(gào)的(dí)地(dì)方放入(rù)代(dài)碼 <script type="text/javascript" src="google.js"></script>
其他需注意(yì)的地方(fāng)：
16.注解(jiě)文(wén)字不(bù)可(kě)包含(hán)--符號
錯(cuò)誤 <!-- OEC--SPACE -->
正(zhèng)確 <!-- OECSPACE -->
17.正確使用CSS樣式(shì)表
一(yī)定要放(fàng)在<head></head>之間(jiān)
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
body{font-size:9pt;}
-->
</style>
錯(cuò)誤 <style>
正(zhèng)確 <style type="text/css">
18.使(shǐ)用表格常(cháng)犯(fàn)的錯(cuò)誤(wù)
我(wǒ)們(mén)在做表(biǎo)格通常會指定寬與(yǔ)高(gāo),例(lì)如(rú):
內容(róng)
這(zhè)樣(yàng)做是沒有辦(bàn)法(fǎ)通過,W3C建(jiàn)議使(shǐ)用(yòng)CSS來(lái)控(kòng)製標簽(qiān)元素(sù)的高(gāo)度(dù)
.table{
height:55px;
}
TEXT
但是若(ruò)使用太多(duō)表格(gé),在(zài)CSS一(yī)一(yī)指定(dìng)不(bù)同(tóng)高(gāo),也不是(shì)好(hǎo)方法
其實(shí)很簡(jiǎn)單將(jiāng)高(gāo)度height屬(shǔ)性(xìng)指(zhǐ)定在儲(chǔ)存格就可以(yǐ)了通(tōng)過測試(shì)
TEXT
但(dàn)這不是w3c希望(wàng)的(dí)標(biāo)準,建議(yì)能夠使用div代(dài)替不(bù)必要的table
19.非標簽(qiān)一(yī)部分的符號以編(biān)碼表(biǎo)示
表單(dān)內(nèi)包(bāo)含(hán)以下(xià)符(fú)號也必(bì)須(xū)用(yòng)編碼表(biǎo)示(shì)
< 以(yǐ) < 表(biǎo)示
> 以 > 表(biǎo)示
& 以 & 表(biǎo)示
程(chéng)式(shì)中(zhōng)的(dí)連結 & 也要改用(yòng) &
錯(cuò)誤 <a href="foo.cgi?chapter=1&ion=2">
正確 <a href="foo.cgi?chapter=1&ion=2">
20.所(suǒ)有屬性都(dū)必須有值(zhí)
XHTML1.0規(guī)定所(suǒ)有屬(shǔ)性(xìng)都(dū)必(bì)須(xū)有值(zhí),若沒有(yǒu)就必須重(zhòng)復屬性(xìng)作(zuò)為(wéi)值(zhí)
錯(cuò)誤 <input type="radio" value="v1" checked name="s1" />
正確(què) <input type="radio" value="v1" checked="" name="s1" />
錯誤(wù) <option selected>S1</option>
正確 <option selected="selected">S1</option>
轉(zhuǎn)載請(qǐng)保留(liú)原(yuán)文地址(zhǐ): https://antelcom.cn/show-348.html