網(wǎng)絡(luò)是個(gè)不斷發(fā)展變化的有機(jī)體，如何建設(shè)可以長(zhǎng)久適應(yīng)互聯(lián)網(wǎng)發(fā)展的頁(yè)面是很重要的，它可以是你的網(wǎng)站在互聯(lián)網(wǎng)發(fā)展的激流中迅速跟進(jìn)。

使用整潔的HTML標(biāo)記，構(gòu)建符合標(biāo)準(zhǔn)的頁(yè)面可以幫助你做到這些，更重要的，它可以是你在未來(lái)的運(yùn)營(yíng)中節(jié)省大量的時(shí)間和金錢。

網(wǎng)頁(yè)技術(shù)是跟隨互聯(lián)網(wǎng)技術(shù)的發(fā)展而進(jìn)步的，HTML技術(shù)已經(jīng)發(fā)展了很長(zhǎng)時(shí)間，它的伴生技術(shù)也已發(fā)展穩(wěn)定。

首先是Javascript，然后是CSS、XML，直到現(xiàn)在的AJAX，HTML5的大規(guī)模運(yùn)用也已初現(xiàn)端倪——Firefox、Safari、Opera和Chrome已經(jīng)基本完全支持HTML5（在這個(gè)問(wèn)題上，微軟的Internet Explorer再一次阻礙了互聯(lián)網(wǎng)的發(fā)展#-_-）

在這篇文章里，我們會(huì)探討基礎(chǔ)的web標(biāo)準(zhǔn)，討論它們是什么，他們有什么意義，以及這些重要但常被忽視的問(wèn)題的解決方法。

什么是“整潔”的HTML標(biāo)記？

簡(jiǎn)單來(lái)說(shuō)，“整潔”的HTML標(biāo)記指的是：沒(méi)有累贅，符合標(biāo)準(zhǔn)，使用有意義的標(biāo)簽和結(jié)構(gòu)。

沒(méi)有累贅的HTML代碼可以充分的利用標(biāo)簽，消除了不必要的代碼，僅保存有意義的標(biāo)記。它避免了無(wú)用的屬性，比如嵌入式CSS，保持了文檔結(jié)構(gòu)的整齊。

同樣的，沒(méi)有累贅的CSS代碼應(yīng)該避免自身的重復(fù)，使用可繼承的屬性(記住CSS的本意是層疊樣式表)，并且科學(xué)的重用CSS Class。

符合標(biāo)準(zhǔn)指的是你的頁(yè)面可以通過(guò)W3C的HTML、CSS、XML標(biāo)準(zhǔn)驗(yàn)證，使用免費(fèi)的W3C驗(yàn)證器，找出并修改錯(cuò)誤，繼續(xù)測(cè)試知道100%符合標(biāo)準(zhǔn)。

為什么要這樣？只要能正常顯示不就夠了嗎？

每個(gè)項(xiàng)目都有一個(gè)緊迫的時(shí)限，用戶希望網(wǎng)站越早發(fā)布越好。所以網(wǎng)站開(kāi)發(fā)和設(shè)計(jì)人員都被要求快速高效的完成工作。

人很容易陷入一種陷阱——快速就意味著草率，書(shū)寫(xiě)整潔、符合標(biāo)準(zhǔn)的代碼會(huì)浪費(fèi)時(shí)間。經(jīng)常有人說(shuō)：“它正常顯示了，就沒(méi)問(wèn)題了”。

雖然此時(shí)此刻它顯示了，但明年呢？三年以后呢？瀏覽器換代怎么辦？設(shè)備兼容嗎？

你真的以為搜索引擎會(huì)去一行一行的摳你的代碼嗎，它們是很挑剔的，如果你不使用標(biāo)準(zhǔn)化的代碼，就相當(dāng)于你自己趕跑了搜索引擎。

如果有其他的員工來(lái)修改你的代碼會(huì)怎樣，如果你被老板炒了，或者自己跳槽了會(huì)怎樣？會(huì)有繼任者來(lái)看你的代碼，理解它們的意思。你是想讓這件事變得簡(jiǎn)單，還是想讓他在背地里扎你的小人？

