記得第一次接觸 xhtml 與 CSS 時(shí)，對(duì)于各種 html 標(biāo)簽的縮寫都很有興趣，例如：h1 的 h 原意為何？ul 與 li 是哪個(gè)英文單字演變而來…..，這些似乎沒有人去研究過，不過倒也不妨礙程式的學(xué)習(xí)。我最記得友人給我的 div 標(biāo)簽解釋較為有趣。他說：「div 像是一個(gè)容器，可以放很多東西進(jìn)去。」這很有禪意的開示，說真的并沒有給我任何啟發(fā)，直到當(dāng)我有機(jī)會(huì)教授他人網(wǎng)頁設(shè)計(jì)時(shí)，我開始認(rèn)真去構(gòu)思：「如何化繁為簡(jiǎn)、深入淺出的方式來向一個(gè)初學(xué)者解釋 div？」

html 語法里的 div 標(biāo)簽，其原單字為：division，與area、zone、region、section 意思相同，就是指定區(qū)域。為何加入一個(gè)指定？因?yàn)榕浜?div 一起作用的還有：margin、padding、float 等 CSS 參數(shù)，這些參數(shù)是強(qiáng)化 div 這個(gè) “容器” 的大小、性質(zhì)與用途，說穿了 CSS 就是在定義 div 的外觀。

我們可以把 div 視為一個(gè)獨(dú)立的行政區(qū)，整個(gè)中國(guó)就是一篇網(wǎng)頁，各縣市是網(wǎng)頁內(nèi)的 div。縣市內(nèi)還可再分各鄉(xiāng)鎮(zhèn)鄰里 div。地理疆界畫分出來后，地景地貌的規(guī)劃，要靠國(guó)土發(fā)展計(jì)畫與都市計(jì)畫，這些法律條文就是網(wǎng)頁設(shè)計(jì)上的 CSS。因此我們可以說：

div 是個(gè)區(qū)域范圍，像是網(wǎng)頁頂端 (Head)、中段 (Body)、側(cè)區(qū) (side) 與底端 (footer) 等區(qū)塊
CSS 是定義區(qū)域內(nèi)的樣貌，如：顏色、效果、大小….
在區(qū)域內(nèi)活動(dòng)的人事物，就是我們所謂的網(wǎng)頁內(nèi)容

使用 div 設(shè)計(jì)網(wǎng)頁，有諸多優(yōu)點(diǎn)：

網(wǎng)頁版面構(gòu)成樣式 (Style) 與網(wǎng)頁內(nèi)容 (Content) 分開，易于資料維護(hù)與管理
簡(jiǎn)化網(wǎng)頁頁面程式碼，加速瀏覽速度與便于搜尋引擊的檢索
網(wǎng)頁外觀若要變換樣式 (變臉)，修改CSS即可，網(wǎng)頁內(nèi)容絲毫不受影響
可以結(jié)合 CSS framework，增快網(wǎng)站后臺(tái)開發(fā)時(shí)間與便于統(tǒng)一網(wǎng)頁樣式
可以設(shè)定自由邊界，讓頁面可依照使用者的螢?zāi)淮笮。詣?dòng)縮放，此特色可讓網(wǎng)頁相容于攜帶式行動(dòng)設(shè)備 (智慧型手機(jī)、平版電腦…)
減少版面構(gòu)成語法上的Bug。傳統(tǒng) Table (表格) 語法，經(jīng)常會(huì)自己撐大或是斷裂，往往要費(fèi)時(shí)重新調(diào)整，甚至重作，徒增困擾

既然 div 的優(yōu)點(diǎn)很多，為何臺(tái)灣大多數(shù)的網(wǎng)頁設(shè)計(jì)公司還是不太喜歡使用，反而繼續(xù)使用落伍、垂死、問題最多的表格 (Table) 語法？

表格語法表較容易，無須在費(fèi)時(shí)去學(xué)習(xí)陌生的 div 語法，減少麻煩
表格語法所開發(fā)出來的網(wǎng)站成本較低，在程式端要注意的小地方少
客戶在網(wǎng)頁設(shè)計(jì)上的預(yù)算不高，網(wǎng)站建置上的諸多專業(yè)考量就省啦
會(huì)表格語法的網(wǎng)頁設(shè)計(jì)師比較好找，但擅長(zhǎng) div 與 CSS 語法的網(wǎng)頁設(shè)計(jì)師就很少了
表格語法可以模擬平面設(shè)計(jì)概念的網(wǎng)頁設(shè)計(jì)。但平面設(shè)計(jì)不是網(wǎng)頁設(shè)計(jì)，如果沒有正視這兩者的差異，過度依賴平面設(shè)計(jì)上的美學(xué)觀，反而會(huì)造成后續(xù)程式端的問題
客戶不懂網(wǎng)頁設(shè)計(jì)的眉角與奧義，未來網(wǎng)站的搜尋排序也不是本階段所需注意的
在網(wǎng)頁設(shè)計(jì)里，魔鬼就存在技術(shù)的細(xì)節(jié)中。如果在網(wǎng)站建置開始就不以技術(shù)為導(dǎo)向，完全以視覺上的美觀為主，可以推測(cè)的將來，妖孽群舞，百病叢生，永遠(yuǎn)無法將蟲蟲危機(jī)解除，屆時(shí)網(wǎng)站將是一個(gè)無法處理的痛。