現(xiàn)今的互聯(lián)網(wǎng)領(lǐng)域，在用戶(hù)和web開(kāi)發(fā)者的概念里，WEB標(biāo)準(zhǔn)這個(gè)詞正在變得越來(lái)越時(shí)髦。但是，WEB標(biāo)準(zhǔn)的概念過(guò)于籠統(tǒng)，人們對(duì)WEB標(biāo)準(zhǔn)到底是什么和她所包含的一些東西有著各自不同的看法。在由中國(guó)E動(dòng)網(wǎng)贊助的“E動(dòng)杯”ShopEx模板大賽論壇上，參賽者和點(diǎn)評(píng)者就什么是WEB標(biāo)準(zhǔn)和模板代碼的“表現(xiàn)手法”發(fā)言踴躍，本文闡述了作者對(duì)于WEB標(biāo)準(zhǔn)的觀點(diǎn)，以便大家了解通常意義上WEB標(biāo)準(zhǔn)所指代的概念。

并沒(méi)有所謂的“標(biāo)準(zhǔn)”，有的只是建議

首先，你應(yīng)該了解實(shí)際上并不存在真正的WEB標(biāo)準(zhǔn)，真正存在的是一些推行標(biāo)準(zhǔn)化的組織，就像ISO standards，Ecma。當(dāng)大多數(shù)人提到WEB標(biāo)準(zhǔn)時(shí)，他們實(shí)際指的是W3C的一些東西。但W3C并不真正制定標(biāo)準(zhǔn)，他們僅是提供建議，以他們自己的話來(lái)說(shuō)：“A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.”

WEB標(biāo)準(zhǔn)的含義

一般情況下，WEB標(biāo)準(zhǔn)是由以下幾個(gè)部分組成的，

•有效的HTML/XHTML

•代碼語(yǔ)意清楚

•內(nèi)容(HTML/XHTML)表現(xiàn)(CSS)和交互(Javascript)相分離

對(duì)有些人來(lái)說(shuō)，WEB標(biāo)準(zhǔn)意味著以上所有部分，而對(duì)于另一些人來(lái)說(shuō)，可能只是其中一點(diǎn)。但最重要的是這三部分是構(gòu)建一個(gè)優(yōu)秀站點(diǎn)所不可或缺的。

有效的HTML/XHTML

讓我們從第一點(diǎn)開(kāi)始，有效的代碼是WEB標(biāo)準(zhǔn)的第一步。對(duì)大多數(shù)人來(lái)說(shuō)，有效僅意味著HTML/XHTML代碼，但不要忘了也有CSS的驗(yàn)證。驗(yàn)證你的HTML/XHTML代碼有效性基本上就是指你網(wǎng)頁(yè)上的代碼是否符合你選用的doctype。

選擇正確的doctype很重要，它決定了HTML/XHTML代碼該如何被解釋以及在不同瀏覽器中布局的差異。經(jīng)過(guò)驗(yàn)證后的代碼能夠很好的在不同瀏覽器中顯示，而不需要考慮太多瀏覽器的兼容性。通過(guò)驗(yàn)證你可能會(huì)發(fā)現(xiàn)潛在的影響頁(yè)面的代碼，修正他們以使開(kāi)發(fā)過(guò)程更有效率，和降低日后維護(hù)的成本。

代碼驗(yàn)證工具

•W3C Markup Validation Service

•W3C CSS Validation Service

•WDG HTML Validator

•Firefox HTML Validator add-on

•Internet Explorer Developer Toolbar

代碼語(yǔ)意清楚

任何一個(gè)存在于頁(yè)面中的元素都應(yīng)該有它存在的意義并能準(zhǔn)確表意。簡(jiǎn)單來(lái)說(shuō)就是要根據(jù)上下文關(guān)系來(lái)選擇合適的元素。例子如下

這段代碼語(yǔ)意不清

以下為引用的內(nèi)容： <div class="page-heading">Title of the page</div> <div class="text-paragraph"> Some text explaining what this web site is about, which is really a complete paragraph of text </div> <a class="menu-item" href="/item-1">Menu item 1</a> <a class="menu-item" href="/item-2">Menu item 2</a> <a class="menu-item" href="/item-3">Menu item 3</a>

同樣的表現(xiàn)，語(yǔ)意就清楚多了

以下為引用的內(nèi)容： <h1>Title of the page</h1> <p> Some text explaining what this web site is about, which is really a complete paragraph of text </p> <ul class="menu"> <li><a href="/item-1">Menu item 1</a></li> <li><a href="/item-2">Menu item 2</a></li> <li><a href="/item-3">Menu item 3</a></li> </ul>

要使代碼語(yǔ)意清楚其實(shí)很簡(jiǎn)單，用h1-h6來(lái)定義標(biāo)題，用p來(lái)定義文章段落，用ul,ol等來(lái)定義列表項(xiàng)等等。。。這會(huì)方便幫助你找到代碼中你想要的部分，并能顯著減少頁(yè)面加載時(shí)間，因?yàn)樗鼫p少了代碼量。而且，不要忘了，這對(duì)于SEO也很有幫助，清楚的語(yǔ)意能幫助Google和其他搜索引擎更好的檢索你的站點(diǎn)。

內(nèi)容(HTML/XHTML)表現(xiàn)(CSS)和交互(Javascript)相分離

有太多理由認(rèn)定將內(nèi)容(HTML/XHTML)表現(xiàn)(CSS)和交互(Javascript)相分離是至關(guān)重要的。他們有著各自不同的分工，如何合理的應(yīng)用他們需要經(jīng)過(guò)仔細(xì)斟酌。

分離的幾大原因

效能：外部文件比如css和js會(huì)在第一次加載后保存在用戶(hù)的緩存里，這就節(jié)省了以后的加載時(shí)間，提高了體驗(yàn)。

總體：你總能準(zhǔn)確的找到代碼并放置它們。

可用性：你總能方便的引用代碼，并能在整個(gè)網(wǎng)站的范圍內(nèi)重用它們。

維護(hù)：所有有關(guān)表現(xiàn)和交互的代碼集中存放，方便維護(hù)。

如何更貼近用戶(hù)？

有人說(shuō)要使網(wǎng)站變得更加貼近用戶(hù)需要耗費(fèi)更多額外時(shí)間，但其實(shí)只要你能做到文章中提到的三點(diǎn)，你就已經(jīng)在更加貼近用戶(hù)的道路上前進(jìn)了一大步。

正確有效的代碼，會(huì)使你更方便的發(fā)現(xiàn)頁(yè)面中錯(cuò)誤的內(nèi)容。語(yǔ)意清楚的代碼能更好的支持手持設(shè)備，也能使網(wǎng)站在沒(méi)有CSS修飾的情況下更好的被用戶(hù)瀏覽。而結(jié)構(gòu)表現(xiàn)交互相分離使得網(wǎng)站在缺乏javascript支持的情況下仍能保持基本功能，當(dāng)然你可以通過(guò)增加javascript層來(lái)增進(jìn)站點(diǎn)的體驗(yàn)，但這絕對(duì)不是一個(gè)網(wǎng)站賴(lài)以運(yùn)作的最基本的部分。