現(xiàn)今的互聯(lián)網(wǎng)領(lǐng)域,在用戶和web開發(fā)者的概念里,WEB標(biāo)準(zhǔn)這個(gè)詞正在變得越來越時(shí)髦。但是,WEB標(biāo)準(zhǔn)的概念過于籠統(tǒng),人們對WEB標(biāo)準(zhǔn)到底是什么和她所包含的一些東西有著各自不同的看法。在由中國E動(dòng)網(wǎng)贊助的“E動(dòng)杯”ShopEx模板大賽論壇上,參賽者和點(diǎn)評者就什么是WEB標(biāo)準(zhǔn)和模板代碼的“表現(xiàn)手法”發(fā)言踴躍,本文闡述了作者對于WEB標(biāo)準(zhǔn)的觀點(diǎn),以便大家了解通常意義上WEB標(biāo)準(zhǔn)所指代的概念。
并沒有所謂的“標(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),他們僅是提供建議,以他們自己的話來說:“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
•代碼語意清楚
•內(nèi)容(HTML/XHTML)表現(xiàn)(CSS)和交互(Javascript)相分離
對有些人來說,WEB標(biāo)準(zhǔn)意味著以上所有部分,而對于另一些人來說,可能只是其中一點(diǎn)。但最重要的是這三部分是構(gòu)建一個(gè)優(yōu)秀站點(diǎn)所不可或缺的。
有效的HTML/XHTML
讓我們從第一點(diǎn)開始,有效的代碼是WEB標(biāo)準(zhǔn)的第一步。對大多數(shù)人來說,有效僅意味著HTML/XHTML代碼,但不要忘了也有CSS的驗(yàn)證。驗(yàn)證你的HTML/XHTML代碼有效性基本上就是指你網(wǎng)頁上的代碼是否符合你選用的doctype。
選擇正確的doctype很重要,它決定了HTML/XHTML代碼該如何被解釋以及在不同瀏覽器中布局的差異。經(jīng)過驗(yàn)證后的代碼能夠很好的在不同瀏覽器中顯示,而不需要考慮太多瀏覽器的兼容性。通過驗(yàn)證你可能會(huì)發(fā)現(xiàn)潛在的影響頁面的代碼,修正他們以使開發(fā)過程更有效率,和降低日后維護(hù)的成本。
代碼驗(yàn)證工具
•W3C Markup Validation Service
•W3C CSS Validation Service
•WDG HTML Validator
•Firefox HTML Validator add-on
•Internet Explorer Developer Toolbar
代碼語意清楚
任何一個(gè)存在于頁面中的元素都應(yīng)該有它存在的意義并能準(zhǔn)確表意。簡單來說就是要根據(jù)上下文關(guān)系來選擇合適的元素。例子如下
這段代碼語意不清
| 以下為引用的內(nèi)容: <div class="page-heading">Title of the page</div> <a class="menu-item" href="/item-1">Menu item 1</a> |
同樣的表現(xiàn),語意就清楚多了
| 以下為引用的內(nèi)容: <h1>Title of the page</h1> <ul class="menu"> |
要使代碼語意清楚其實(shí)很簡單,用h1-h6來定義標(biāo)題,用p來定義文章段落,用ul,ol等來定義列表項(xiàng)等等。。。這會(huì)方便幫助你找到代碼中你想要的部分,并能顯著減少頁面加載時(shí)間,因?yàn)樗鼫p少了代碼量。而且,不要忘了,這對于SEO也很有幫助,清楚的語意能幫助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)過仔細(xì)斟酌。
分離的幾大原因
效能:外部文件比如css和js會(huì)在第一次加載后保存在用戶的緩存里,這就節(jié)省了以后的加載時(shí)間,提高了體驗(yàn)。
總體:你總能準(zhǔn)確的找到代碼并放置它們。
可用性:你總能方便的引用代碼,并能在整個(gè)網(wǎng)站的范圍內(nèi)重用它們。
維護(hù):所有有關(guān)表現(xiàn)和交互的代碼集中存放,方便維護(hù)。
如何更貼近用戶?
有人說要使網(wǎng)站變得更加貼近用戶需要耗費(fèi)更多額外時(shí)間,但其實(shí)只要你能做到文章中提到的三點(diǎn),你就已經(jīng)在更加貼近用戶的道路上前進(jìn)了一大步。
正確有效的代碼,會(huì)使你更方便的發(fā)現(xiàn)頁面中錯(cuò)誤的內(nèi)容。語意清楚的代碼能更好的支持手持設(shè)備,也能使網(wǎng)站在沒有CSS修飾的情況下更好的被用戶瀏覽。而結(jié)構(gòu)表現(xiàn)交互相分離使得網(wǎng)站在缺乏javascript支持的情況下仍能保持基本功能,當(dāng)然你可以通過增加javascript層來增進(jìn)站點(diǎn)的體驗(yàn),但這絕對不是一個(gè)網(wǎng)站賴以運(yùn)作的最基本的部分。
新聞熱點(diǎn)
疑難解答
圖片精選