WEB標準-標準測試
分享
評論
贊0
標準測試內容
頁面校驗地址 http://validator.w3.org/
CSS文檔校驗 http://jigsaw.w3.org/css-validator/
XHTML 1.0 標準規格 : The Extensible HyperText Markup Language
W3C標準測試網址 http://validator.w3.org/
測試時一定要有文件類別宣告還有指定文件編碼
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
才能順利進行測試動作，開始打造一個標準的網站！
W3C標準測試使用說明
1.XHTML 1.0文件類別宣告的正確寫法 (不可小寫)
過度標準（外語全稱：Transitional）
公共標識符[1] 稱為：“-//W3C//DTD XHTML 1.0 Transitional//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>
框架標準（外語全稱：Frameset）
公共標識符[1] 稱為：“-//W3C//DTD XHTML 1.0 Frameset//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
>
嚴格標準（外語全稱：Strict） 包含以上須注意的問題,還有其他更嚴格的標準
公共標識符[1] 稱為：“-//W3C//DTD XHTML 1.0 Strict//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>
2.頭文件問題
所有的網頁頭文件都一律都改為標準形式，寫法如下：
<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是不被允許的.
我使用了一個HTML4.0的新屬性：rel，這個屬性用來說明鏈接和包含此鏈接頁面的關系，以及鏈接打開的目標。
原來這樣寫的代碼： 打開一個新窗口
現在要寫成這樣：打開一個新窗口
這是符合strict標準的方法。當然還必須配合一個javascript才有效。
javascript完整的代碼JS如下：
function 外部鏈接()//萬國碼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 = 外部鏈接;
你可以把它保存成一個.js文件(比如外部鏈接.js)，然后通過外部聯接方法調用：
<script type="text/javascript" src="外部鏈接.js"></script>
4.XHTML 1.0要求所有的標簽必須關閉
所有沒有成對的空標簽必須以 />結尾
和這就是成對
錯誤
<hr>
正確
<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.標簽必須是一對
[font][/font]
8.正確的標簽順序
錯誤文字
正確文字
9.JavaScript寫法
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" />
錯誤 text
正確 text
11.圖片標簽加上文字說明alt="說明"
錯誤 <img src="bg.gif" height="50" border="0" />
正確 <img src="bg.gif" height="50" border="0" alt="說明文字" />
12.背景音樂不允許使用 bgsound 標簽
我只好用JavaScript解決這個問題。javascript完整的代碼如下：
<!-- 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文件(比如bjmusic.js)，然后通過外部聯接方法調用：
<script type="text/javascript" src="bjmusic.js"></script>
13. 標簽的爭議
<embed>是Netscape的私有標簽,W3C 從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒有這個標簽,所以使用的頁面是不能通過標準測試。
W3C推薦使用 <object> 標簽,用<object>插入flash影片的代碼可以寫為:
<object type="application/x-shockwave-flash" data="index.swf" width="400" height="200">
</object>
但這樣的寫法可能IE5/IE6 Win瀏覽器版本會出現問題。
標簽因為廣大的受到運用,不再標準范圍引起很大的爭議，想要解決這個問題，只能等IE瀏覽器對<object>有更好的支持或者W3C愿意收錄標簽。
14. 不允許使用框架標簽<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文件(比如ifr.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政策里是寫著不允許修改代碼的，
關于這點我正在寫信給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: 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>")
各位朋友可以按照自己的情況修改，網上也有把HTML代碼轉為JS代碼的地方。
最后在需要掛廣告的地方放入代碼 <script type="text/javascript" src="google.js"></script>
其他需注意的地方：
16.注解文字不可包含--符號
錯誤 <!-- OEC--SPACE -->
正確 <!-- OECSPACE -->
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.使用表格常犯的錯誤
我們在做表格通常會指定寬與高,例如:
內容
這樣做是沒有辦法通過,W3C建議使用CSS來控制標簽元素的高度
.table{
height:55px;
}
TEXT
但是若使用太多表格,在CSS一一指定不同高,也不是好方法
其實很簡單將高度height屬性指定在儲存格就可以了通過測試
TEXT
但這不是w3c希望的標準,建議能夠使用div代替不必要的table
19.非標簽一部分的符號以編碼表示
表單內包含以下符號也必須用編碼表示
< 以 < 表示
> 以 > 表示
& 以 & 表示
程式中的連結 & 也要改用 &
錯誤 <a href="foo.cgi?chapter=1&ion=2">
正確 <a href="foo.cgi?chapter=1&ion=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>
猜你喜歡
評論(0人參與，0條評論)
發布評論
最新評論