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

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

首先，你應(yīng)該了解實際上并不存在真正的WEB標(biāo)準(zhǔn)，真正存在的是一些推行標(biāo)準(zhǔn)化的組織，就像ISO standards，Ecma。當(dāng)大多數(shù)人提到WEB標(biāo)準(zhǔn)時，他們實際指的是W3C的一些東西。但W3C并不真正制定標(biāo)準(zhǔn)，他們僅是提供建議，以他們自己的話來說：“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)是由以下幾個部分組成的，

•有效的HTML/XHTML

•代碼語意清楚

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

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

有效的HTML/XHTML

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

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

代碼驗證工具

•W3C Markup Validation Service

•W3C CSS Validation Service

•WDG HTML Validator

•Firefox HTML Validator add-on

•Internet Explorer Developer Toolbar

代碼語意清楚

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

這段代碼語意不清

以下為引用的內(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)，語意就清楚多了

以下為引用的內(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>

要使代碼語意清楚其實很簡單，用h1-h6來定義標(biāo)題，用p來定義文章段落，用ul,ol等來定義列表項等等。。。這會方便幫助你找到代碼中你想要的部分，并能顯著減少頁面加載時間，因為它減少了代碼量。而且，不要忘了，這對于SEO也很有幫助，清楚的語意能幫助Google和其他搜索引擎更好的檢索你的站點。

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

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

分離的幾大原因

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

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

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

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

如何更貼近用戶？

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

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