WEB標準

關於全球資訊網的網際網路標準

網頁標準（或Web標準）一般是指有關於全球資訊網各個方面的定義和說明的正式標準以及技術規範。這個術語也時常和一套建立網站的標準化的最佳實踐方法、網頁設計的原理、以及上述方法的衍生物連繫在一起。

目錄
1結構標準 可擴展標記 可擴展超文本 2表現標準 3行為標準 文檔對象模型 4代碼標準 必須結束標記
小寫元素 合理嵌套 屬性 特殊符號 所有屬性賦值 註釋 5標準測試 標準測試內容
使用說明 6標準的優點 對於訪問者 對於網站所有者 7標準的特點 8標準的誤區 通過校驗
傳統表格思維 每塊內容

結構標準

可擴展標記

WEB標準組成
WEB標準組成
可擴展標記語言（標準通用標記語言下的一個子集、外語縮寫：XML） 。和HTML一樣，XML同樣來源於標準通用標記語言，可擴展標記語言和標準通用標記語言都是能定義其他語言的語言。XML最初設計的目的是彌補HTML的不足，以強大的擴展性滿足網路信息發布的需要，後來逐漸用於網路數據的轉換和描述。

可擴展超文本

可擴展超文本標識語言（外語全稱：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中，你可以打開許多標籤，例如
和
  • 而不一定寫
    • 對應的
    和來關閉它們。但在XHTML中這是不合法的。XHTML要求有
    嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加
    一個"/"來關閉它。例如:

    網頁設計師
    src="../images/logo_w3cn_200x80.gif" width="200" />

    小寫元素

    與HTML不一樣，XHTML對大小寫是敏感的，和<<a target="_blank" href="/wiki/4ljrkerrjozw7jm.html" title="TITLE">TITLE</a>>是不</div><div class="cp">同的標籤。XHTML要求所有的標籤和屬性的名字都必須使用小寫。例如：</div><div class="cp"><BODY>必須寫成<body>。大小寫夾雜也是不被認可的，通常dreamweaver</div><div class="cp">自動生成的屬性名字"<a target="_blank" href="/wiki/zq4087vkr6vgq7.html" title="onMouseOver">onMouseOver</a>"也必須修改成"onmouseover"。</div><div class="catlog-title is-2"><h4>合理嵌套</h4><a id="catalog_4_3" class="title-anchor"></a></div><div class="cp">同樣因為XHTML要求有嚴謹的結構，因此所有的<a target="_blank" href="/wiki/xlxr6wmnn77ex00.html" title="嵌套">嵌套</a>都必須按順序，以</div><div class="cp">前我們這樣寫的代碼：</div><div class="cp"><div class="cp"><b></div>/b></div><div class="cp">必須修改為：</div><div class="cp"><div class="cp"><b></b></div></div><div class="cp">就是說，一層一層的嵌套必須是嚴格對稱。</div><div class="catlog-title is-2"><h4>屬性</h4><a id="catalog_4_4" class="title-anchor"></a></div><div class="cp">在HTML中，你可以不需要給屬性值加<a target="_blank" href="/wiki/v2o9m43v9nrnj8q.html" title="引號">引號</a>，但是在XHTML中，它們必須被加</div><div class="cp">引號。例如:</div><div class="cp"><height=80></div><div class="cp">必須修改為：</div><div class="cp"><height="80"></div><div class="cp">特殊情況，你需要在屬性值里使用<a target="_blank" href="/wiki/65lez5ykr37ml73.html" title="雙引號">雙引號</a>，你可以用"，<a target="_blank" href="/wiki/4z606jxokxjxz0.html" title="單引號">單引號</a>可以使用</div><div class="cp">'，例如：</div><div class="cp"><alt="say'hello'"></div><div class="catlog-title is-2"><h4>特殊符號</h4><a id="catalog_4_5" class="title-anchor"></a></div><div class="cp">任何小於號（<），不是標籤的一部分，都必須被編碼為& l t ;</div><div class="cp">任何大於號（>），不是標籤的一部分，都必須被編碼為& g t ;</div><div class="cp">任何與號（&），不是實體的一部分的，都必須被編碼為& a m p;</div><div class="cp">註：以上字元之間無空格。</div><div class="catlog-title is-2"><h4>所有屬性賦值</h4><a id="catalog_4_6" class="title-anchor"></a></div><div class="cp">XHTML規定所有屬性都必須有一個值，沒有值的就重複本身。例如：</div><div class="cp"><td nowrap> <input type="checkbox" name="shirt" value="medium"</div><div class="cp">checked></div><div class="cp">必須修改為：</div><div class="cp"><td nowrap="nowrap"> <input type="checkbox" name="shirt"</div><div class="cp">value="medium" checked="checked"></div><div class="catlog-title is-2"><h4>註釋</h4><a id="catalog_4_7" class="title-anchor"></a></div><div class="cp">“--”只能發生在XHTML註釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:</div><div class="cp"></div><div class="catlog-title is-1"><h3>標準測試</h3><a id="catalog_5" class="title-anchor"></a></div><hr class="border-1"><div class="catlog-title is-2"><h4>標準測試內容</h4><a id="catalog_5_1" class="title-anchor"></a></div><div class="cp">頁面校驗地址 http://validator.w3.org/</div><div class="cp">CSS文檔校驗 http://jigsaw.w3.org/css-validator/</div><div class="cp">XHTML 1.0 標準規格 : The Extensible HyperText Markup Language</div><div class="cp">W3C標準測試網址 http://validator.w3.org/</div><div class="cp">測試時一定要有文件類別宣告還有指定文件編碼</div><div class="cp"><meta http-equiv="Content-Type" content="text/html; <a target="_blank" href="/wiki/xex6o880q6jwl97.html" title="charset">charset</a>=gb2312" /></div><div class="cp">才能順利進行測試動作，開始打造一個標準的網站！</div><div class="catlog-title is-2"><h4>使用說明</h4><a id="catalog_5_2" class="title-anchor"></a></div><div class="cp">1.XHTML 1.0文件類別宣告的正確寫法 (不可小寫)</div><div class="cp">過度標準（外語全稱：Transitional）</div><div class="cp">公共標識符稱為： “-//W3C//DTD XHTML 1.0 Transitional//EN ”。</div><div class="cp"><!DOCTYPE html</div><div class="cp">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</div><div class="cp">></div><div class="cp">框架標準（外語全稱：Frameset）</div><div class="cp">公共標識符稱為： “-//W3C//DTD XHTML 1.0 Frameset//EN ”。</div><div class="cp"><!DOCTYPE html</div><div class="cp">PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"</div><div class="cp">></div><div class="cp">嚴格標準（外語全稱：Strict）包含以上須注意的問題，還有其他更嚴格的標準</div><div class="cp">公共標識符稱為： “-//W3C//DTD XHTML 1.0 Strict//EN ”。</div><div class="cp"><!DOCTYPE html</div><div class="cp">PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</div><div class="cp">></div><div class="cp">2.頭文件問題</div><div class="cp">所有的網頁頭文件都一律都改為標準形式，寫法如下：</div><div class="cp">3.不允許使用target="_blank"</div><div class="cp">在HTML4.01可以使用target="_blank",但XHTML1.0是不被允許的.</div><div class="cp">我使用了一個<a target="_blank" href="/wiki/0qgjl52mxg23g9w.html" title="HTML4">HTML4</a>.0的新屬性：rel，這個屬性用來說明鏈接和包含此鏈接頁面的關係，以及鏈接打開的目標。</div><div class="cp">原來這樣寫的代碼：打開一個新窗口</div><div class="cp">現在要寫成這樣：打開一個新窗口</div><div class="cp">這是符合strict標準的方法。當然還必須配合一個<a target="_blank" href="/wiki/3xvqg2vg2j42vmv.html" title="javascript">javascript</a>才有效。</div><div class="cp">javascript完整的代碼JS如下：</div><div class="cp">你可以把它保存成一個.js文件(比如外部鏈接.js)，然後通過外部聯接方法調用：</div><div class="cp"><<a target="_blank" href="/wiki/043o2rj5lr4ky8q.html" title="script">script</a> type="text/javascript" src="外部鏈接.js"></script></div><div class="cp">4.XHTML 1.0要求所有的標籤必須關閉</div><div class="cp">所有沒有成對的空標籤必須以 />結尾</div><div class="cp">和這就是成對</div><div class="cp">錯誤</div><div class="cp"><hr></div><div class="cp">正確</div><div class="cp"><hr /></div><div class="cp">錯誤 <input type="text" name="name"></div><div class="cp">正確 <input type="text" name="name" /></div><div class="cp">錯誤 <meta ...></div><div class="cp">正確 <meta ... /></div><div class="cp">錯誤 <link rel="stylesheet" type="text/css" href="style.css"></div><div class="cp">正確 <link rel="stylesheet" type="text/css" href="style.css" /></div><div class="cp">錯誤 <img src="bg.gif" border="0" alt="說明文字"></div><div class="cp">正確 <img src="bg.gif" border="0" alt="說明文字" /></div><div class="cp">5.所有標籤元素名稱都使用小寫</div><div class="cp">錯誤 <HTML> <TITLE> <HEAD> <BODY></div><div class="cp">正確 <html> <title> <head> <body></div><div class="cp">錯誤 <IMG SRC="BG.GIF" BORDER="0" ALT="說明文字"></div><div class="cp">正確 <img src="bg.gif" border="0" alt="說明文字" /></div><div class="cp">錯誤 <UL><LI></LI></UL></div><div class="cp">正確 <ul><li></li></ul></div><div class="cp">以上只是舉例，是"所有"標籤元素名稱都必須是小寫</div><div class="cp">6.同一個id選擇器不可重複使用</div><div class="cp">一個網頁中id="xx"同一個選擇器不能重複使用，若需要重複請用<a target="_blank" href="/wiki/4z89exlnm6y4glm.html" title="class">class</a>="xx"</div><div class="cp">7.標籤必須是一對</div><div class="cp">[font][/font]</div><div class="cp">8.正確的標籤順序</div><div class="cp">錯誤 文字</div><div class="cp">正確 文字</div><div class="cp">9.<a target="_blank" href="/wiki/3xvqg2vg2j42vmv.html" title="JavaScript">JavaScript</a>寫法</div><div class="cp">Javascript我們通常會寫為</div><div class="cp">錯誤 <script language="javascript"></div><div class="cp">W3C標準必須為程式指定類型type=text/javascript,所以要寫為</div><div class="cp">正確 <script type="text/javascript"></div><div class="cp">或者 <script language="javascript" type="text/javascript"></div><div class="cp">載入外部.js獨立檔案的寫法</div><div class="cp">正確 <script type="text/javascript" src="script.js"></script></div><div class="cp">10.絕對不可省略雙引號或單引號</div><div class="cp">錯誤 style=font-size:9pt</div><div class="cp">正確 style="font-size:9pt"</div><div class="cp">錯誤 <img src=bg.gif width=140 height=30 alt=text /></div><div class="cp">正確 <img src="bg.gif" width="140" height="30" alt="text" /></div><div class="cp">錯誤 text</div><div class="cp">正確 text</div><div class="cp">11.圖片標籤加上文字說明alt="說明"</div><div class="cp">錯誤 <img src="bg.gif" height="50" border="0" /></div><div class="cp">正確 <img src="bg.gif" height="50" border="0" alt="說明文字" /></div><div class="cp">12.背景音樂不允許使用 bgsound 標籤</div><div class="cp">我只好用JavaScript解決這個問題。javascript完整的代碼如下：</div><div class="cp"></div><div class="cp">你可以把它保存成一個.js文件(比如bjmusic.js)，然後通過外部聯接方法調用：</div><div class="cp"><script type="text/javascript" src="bjmusic.js"></script></div><div class="cp">13. 標籤的爭議</div><div class="cp"><embed>是Netscape的私有標籤,W3C 從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒有這個標籤，所以使用的頁面是不能通過標準測試。</div><div class="cp">W3C推薦使用 <object> 標籤，用<object>插入flash影片的代碼可以寫為:</div><div class="cp"><object type="application/x-shockwave-flash" data="index.swf" width="400" height="200"></div><div class="cp"></object></div><div class="cp">但這樣的寫法可能IE5/IE6 Win瀏覽器版本會出現問題。</div><div class="cp">標籤因為廣大的受到運用，不再標準範圍引起很大的爭議，想要解決這個問題，只能等<a target="_blank" href="/wiki/kknxy894em954r2.html" title="IE瀏覽器">IE瀏覽器</a>對<object>有更好的支持或者W3C願意收錄標籤。</div><div class="cp">14. 不允許使用框架標籤<<a target="_blank" href="/wiki/nwnee4q37jqv4x0.html" title="IFRAME">IFRAME</a>></div><div class="cp">這次又要用JavaScript解決問題了。javascript完整的代碼如下：</div><div class="cp">function ifr(url,w,h){document.write('<<a target="_blank" href="/wiki/nwnee4q37jqv4x0.html" title="iframe">iframe</a> id="ifr" name="ifr" width="'+w+'" height="'+h+'" border="0" frameborder="0" scrolling="no" src="'+url+'"></iframe>');}</div><div class="cp">把它保存成一個.js文件(比如<a target="_blank" href="/wiki/ml345jnlmrv986k.html" title="ifr">ifr</a>.js)，然後通過外部聯接方法調用：</div><div class="cp"><script type="text/javascript" src="ifr.js"></script></div><div class="cp">在你需要插入框架的地方寫以下代碼即可：</div><div class="cp"><script type="text/javascript">ifr('需插入的網頁地址','567','485');</script></div><div class="cp"><a target="_blank" href="/wiki/3lqo98lo4exjevv.html" title="函數">函數</a>ifr()使用說明：ifr('這裡寫地址','這裡寫寬度','這裡寫長度',)</div><div class="cp">15.<a target="_blank" href="/wiki/voy97woyrw6ln7q.html" title="google">google</a>廣告問題</div><div class="cp">google廣告的代碼是不符合W3C標準的，我只好又把它轉成<a target="_blank" href="/wiki/3xvqg2vg2j42vmv.html" title="JS">JS</a>調用，但GOOGLE政策里是寫著不允許修改代碼的，</div><div class="cp">關於這點我正在寫信給<a target="_blank" href="/wiki/voy97woyrw6ln7q.html" title="GOOGLE">GOOGLE</a>詢問中，應該很快會有答案。</div><div class="cp">我的JS文件(google.js)代碼如下：</div><div class="cp">document.writeln("<script type=\"text\/javascript\">");</div><div class="cp">document.writeln("<\/script>");</div><div class="cp">document.writeln("<script type=\"text\/javascript\"");</div><div class="cp">document.writeln(" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">");</div><div class="cp">document.writeln("<\/script>")</div><div class="cp">各位朋友可以按照自己的情況修改，網上也有把HTML代碼轉為JS代碼的地方。</div><div class="cp">最後在需要掛廣告的地方放入代碼 <script type="text/javascript" src="google.js"></script></div><div class="cp">其他需注意的地方：</div><div class="cp">16.註解文字不可包含--符號</div><div class="cp">錯誤 </div><div class="cp">正確 </div><div class="cp">17.正確使用CSS樣式表</div><div class="cp">一定要放在<head></head>之間</div><div class="cp"><link rel="stylesheet" type="text/css" href="style.css" /></div><div class="cp"><style type="text/css"></div><div class="cp"></div><div class="cp"></style></div><div class="cp">錯誤 <style></div><div class="cp">正確 <style type="text/css"></div><div class="cp">18.使用表格常犯的錯誤</div><div class="cp">我們在做表格通常會指定寬與高，例如:</div><div class="table-container"><table class="table is-bordered is-striped is-fullwidth"><tr><td>內容</td></tr></table></div><div class="cp">這樣做是沒有辦法通過,W3C建議使用CSS來控制標籤元素的高度</div><div class="cp">.table{</div><div class="cp">height:55px;</div><div class="cp">}</div><div class="table-container"><table class="table is-bordered is-striped is-fullwidth"><tr><td><a target="_blank" href="/wiki/k3jmx204wr00qmg.html" title="TEXT">TEXT</a></td></tr></table></div><div class="cp">但是若使用太多表格，在CSS一一指定不同高，也不是好方法</div><div class="cp">其實很簡單將高度height屬性指定在儲存格就可以了通過測試</div><div class="table-container"><table class="table is-bordered is-striped is-fullwidth"><tr><td>TEXT</td></tr></table></div><div class="cp">但這不是<a target="_blank" href="/wiki/4ooqrg43m957w4m.html" title="w3c">w3c</a>希望的標準，建議能夠使用div代替不必要的table</div><div class="cp">19.非標籤一部分的符號以編碼表示</div><div class="cp">表單內包含以下符號也必須用編碼表示</div><div class="cp">< 以 < 表示</div><div class="cp">> 以 > 表示</div><div class="cp">& 以 & 表示</div><div class="cp">程式中的連結 & 也要改用 &</div><div class="cp">錯誤 <a href="foo.cgi?chapter=1&ion=2"></div><div class="cp">正確 <a href="foo.cgi?chapter=1&ion=2"></div><div class="cp">20.所有屬性都必須有值</div><div class="cp">XHTML1.0規定所有屬性都必須有值，若沒有就必須重複屬性作為值</div><div class="cp">錯誤 <input type="radio" value="v1" checked name="s1" /></div><div class="cp">正確 <input type="radio" value="v1" checked="checked" name="s1" /></div><div class="cp">錯誤 <option selected>S1</option></div><div class="cp">正確 <option selected="selected">S1</option></div><div class="cp">錯誤</div><div class="cp">正確</div><div class="catlog-title is-1"><h3>標準的優點</h3><a id="catalog_6" class="title-anchor"></a></div><hr class="border-1"><div class="catlog-title is-2"><h4>對於訪問者</h4><a id="catalog_6_1" class="title-anchor"></a></div><div class="cp">● 文件下載與頁面顯示速度更快。</div><div class="cp">● 內容能被更多的用戶所訪問（包括失明、視弱、<a target="_blank" href="/wiki/3v5oxjwgw2k4xml.html" title="色盲">色盲</a>等殘障人士）。</div><div class="cp">● 內容能被更廣泛的設備所訪問（包括<a target="_blank" href="/wiki/j938q3owokxowvn.html" title="屏幕">屏幕</a>閱讀機、手持設備、搜索機器人、<a target="_blank" href="/wiki/n42322ex38y8jwk.html" title="印表機">印表機</a>、電冰箱等等）。</div><div class="cp">● 用戶能夠通過樣式選擇定製自己的表現界面。</div><div class="cp">● 所有頁面都能提供適於列印的版本。</div><div class="catlog-title is-2"><h4>對於網站所有者</h4><a id="catalog_6_2" class="title-anchor"></a></div><div class="cp">● 更少的代碼和組件，容易維護。</div><div class="cp">● 帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當 ESPN.com 使用 CSS改版后，每天節約超過兩兆位元組（terabytes）的帶寬。</div><div class="cp">● 更容易被搜尋引擎搜索到。</div><div class="cp">● 改版方便，不需要變動頁面內容。</div><div class="cp">● 提供列印版本而不需要複製內容。</div><div class="cp">● 提高網站易用性。在美國，有嚴格的法律條款（Section 508）來約束<a target="_blank" href="/wiki/vymk5w4nrj22x8v.html" title="政府網站">政府網站</a>必須達到一定的易用性，其他國家也有類似的要求。</div><div class="catlog-title is-1"><h3>標準的特點</h3><a id="catalog_7" class="title-anchor"></a></div><hr class="border-1"><div class="cp">符合WEB標準的網站應該主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的<a target="_blank" href="/wiki/777zyrrlrqjz8lx.html" title="網站標準">網站標準</a>也分三方面：結構化標準語言，主要包括XHTML和XML；表現標準語言主要包括CSS；行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C組織（什麼是W3C組織）起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。</div><div class="catlog-title is-1"><h3>標準的誤區</h3><a id="catalog_8" class="title-anchor"></a></div><hr class="border-1"><div class="catlog-title is-2"><h4>通過校驗</h4><a id="catalog_8_1" class="title-anchor"></a></div><div class="cp">web標準的本意是實現內容(結構)和表現分離，就是將樣式剝離出來放在單獨的<a target="_blank" href="/wiki/7welymewvy7v97n.html" title="css">css</a>文件中。這樣做的好處是可以分別處理內容和表現，也方便搜索和內容的再利用。</div><div class="cp">W3C校驗僅僅是幫助你檢查XHTML代碼的書寫是否規範，css的屬性是否都在CCS2的規範內。<a target="_blank" href="/wiki/5j5mknv4yg72l8.html" title="代碼">代碼</a>的標準化僅僅是第一步，不是說通過的校驗，我的網頁就標準化了。我們不是為了虛名，或者向別人炫耀：“看我的頁面通過了校驗”而去標準化，我們的目的是為了使自己的網頁設計工作更有效率，為了縮小網頁尺寸，為了能夠在任何瀏覽器和網路設備中正常瀏覽。</div><div class="cp">請大家沉下心來，仔細研究和理解web標準的內涵。網路上已經充滿了不必要的浮躁和虛榮，請不要將這種風氣帶到web標準應用中來，這樣做只會影響和損害web標準的推廣。</div><div class="catlog-title is-2"><h4>傳統表格思維</h4><a id="catalog_8_2" class="title-anchor"></a></div><div class="cp">“CSS布局就是將原來用table的地方用div來替代，原來是表格嵌套，現在是DIV嵌套。”這種觀點是錯誤的！</div><div class="cp">請跳出原來表格布局的禁錮，拋棄一個td接一個td放置圖片和內容的思維方式。我們上面說過web標準的目的是分離內容和表現，你可以這樣思考，頁面里有的僅僅是內容，沒有修飾的情況下，它看上去就是一張白白的頁面，上有一些文字和圖片(這個圖片是指內容中的圖片，是有真實意義的圖片)。這些文字圖片僅僅是依次羅列下來，只有結構，沒有任何樣式。然後加入表現，將所有修飾的圖片作為背景，用<a target="_blank" href="/wiki/7welymewvy7v97n.html" title="C SS">C SS</a>來定義每一塊內容的位置、字體、顏色等。</div><div class="cp">這樣製作的頁面才是內容與表現分離的，就是說，當你抽掉css文件，剩下的就是乾淨的內容。這樣才能在文本瀏覽器中閱讀，才能在手機、PDA中閱讀，才能隨時修改CSS實現改版。</div><div class="catlog-title is-2"><h4>每塊內容</h4><a id="catalog_8_3" class="title-anchor"></a></div><div class="cp">有網友抱怨css文件太大、太複雜。仔細看他們的代碼，發現原因是他們對每塊內容、甚至每句話都定義一個div，建立一個ID。這一方面是對<a target="_blank" href="/wiki/rz28roog306e8ge.html" title="樣式表">樣式表</a>應用的不熟悉，另一方面也表現出對web標準沒有徹底理解。</div><div class="cp">我們知道內容都是有結構的(如果不明白，請閱讀：[url=http://www.w3cn.org/article/tips/2004/43. html]理解表現和結構相分離 ),相同的結構的內容我們可以用同一個樣式來定義，比如相同級別的標題、正文、圖片。對於多次引用的樣式可以用class來定義，不需要每個都用id；另外也不是說一定要用，你完全可以用別的來代替，同樣都是塊級元素，一樣有盒模型的七個參數，僅僅方便浮動。</div><div class="cp">至於僅僅為了行高、間距、一個修飾圖片而增加額外的div，我想隨著對CSS的應用和理解，你很快就可以省略掉這些。我們反對用DIV的嵌套取代<a target="_blank" href="/wiki/lv4ey666mlwo924.html" title="table">table</a>的嵌套，這沒有任何意義，不能體現內容的結構化。希望大家多研究CSS，寫出最簡練，最有效的樣式表。</div><div class="cp">不要因為一點挫折就輕言放棄</div><div class="cp">我想這是一個態度和處事方法問題，這不僅僅針對學習web標準。學習任何新知識，接受新概念，都有困難，特別是需要你改變原來已有的習慣和思維時。唯一的問題就是：你認為學習web標準是否值得？你可以問問自己：你是否認可web標準帶來的這些好處(簡化代碼、加速開發、壓縮文件尺寸、提高下載速度、更好的易用性、獲得更多用戶、更易於維護、多平台兼容)？你是否覺得世界通用的XML離你還很遠？你是否認為現在掌握的HTML知識就已經足夠了？</div><div class="cp">自從99年以後，網頁製作技術在國內就沒有怎麼進步和變革過(除了<a target="_blank" href="/wiki/6lljxk05k2rnz4g.html" title="flash">flash</a>的興起)，而在國外前進的腳步就一直沒有停止過，xhtml1.0、xhtml1.1、xml、<a target="_blank" href="/wiki/80ovk4mx5n4y9z.html" title="xsl">xsl</a>...，W3C和各大軟體公司都在不斷的研究和推進web技術，使它更方便、更有效、更強大。web標準的應用和推廣國外已經開展了八年多(以zeldman的web標準組織網站為起點)，雖然困難重重，但正在逐步被人們接受和認可。為什麼我們依然陶醉在網站表面的“繁華”上，不去思考頁面背後本質的東西。</div><div class="cp">Web控制項</div><div class="cp">控制項本質上是具有圖形介面的組件，它能提供組件所提供的功能並提供用戶交互。</div><div class="cp">WEB控制項則是一種超越了HTML標記的控制項，功能更強大。</div><div style="clear: both"></div></div></div></div><div class="column is-narrow is-full-touch"><div class="sidebar"><div class="summary-albums"><a class="image" target="_blank" rel="noopener noreferrer nofollow" href="/album/re2vljzvjrkv830/pics.html"><img src="https: </a></div><div class="info-box"><div class="catlog-title is-2"><h4>基本信息</h4></div><div><dl><dt>中文名</dt><dd><div><span>WEB標準</span></div></dd></dl><dl><dt>定義</dt><dd><div><span>不是某一個標準，而是一系列標準的集合</span></div></dd></dl><dl><dt>類型</dt><dd><div><span><a target="_blank" href="/wiki/6y84n4wql6g2k6g.html" title="互聯網">互聯網</a></span></div></dd></dl><dl><dt>部分2</dt><dd><div><span>表現</span></div></dd></dl><dl><dt>部分3</dt><dd><div><span>行為</span></div></dd></dl><dl><dt>部分1</dt><dd><div><span>結構</span></div></dd></dl></div></div></div></div></div><ul id="fixbar"><li class="gotop"><span class="icon is-large"><i class="iconf i-dingbu"></i></span></li><li class="dir"><span class="icon is-medium"><i class="iconf i-dir"></i></span><span class="bar-font">目錄</span></li></ul></div></div><footer class="py-5 footer"><div class="container has-text-centered"><a target="_blank" rel="nofollow" href="/site/privacy">隱私條款</a><span> | </span><a target="_blank" rel="nofollow" href="/site/contact">聯絡我們</a></div></footer><div class="modal" id="dir-modal"><div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><p class="modal-card-title">目錄</p><button class="delete" aria-label="close"></button></header><section class="modal-card-body"></section></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script><script src="https://i1.twwiki.net/js/com.min.js?v=12"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-PQB6P4TLQ5"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-PQB6P4TLQ5');</script></body></html>