開(kāi)始正確的書(shū)寫(xiě)它吧，這并不是一項(xiàng)煩人的事情，它會(huì)節(jié)省你的時(shí)間和金錢，并且讓你少些后顧之憂。

你可能以為使用嵌入式CSS寫(xiě)頁(yè)面更快，你也可能覺(jué)得不考慮結(jié)構(gòu)直接書(shū)寫(xiě)HTML更方便。

但是當(dāng)你修改文檔或者將來(lái)你要改版網(wǎng)站的時(shí)候，你會(huì)花更多的時(shí)間來(lái)彌補(bǔ)劣質(zhì)代碼造成的干擾。如果你建立了新的樣式表，那分散在HTML代碼中的嵌入式CSS會(huì)給你帶來(lái)很大麻煩，你可能會(huì)花幾小時(shí)的時(shí)間來(lái)剝離他們。

可擴(kuò)展，設(shè)備友好，語(yǔ)義化和易升級(jí)

手機(jī)瀏覽器的發(fā)展越來(lái)越快，手機(jī)上網(wǎng)不再是黑莓的專利，現(xiàn)在每天有數(shù)以億計(jì)的人在使用手機(jī)瀏覽網(wǎng)頁(yè)。

具備為視力障礙人士開(kāi)發(fā)的輔助瀏覽技術(shù)或?yàn)橹w不方便的人設(shè)計(jì)的特殊操作界面的設(shè)備已經(jīng)很常見(jiàn)。如果你不想失去這么龐大的用戶群的話，就要考慮設(shè)備友好的問(wèn)題。

你的網(wǎng)站可能會(huì)被以盲文的形式提供給用戶，有了  互聯(lián)網(wǎng)內(nèi)容存儲(chǔ)、 Google快照等工具，你的網(wǎng)頁(yè)即使被刪除，也可能會(huì)在網(wǎng)絡(luò)上被保留很長(zhǎng)時(shí)間。

使用整潔、符合標(biāo)準(zhǔn)的標(biāo)記可以使你輕松應(yīng)對(duì)以上的情況。

Do和Don't ("要"和"不要")

DO - 使用預(yù)定義的標(biāo)簽。例如：h1是一個(gè)網(wǎng)頁(yè)內(nèi)容中最重要的部分，然后是h2,h3等等，一個(gè)網(wǎng)頁(yè)中只能有一個(gè)h1；

DO - 使用有意義的元素命名。問(wèn)問(wèn)自己如果別人來(lái)閱讀代碼的話，會(huì)不會(huì)明白你的class和ID的命名的意思，比如，同樣一個(gè)層，用#box12 還是#comment-footer，你覺(jué)得哪個(gè)更好些？

DO - 充分利用CSS的繼承性。例如：你在一個(gè)container中設(shè)置了字體屬性，那么你就不必在其子元素中再分別設(shè)置了，除非它用不同的字體。這會(huì)使你的樣式表明晰簡(jiǎn)潔。

DO - 讓你的HTML、CSS、XML代碼符合標(biāo)準(zhǔn)。使用W3C驗(yàn)證器驗(yàn)證錯(cuò)誤和警告，修改它們知道100%符合標(biāo)準(zhǔn)。

DO - 雙向檢查所見(jiàn)即所得編輯器產(chǎn)生的代碼。所見(jiàn)即所得瀏覽器是產(chǎn)生垃圾代碼的大頭，一定要盡量精簡(jiǎn)它產(chǎn)生的代碼。

DON'T - 不要使用嵌入式css樣式和無(wú)關(guān)的標(biāo)記和屬性。及時(shí)你很忙亂，也不要順手加這些東西。

DON'T - 不要滿足于“正確顯示”。因?yàn)殡[藏在頁(yè)面中的錯(cuò)誤可能會(huì)在其他瀏覽器或設(shè)備中把頁(yè)面毀的面目全非。