簡介 網(wǎng)絡(luò)是個不斷發(fā)展變化的有機體,如何建設(shè)可以長久適應(yīng)互聯(lián)網(wǎng)發(fā)展的頁面是很重要的,它可以是你的網(wǎng)站在互聯(lián)網(wǎng)發(fā)展的激流中迅速跟進。 使用整潔的HTML標(biāo)記,構(gòu)建符合標(biāo)準(zhǔn)的頁面可以幫助你做到這些,更重要的,它可以是你在未來的運營中節(jié)省大量的時間和金錢。 |
網(wǎng)絡(luò)是個不斷發(fā)展變化的有機體,如何建設(shè)可以長久適應(yīng)互聯(lián)網(wǎng)發(fā)展的頁面是很重要的,它可以是你的網(wǎng)站在互聯(lián)網(wǎng)發(fā)展的激流中迅速跟進。
使用整潔的HTML標(biāo)記,構(gòu)建符合標(biāo)準(zhǔn)的頁面可以幫助你做到這些,更重要的,它可以是你在未來的運營中節(jié)省大量的時間和金錢。
網(wǎng)頁技術(shù)是跟隨互聯(lián)網(wǎng)技術(shù)的發(fā)展而進步的,HTML技術(shù)已經(jīng)發(fā)展了很長時間,它的伴生技術(shù)也已發(fā)展穩(wěn)定。
首先是Javascript,然后是CSS、XML,直到現(xiàn)在的AJAX,HTML5的大規(guī)模運用也已初現(xiàn)端倪——Firefox、Safari、 Opera和Chrome已經(jīng)基本完全支持HTML5.
在這篇文章里,我們會探討基礎(chǔ)的web標(biāo)準(zhǔn),討論它們是什么,他們有什么意義,以及這些重要但常被忽視的問題的解決方法。
什么是“整潔”的HTML標(biāo)記?
簡單來說,“整潔”的HTML標(biāo)記指的是:沒有累贅,符合標(biāo)準(zhǔn),使用有意義的標(biāo)簽和結(jié)構(gòu)。
沒有累贅的HTML代碼可以充分的利用標(biāo)簽,消除了不必要的代碼,僅保存有意義的標(biāo)記。它避免了無用的屬性,比如嵌入式CSS,保持了文檔結(jié)構(gòu)的整齊。
同樣的,沒有累贅的CSS代碼應(yīng)該避免自身的重復(fù),使用可繼承的屬性(記住CSS的本意是層疊樣式表),并且科學(xué)的重用CSS Class。
符合標(biāo)準(zhǔn)指的是你的頁面可以通過W3C的HTML、CSS、XML標(biāo)準(zhǔn)驗證,使用免費的W3C驗證器,找出并修改錯誤,繼續(xù)測試知道100%符合標(biāo)準(zhǔn)。
為什么要這樣?只要能正常顯示不就夠了嗎?
每個項目都有一個緊迫的時限,用戶希望網(wǎng)站越早發(fā)布越好。所以網(wǎng)站開發(fā)和設(shè)計人員都被要求快速高效的完成工作。
人很容易陷入一種陷阱——快速就意味著草率,書寫整潔、符合標(biāo)準(zhǔn)的代碼會浪費時間。經(jīng)常有人說:“它正常顯示了,就沒問題了”。
雖然此時此刻它顯示了,但明年呢?三年以后呢?瀏覽器換代怎么辦?設(shè)備兼容嗎?
你真的以為搜索引擎會去一行一行的摳你的代碼嗎,它們是很挑剔的,如果你不使用標(biāo)準(zhǔn)化的代碼,就相當(dāng)于你自己趕跑了搜索引擎。
如果有其他的員工來修改你的代碼會怎樣,如果你被老板炒了,或者自己跳槽了會怎樣?會有繼任者來看你的代碼,理解它們的意思。你是想讓這件事變得簡單,還是想讓他在背地里扎你的小人?
開始正確的書寫它吧,這并不是一項煩人的事情,它會節(jié)省你的時間和金錢,并且讓你少些后顧之憂。
你可能以為使用嵌入式CSS寫頁面更快,你也可能覺得不考慮結(jié)構(gòu)直接書寫HTML更方便。
但是當(dāng)你修改文檔或者將來你要改版網(wǎng)站的時候,你會花更多的時間來彌補劣質(zhì)代碼造成的干擾。如果你建立了新的樣式表,那分散在HTML代碼中的嵌入式CSS會給你帶來很大麻煩,你可能會花幾小時的時間來剝離他們。
可擴展,設(shè)備友好,語義化和易升級
手機瀏覽器的發(fā)展越來越快,手機上網(wǎng)不再是黑莓的專利,現(xiàn)在每天有數(shù)以億計的人在使用手機瀏覽網(wǎng)頁。
具備為視力障礙人士開發(fā)的輔助瀏覽技術(shù)或為肢體不方便的人設(shè)計的特殊操作界面的設(shè)備已經(jīng)很常見。如果你不想失去這么龐大的用戶群的話,就要考慮設(shè)備友好的問題。
你的網(wǎng)站可能會被以盲文的形式提供給用戶,有了 互聯(lián)網(wǎng)內(nèi)容存儲、 Google快照等工具,你的網(wǎng)頁即使被刪除,也可能會在網(wǎng)絡(luò)上被保留很長時間。
使用整潔、符合標(biāo)準(zhǔn)的標(biāo)記可以使你輕松應(yīng)對以上的情況。
Do和Don't ("要"和"不要")
DO - 使用預(yù)定義的標(biāo)簽。例如:h1是一個網(wǎng)頁內(nèi)容中最重要的部分,然后是h2,h3等等,一個網(wǎng)頁中只能有一個h1;
DO - 使用有意義的元素命名。問問自己如果別人來閱讀代碼的話,會不會明白你的class和ID的命名的意思,比如,同樣一個層,用#box12 還是#comment-footer,你覺得哪個更好些?
DO - 充分利用CSS的繼承性。例如:你在一個container中設(shè)置了字體屬性,那么你就不必在其子元素中再分別設(shè)置了,除非它用不同的字體。這會使你的樣式表明晰簡潔。
DO - 讓你的HTML、CSS、XML代碼符合標(biāo)準(zhǔn)。使用W3C驗證器驗證錯誤和警告,修改它們知道100%符合標(biāo)準(zhǔn)。
DO - 反復(fù)檢查所見即所得編輯器產(chǎn)生的代碼。所見即所得瀏覽器是產(chǎn)生垃圾代碼的大頭,一定要盡量精簡它產(chǎn)生的代碼。
DON'T - 不要使用嵌入式css樣式和無關(guān)的標(biāo)記和屬性。即使你很忙亂,也不要順手加這些東西。
DON'T - 不要滿足于“正確顯示”。因為隱藏在頁面中的錯誤可能會在其他瀏覽器或設(shè)備中把頁面毀的面目全非。