暢談HTML開發

來源:互聯網
上載者:User

標籤:html   css   div   div+css   

如今,開啟瀏覽器,各種各樣的頁面能夠讓人眼花繚亂,對於行外人看到的是美觀效果是使用者體驗,對行內人更多的是關注技術和創造力。對於開發人員都知道DIV是一對html常用標籤,DIV+CSS是一對很誘人的組合,很多介面設計師通過軟體培訓班等學習這門手藝,當然自然很多是衝著會用了DIV+CSS製作網頁,常常會被人贊以大拇指的。現在提到DIV+CSS,還有很多人熱情高漲。接下來協助大家糾正下DIV+CSS的一些誤解。


1、DIV只是HTML最常用的標籤之一

顯然HTML並不只是一個DIV標籤有用,每個標籤都有它的用途,只是DIV是其中最有用的一個罷了。如果說你一個DIV就能統領天下,那麼W3C 還發布那麼多標籤做什麼呢。Table也不是一無是處,只是用table比較簡單、容易上手才在早期被人錯誤的廣泛推廣。但是table在處理網頁資料的表現上,是其他標籤無法替代的,只是,它不適合用來做整個頁面的布局。



2、代碼的可讀性

純DIV+CSS的網站的代碼的可讀性無疑是非常差的,甚至table還可以通過tr和td來區分行和列,一堆DIV堆砌在一起,如果沒有注釋,你根本不知道某個部分是做什麼用的。因此注釋是每個開發人員都必需要編輯的一個至關重要的環節。



3、語義化與結構化

W3C發布N多標籤,他們肯定有他們的好處,如果說你頁面全部是div,我想不管你是多數牛叉的人,你眼睛必花。現在,在開發CSS的時候,提的越來越多的是語義化,語義化歸根到底其實還是代碼的可讀性問題。語義化就是讓代碼更易讀,更加易懂,比如,.text_01{color:red} 就沒有.text_red{color:red} 容易理解。

HTML同樣如此,比如我們看到<ol>就知道這是個有序列表;看到<p>標籤就知道這是一個段落,內容為文字;看到<span>就知道這個是比<p>還小的文字單位;看到<h1>、<h2>之類的就知道他們是標題。顯然,全部是div的頁面,是看不出來這些的。

頁面的結構化亦是如此,比如<div><div><div><div>…..</div></div></div></div>這樣的代碼,顯然是很難理解其DOM結構的,但是<div><p><h2><span>…..</span></h2></p></div>就比上面的那個結構要清晰很多。相信做開發的人對代碼的語義化和結構化的理解會更加深刻。


 
4、團隊合作

可讀性低、結構化和語義化差,團隊的其他成員的學習和維護難度就會提高,這對於一個團隊來說,是很浪費時間和精力的。


 
綜合以上所述,DIV+CSS的說法,已經把我們從table帶到了另外的一個極端,正確的網頁設計不是一個標籤雄霸天下,而是每個元素都使用合適的標籤。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.