DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 使用整潔的HTML標記構建頁面
使用整潔的HTML標記構建頁面
編輯:HTML和Xhtml     

網絡是個不斷發展變化的有機體,如何建設可以長久適應互聯網發展的頁面是很重要的,它可以是你的網站在互聯網發展的激流中迅速跟進。

使用整潔的HTML標記,構建符合標准的頁面可以幫助你做到這些,更重要的,它可以是你在未來的運營中節省大量的時間和金錢。

網頁技術是跟隨互聯網技術的發展而進步的,HTML技術已經發展了很長時間,它的伴生技術也已發展穩定。

首先是Javascript,然後是CSS、XML,直到現在的AJAX,HTML5的大規模運用也已初現端倪——Firefox、Safari、Opera和Chrome已經基本完全支持HTML5(在這個問題上,微軟的Internet Explorer再一次阻礙了互聯網的發展#-_-)

在這篇文章裡,我們會探討基礎的web標准,討論它們是什麼,他們有什麼意義,以及這些重要但常被忽視的問題的解決方法。


什麼是“整潔”的HTML標記?

簡單來說,“整潔”的HTML標記指的是:沒有累贅,符合標准,使用有意義的標簽和結構。

沒有累贅的HTML代碼可以充分的利用標簽,消除了不必要的代碼,僅保存有意義的標記。它避免了無用的屬性,比如嵌入式CSS,保持了文檔結構的整齊。

同樣的,沒有累贅的CSS代碼應該避免自身的重復,使用可繼承的屬性(記住CSS的本意是層疊樣式表),並且科學的重用CSS Class。

符合標准指的是你的頁面可以通過W3C的HTML、CSS、XML標准驗證,使用免費的W3C驗證器,找出並修改錯誤,繼續測試知道100%符合標准。


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

每個項目都有一個緊迫的時限,用戶希望網站越早發布越好。所以網站開發和設計人員都被要求快速高效的完成工作。

人很容易陷入一種陷阱——快速就意味著草率,書寫整潔、符合標准的代碼會浪費時間。經常有人說:“它正常顯示了,就沒問題了”。

雖然此時此刻它顯示了,但明年呢?三年以後呢?浏覽器換代怎麼辦?設備兼容嗎?

你真的以為搜索引擎會去一行一行的摳你的代碼嗎,它們是很挑剔的,如果你不使用標准化的代碼,就相當於你自己趕跑了搜索引擎。

如果有其他的員工來修改你的代碼會怎樣,如果你被老板炒了,或者自己跳槽了會怎樣?會有繼任者來看你的代碼,理解它們的意思。你是想讓這件事變得簡單,還是想讓他在背地裡扎你的小人?

開始正確的書寫它吧,這並不是一項煩人的事情,它會節省你的時間和金錢,並且讓你少些後顧之憂。

你可能以為使用嵌入式CSS寫頁面更快,你也可能覺得不考慮結構直接書寫HTML更方便。

但是當你修改文檔或者將來你要改版網站的時候,你會花更多的時間來彌補劣質代碼造成的干擾。如果你建立了新的樣式表,那分散在HTML代碼中的嵌入式CSS會給你帶來很大麻煩,你可能會花幾小時的時間來剝離他們。


可擴展,設備友好,語義化和易升級

手機浏覽器的發展越來越快,手機上網不再是黑莓的專利,現在每天有數以億計的人在使用手機浏覽網頁。

具備為視力障礙人士開發的輔助浏覽技術或為肢體不方便的人設計的特殊操作界面的設備已經很常見。如果你不想失去這麼龐大的用戶群的話,就要考慮設備友好的問題。

你的網站可能會被以盲文的形式提供給用戶,有了  互聯網內容存儲Google快照等工具,你的網頁即使被刪除,也可能會在網絡上被保留很長時間。

使用整潔、符合標准的標記可以使你輕松應對以上的情況。


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

DO - 使用預定義的標簽。例如:h1是一個網頁內容中最重要的部分,然後是h2,h3等等,一個網頁中只能有一個h1;

DO - 使用有意義的元素命名。問問自己如果別人來閱讀代碼的話,會不會明白你的class和ID的命名的意思,比如,同樣一個層,用#box12 還是#comment-footer,你覺得哪個更好些?

DO - 充分利用CSS的繼承性。例如:你在一個container中設置了字體屬性,那麼你就不必在其子元素中再分別設置了,除非它用不同的字體。這會使你的樣式表明晰簡潔。

DO - 讓你的HTML、CSS、XML代碼符合標准。使用W3C驗證器驗證錯誤和警告,修改它們知道100%符合標准。

DO - 雙向檢查所見即所得編輯器產生的代碼。所見即所得浏覽器是產生垃圾代碼的大頭,一定要盡量精簡它產生的代碼。

DON'T - 不要使用嵌入式css樣式和無關的標記和屬性。及時你很忙亂,也不要順手加這些東西。

DON'T - 不要滿足於“正確顯示”。因為隱藏在頁面中的錯誤可能會在其他浏覽器或設備中把頁面毀的面目全非。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved