基本介紹
- 中文名：WEB標準
- 部分1：結構
- 部分2：表現
- 部分3：行為
結構標準,可擴展標記,可擴展超文本,表現標準,行為標準,文檔對象模型,代碼標準,必須結束標記,小寫元素,合理嵌套,屬性括起來,特殊符號,所有屬性賦值,在注釋中,標準測試,標準測試內容,使用說明,優點,對於訪問者,對於網站所有者,特點,誤區,通過校驗,傳統表格思維,每塊內容,
結構標準
可擴展標記
可擴展標記語言（標準通用標記語言下的一個子集、外語縮寫：XML）。和HTML一樣，XML同樣來源於標準通用標記語言，可擴展標記語言和標準通用標記語言都是能定義其他語言的語言。XML最初設計的目的是彌補HTML的不足，以強大的擴展性滿足網路信息發布的需要，後來逐漸用於網路數據的轉換和描述。
WEB標準組成
WEB標準組成可擴展超文本
可擴展超文本標識語言（外語全稱：The Extensible HyperText Markup Language、外語縮寫：XHTML）。目前推薦遵循的是W3C於2000年1月26日推薦XML1.0。XML雖然數據轉換能力強大，完全可以替代HTML，但面對成千上萬已有的站點，直接採用XML還為時過早。因此，我們在HTML4.0的基礎上，用XML的規則對其進行擴展，得到了XHTML。簡單的說，建立XHTML的目的就是實現HTML向XML的過渡。
表現標準
一、層疊樣式表（外語縮寫：CSS）。目前推薦遵循的是全球資訊網聯盟（外語縮寫：W3C）於1998年5月12日推薦CSS2。W3C創建CSS標準的目的是以CSS取代HTML表格式布局、幀和其他表現的語言。純CSS布局與結構式XHTML相結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。
行為標準
文檔對象模型
文檔對象模型（外語全稱：Document Object Model、外語縮寫：DOM）。根據W3C DOM規範（http://www.w3.org/DOM/），DOM是一種與瀏覽器，平台，語言的接口，使得你可以訪問頁面其他的標準組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對象。
ECMAScript是ECMA(European Computer Manufacturers Association)制定的標準腳本語言（JavaScript）。目前推薦遵循的是ECMAScript 262
代碼標準
必須結束標記
以前在HTML中，你可以打開許多標籤，例如<p>和<li>而不一定寫
對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有
嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加
一個"/"來關閉它。例如:
<br /><img height="80" alt="網頁設計師"
src="../images/logo_w3cn_200x80.gif" width="200" />
小寫元素
與HTML不一樣，XHTML對大小寫是敏感的，<title>和<TITLE>是不
同的標籤。XHTML要求所有的標籤和屬性的名字都必須使用小寫。例如：
<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常dreamweaver
自動生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。
合理嵌套
同樣因為XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序，以
前我們這樣寫的代碼：
<p><b></p>/b>
必須修改為：
<p><b></b></p>
就是說，一層一層的嵌套必須是嚴格對稱。
屬性括起來
在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加
引號。例如:
<height=80>
必須修改為：
<height="80">
特殊情況，你需要在屬性值里使用雙引號，你可以用"，單引號可以使用
'，例如：
<alt="say'hello'">
特殊符號
任何小於號（<），不是標籤的一部分，都必須被編碼為& l t ;
任何大於號（>），不是標籤的一部分，都必須被編碼為& g t ;
任何與號（&），不是實體的一部分的，都必須被編碼為& a m p;
註：以上字元之間無空格。
所有屬性賦值
XHTML規定所有屬性都必須有一個值，沒有值的就重複本身。例如：
<td nowrap> <input type="checkbox" name="shirt" value="medium"
checked>
必須修改為：
<td nowrap="nowrap"> <input type="checkbox" name="shirt"
value="medium" checked="checked">
在注釋中
“--”只能發生在XHTML注釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:
<!--這裡是注釋-----------這裡是注釋-->
標準測試
標準測試內容
頁面校驗地址 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" />
才能順利進行測試動作，開始打造一個標準的網站！
使用說明
1.XHTML 1.0檔案類別宣告的正確寫法 (不可小寫)
過度標準（外語全稱：Transitional）
公共標識符稱為：“-//W3C//DTD XHTML 1.0 Transitional//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>
框架標準（外語全稱：Frameset）
公共標識符稱為：“-//W3C//DTD XHTML 1.0 Frameset//EN”。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
>
嚴格標準（外語全稱：Strict） 包含以上須注意的問題,還有其他更嚴格的標準
公共標識符稱為：“-//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>
錯誤
正確
優點
對於訪問者
● 檔案下載與頁面顯示速度更快。
● 內容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）。
● 內容能被更廣泛的設備所訪問（包括螢幕閱讀機、手持設備、搜尋機器人、印表機、電冰櫃等等）。
● 用戶能夠通過樣式選擇定製自己的表現界面。
● 所有頁面都能提供適於列印的版本。
對於網站所有者
● 更少的代碼和組件，容易維護。
● 頻寬要求降低（代碼更簡潔），成本降低。舉個例子：當 ESPN.com 使用 CSS改版後，每天節約超過兩兆位元組（terabytes）的頻寬。
● 更容易被搜尋引擎搜尋到。
● 改版方便，不需要變動頁面內容。
● 提供列印版本而不需要複製內容。
● 提高網站易用性。在美國，有嚴格的法律條款（Section 508）來約束政府網站必須達到一定的易用性，其他國家也有類似的要求。
特點
符合WEB標準的網站應該主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的網站標準也分三方面：結構化標準語言，主要包括XHTML和XML；表現標準語言主要包括CSS；行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C組織（什麼是W3C組織）起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。
誤區
通過校驗
web標準的本意是實現內容(結構)和表現分離，就是將樣式剝離出來放在單獨的css檔案中。這樣做的好處是可以分別處理內容和表現，也方便搜尋和內容的再利用。
W3C校驗僅僅是幫助你檢查XHTML代碼的書寫是否規範，css的屬性是否都在CCS2的規範內。代碼的標準化僅僅是第一步，不是說通過的校驗，我的網頁就標準化了。我們不是為了虛名，或者向別人炫耀：“看我的頁面通過了校驗”而去標準化，我們的目的是為了使自己的網頁設計工作更有效率，為了縮小網頁尺寸，為了能夠在任何瀏覽器和網路設備中正常瀏覽。
請大家沉下心來，仔細研究和理解web標準的內涵。網路上已經充滿了不必要的浮躁和虛榮，請不要將這種風氣帶到web標準套用中來，這樣做只會影響和損害web標準的推廣。
傳統表格思維
“CSS布局就是將原來用table的地方用div來替代，原來是表格嵌套，現在是DIV嵌套。”這種觀點是錯誤的！
請跳出原來表格布局的禁錮，拋棄一個td接一個td放置圖片和內容的思維方式。我們上面說過web標準的目的是分離內容和表現，你可以這樣思考，頁面里有的僅僅是內容，沒有修飾的情況下，它看上去就是一張白白的頁面，上有一些文字和圖片(這個圖片是指內容中的圖片，是有真實意義的圖片)。這些文字圖片僅僅是依次羅列下來，只有結構，沒有任何樣式。然後加入表現，將所有修飾的圖片作為背景，用C SS來定義每一塊內容的位置、字型、顏色等。
這樣製作的頁面才是內容與表現分離的，就是說，當你抽掉css檔案，剩下的就是乾淨的內容。這樣才能在文本瀏覽器中閱讀，才能在手機、PDA中閱讀，才能隨時修改CSS實現改版。
每塊內容
有網友抱怨css檔案太大、太複雜。仔細看他們的代碼，發現原因是他們對每塊內容、甚至每句話都定義一個div，建立一個ID。這一方面是對樣式表套用的不熟悉，另一方面也表現出對web標準沒有徹底理解。
我們知道內容都是有結構的(如果不明白，請閱讀：[url=http://www.w3cn.org/article/tips/2004/43. html]理解表現和結構相分離 ),相同的結構的內容我們可以用同一個樣式來定義，比如相同級別的標題、正文、圖片。對於多次引用的樣式可以用class來定義，不需要每個都用id；另外也不是說一定要用，你完全可以用別的來代替，同樣都是塊級元素，一樣有盒模型的七個參數，僅僅方便浮動。
至於僅僅為了行高、間距、一個修飾圖片而增加額外的div，我想隨著對CSS的套用和理解，你很快就可以省略掉這些。我們反對用DIV的嵌套取代table的嵌套，這沒有任何意義，不能體現內容的結構化。希望大家多研究CSS，寫出最簡練，最有效的樣式表。
不要因為一點挫折就輕言放棄
我想這是一個態度和處事方法問題，這不僅僅針對學習web標準。學習任何新知識，接受新概念，都有困難，特別是需要你改變原來已有的習慣和思維時。唯一的問題就是：你認為學習web標準是否值得？你可以問問自己：你是否認可web標準帶來的這些好處(簡化代碼、加速開發、壓縮檔案尺寸、提高下載速度、更好的易用性、獲得更多用戶、更易於維護、多平台兼容)？你是否覺得世界通用的XML離你還很遠？你是否認為現在掌握的HTML知識就已經足夠了？
自從99年以後，網頁製作技術在國內就沒有怎么進步和變革過(除了flash的興起)，而在國外前進的腳步就一直沒有停止過，xhtml1.0、xhtml1.1、xml、xsl...，W3C和各大軟體公司都在不斷的研究和推進web技術，使它更方便、更有效、更強大。web標準的套用和推廣國外已經開展了八年多(以zeldman的web標準組織網站為起點)，雖然困難重重，但正在逐步被人們接受和認可。為什麼我們依然陶醉在網站表面的“繁華”上，不去思考頁面背後本質的東西。
Web控制項
控制項本質上是具有圖形接口的組件，它能提供組件所提供的功能並提供用戶互動。
WEB控制項則是一種超越了HTML標記的控制項，功能更強大。
