HTML文檔結(jié)構(gòu)對(duì)Div+CSS布局的意義

2020-03-24 17:01:04

字體：大中小

供稿：網(wǎng)友

選擇合適的、有意義的元素去描述你的內(nèi)容，確保您所選擇的是富有語義的類html' target='_blank'>class和id特征值，以合適的標(biāo)簽來組織編寫HTML文檔，建立具有良好語義的結(jié)構(gòu)。相關(guān)精彩文章用CSS控制瀏覽器滾動(dòng)條樣式源代碼 [專題]谷歌瀏覽器:Google Chrome 主要就是我對(duì)結(jié)構(gòu)和開發(fā)效率之間的矛盾的一個(gè)思考，css框架怎樣才能不破環(huán)結(jié)構(gòu)的一個(gè)疑問。而且對(duì)于結(jié)構(gòu)和效率我的觀點(diǎn)就是“擁有合理的結(jié)構(gòu)，才是你web標(biāo)準(zhǔn)化的根本動(dòng)機(jī)”，web是承載信息的，沒有理由為了視覺效果，而破壞合理的結(jié)構(gòu)。 Web標(biāo)準(zhǔn)的要把握幾點(diǎn)：使用結(jié)構(gòu)化，語義化的標(biāo)簽使用CSS分離出（X）HTML文檔中的表現(xiàn)元素依靠Javascript去增強(qiáng)，而不是替代，網(wǎng)站的特征（舉個(gè)例子就是如果css做不了的，交給Javascript而不是替代css去做他能做的）對(duì)于多樣式組合的結(jié)構(gòu)我一直是很反感的，可能我理解的不夠深入，體會(huì)不到他的好處，或許合理的組合可以兼顧結(jié)構(gòu)和開發(fā)效率，可是我沒有發(fā)現(xiàn)，我就要抵觸。對(duì)樣式組合方式是這樣的 div > 舉個(gè)布局例子 div > 幾個(gè)類組合成一個(gè)左浮動(dòng)，寬400 背景為白色的一個(gè)區(qū)域你可能擁有一個(gè)龐大的庫，頁面只需要任意的class的組合就可以完成，省去大部分花費(fèi)在css上的時(shí)間，可是帶來的是結(jié)構(gòu)的混亂，改版的困難，甚至向后兼容受到限制。這樣做和table布局沒什么兩樣，只是代碼看著好看而以，而且代碼量相差也不會(huì)太大。在應(yīng)用web標(biāo)準(zhǔn)初期，合理的table布局也是允許的。如此多的class讓我想起了table冗長的屬性 TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100% 難道辛辛苦苦就是想使用div配合css模擬出一個(gè)table很容易實(shí)現(xiàn)的效果？而且達(dá)到和table布局一樣的拙劣？語義化也是結(jié)構(gòu)的一個(gè)部分，語義除了合理的使用（X）HTML標(biāo)記語言，id也是一個(gè)語義組成的部分，div的id就像一個(gè)即時(shí)貼，告訴你某個(gè)div的語義，告訴你這個(gè)區(qū)塊的意義。微格式（Microformat）是在標(biāo)準(zhǔn) XHTML 代碼中嵌入結(jié)構(gòu)化數(shù)據(jù)的一種新方法。他的誕生也很明確的說明了web的結(jié)構(gòu)永遠(yuǎn)是第一位，語義化的優(yōu)勢(shì)很現(xiàn)實(shí)的體現(xiàn)出來，div的屬性規(guī)劃也體現(xiàn)著語義，而不僅僅是一個(gè)傳遞給樣式工作的接口。可以去看看ibm文檔中心的一篇“使用 microformats 分離數(shù)據(jù)與格式”了解它的工作原理。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：再談CSS Hack各瀏覽器兼容問題

下一篇：純CSS圓角框：透明圓角化背景圖片