HTML文檔結構對Div+CSS布局的意義

主要就是我對結構和開發效率之間的矛盾的一個思考,css框架怎樣才能不破環結構的一個疑問。而且對于結構和效率我的觀點就是“擁有合理的結構,才是你web標准化的根本動機”,web是承載信息的,沒有理由爲了視覺效果,而破壞合理的結構。

Web標准的要把握幾點:

使用結構化,語義化的標簽

使用CSS分離出(X)HTML文檔中的表現元素

依靠Javascript去增強,而不是替代,網站的特征(舉個例子就是如果css做不了的,交給Javascript而不是替代css去做他能做的)

對于多樣式組合的結構我一直是很反感的,可能我理解的不夠深入,體會不到他的好處,或許合理的組合可以兼顧結構和開發效率,可是我沒有發現,我就要抵觸。

對樣式組合方式是這樣的

<div class=”class1 class2 … classn”></div>

舉個布局例子

<div class=”f-left w400 bgfff”>

幾個類組合成一個左浮動,寬400 背景爲白色的一個區域

你可能擁有一個龐大的庫,頁面只需要任意的class的組合就可以完成,省去大部分花費在css上的時間,可是帶來的是結構的混亂,改版的困難,甚至向後兼容受到限制。這樣做和table布局沒什麽兩樣,只是代碼看著好看而以,而且代碼量相差也不會太大。在應用web標准初期,合理的table布局也是允許的。

如此多的class讓我想起了table冗長的屬性

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100%>

難道辛辛苦苦就是想使用div配合css模擬出一個table很容易實現的效果?而且達到和table布局一樣的拙劣?

語義化也是結構的一個部分,語義除了合理的使用(X)HTML標記語言,id也是一個語義組成的部分,div的id就像一個即時貼,告訴你某個div的語義,告訴你這個區塊的意義。

微格式(Microformat)是在標准 XHTML 代碼中嵌入結構化數據的一種新方法。他的誕生也很明確的說明了web的結構永遠是第一位,語義化的優勢很現實的體現出來,div的屬性規劃也體現著語義,而不僅僅是一個傳遞給樣式工作的接口。可以去看看ibm文檔中心的一篇“使用 microformats 分離數據與格式”了解它的工作原理。

用DIV+CSS布局網頁的一個實例HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>...查看完整版>>用DIV+CSS布局網頁的一個實例HTML代碼
 
HTML文檔的基本結構:HEAD和BODY
一個有效的HTML4文檔包括以下三大部分:1.版本信息它也被稱爲該文檔使用的文檔類型聲明.HTML是SGML的文檔類型聲明(DTD).HTML的DTD有三種.版本信息應該包括正在使用的DTD的類型.如果HTML編輯器沒有考慮的話,使用:<!...查看完整版>>HTML文檔的基本結構:HEAD和BODY
 
Div+css教程之制作html的工具
  1.切圖工具   圖片的效果對一個網頁來說是很重要的,所以說在切圖這方面也沒什麽小巧的工具,一種是用ps(photoshop),另外一種是fw(fireworks),除了這兩個種工具ahuing沒有找到一個合適的工具了,如果哪個朋友有...查看完整版>>Div+css教程之制作html的工具
 
初學DIV+CSS應該理解HTML標簽的語義
如今Web標准都被通俗的叫做“div+css”或者“層布局”。我不反對這種便宜行事的叫法。但是這樣會陷入一個誤區:即大量的使用div標簽作爲結構元素。事實上這是一種更高級的div濫用(Jeffrey Zeldman在《網站重構》一書...查看完整版>>初學DIV+CSS應該理解HTML標簽的語義
 
DIV+CSS常用的網頁布局代碼
  單行一列  以下是引用片段:  body { margin: 0px; padding: 0px; text-align: center; }   #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }   兩行一列  以下是引用...查看完整版>>DIV+CSS常用的網頁布局代碼
 
DIV+CSS布局的幾點建議
DIV+CSS布局的幾點建議
玩Web重構也有段時日了,算有了那麽些心得。經常有網友問才子一些關于布局方面的問題,SvnHost群裏還有朋友請才子多寫點關于布局方面的教程,幫助一些新手,才子也答應了會多寫些關于布局方面才子自己的一些經驗及心...查看完整版>>DIV+CSS布局的幾點建議
 
DIV+CSS網頁布局及網站設計常犯錯誤
  1、導航菜單使用圖片、FLASH  導航菜單使用圖片、FLASH當然比純文本來得好看一些,但是搜索引擎並不認識你的圖片和FLASH。如果你非要使用漂亮的圖片來做導航的話,可以使用背景替換的方法(我會在下次談到這一個...查看完整版>>DIV+CSS網頁布局及網站設計常犯錯誤
 
爲什麽要選擇DIV+CSS的網站布局方式
  爲什麽要選擇div+css的網站布局方式,看完下面容你就會很詳細的了解到他的作用。在SEO搜索引擎優化中有一項很重要的內容是“網站內部結構的優化”,主要就是通過對網站的鏈接、結構、標簽、排版等各方...查看完整版>>爲什麽要選擇DIV+CSS的網站布局方式
 
換個角度思考:div+css布局入門
換個角度思考:div+css布局入門 換個角度思考:div+css布局入門 你正在學習CSS布局嗎?是不是還不能完全掌握純CSS布局?通常有兩種情況阻礙你的學習:  第一種可能是你還沒有理解CSS處理頁面的原理。在你考...查看完整版>>換個角度思考:div+css布局入門
 
 
回到王朝網路移動版首頁