合理運(yùn)用div和span

特意上網(wǎng)搜索了一下，關(guān)于div，說法很多。

把div看成是布局元素這種觀點(diǎn)我想是最多的，類似有“用div代替table進(jìn)行布局”、“實(shí)戰(zhàn)CSS+DIV布局”等等等等，太多了，還有不少人延用Dreamweaver的定義，稱div為層，按Photoshop的層的概念來使用……有朋友干脆就直接稱div和span為輔助布局元素。

怎么說呢？雖然我很想說對(duì)div類似的這種認(rèn)識(shí)是錯(cuò)誤的，div不是一個(gè)布局元素，沒有一個(gè)tag是用來布局的，但是我是對(duì)的嗎？我也不知道。幾乎所有人對(duì)div的宣傳都是布局，不管是‘民間’的還是‘官方’的，但是如果我們找根源，中文中，div是一個(gè)結(jié)構(gòu)化標(biāo)簽，是一個(gè)塊級(jí)元素。好吧，我們首先看看div擁有的語義，division（分隔），按語義它的作用是將兩個(gè)部分分隔開來。然后我們?cè)倩氐絯3去看看怎么定義div和span的：The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.

注意到我上面加粗的一句話了嗎？W3可沒說是 for layout，而是for structure，是結(jié)構(gòu)！因?yàn)榉指魪亩a(chǎn)生（定義）一個(gè)代碼結(jié)構(gòu)。我想，結(jié)構(gòu)和布局應(yīng)該是兩個(gè)概念吧?；蛟S，因?yàn)閠able確實(shí)被用于布局了，所以這種根深蒂固的布局思路又自然而然的轉(zhuǎn)嫁到div上，我曾在很長(zhǎng)一段時(shí)間里也是這么理解的。但是，現(xiàn)在我要說，這絕對(duì)是一個(gè)錯(cuò)誤并且，這是極度嚴(yán)重的錯(cuò)誤?。?！這純粹個(gè)人觀點(diǎn)個(gè)人理解，自己取舍好了。

為什么嚴(yán)重？理解的錯(cuò)誤直接導(dǎo)致的就是使用的錯(cuò)誤。因?yàn)槿绻凑者@個(gè)思路，把div作為布局元素使用，那么我認(rèn)為：

你永遠(yuǎn)無法固定xhtml！永遠(yuǎn)陷在css的怪圈中！永遠(yuǎn)不會(huì)去思考和理解結(jié)構(gòu)！永遠(yuǎn)擦不干凈table烙下的痕跡！永遠(yuǎn)無法接近神（貌合神離的神哈，呵呵）……

或許把div稱為布局元素還是為了更好的推行標(biāo)準(zhǔn)，但是卻將人們從一個(gè)錯(cuò)誤帶向了另一個(gè)錯(cuò)誤。兩年前我剛接觸標(biāo)準(zhǔn)時(shí)就在《重構(gòu)之美》首篇中迷惑過關(guān)于改版的事情，雖然隨著理解的深入好像有了突破，在我寫下xhtml后不變動(dòng)，然后通過css的技巧來完成新版面。比如像著名的csszengarden。但是很快我又有新的迷惑，一個(gè)人這樣做好像沒什么問題，團(tuán)隊(duì)呢？比如如果同樣的內(nèi)容，設(shè)計(jì)成兩個(gè)版式，然后交給不同的兩個(gè)人來寫xhtml，會(huì)一樣嗎？就像如果把csszengarden的形式顛倒一下，基于同一份數(shù)據(jù)先做好100個(gè)設(shè)計(jì)稿，讓100個(gè)人按照這個(gè)設(shè)計(jì)稿寫100份xhtml，會(huì)一樣嗎？我想按照div布局模式，對(duì)于同樣的版式，不同人不同的頁面分析都會(huì)產(chǎn)生不同的xhtml，更何況不同的版式呢？但是既然表現(xiàn)與結(jié)構(gòu)無關(guān)，那么同樣的內(nèi)容不應(yīng)該有2份以上的xhtml。不要小看這個(gè)問題，對(duì)于團(tuán)隊(duì)中前后臺(tái)的有效分離與快速協(xié)同，這是關(guān)鍵！我在培訓(xùn)中提出一個(gè)觀點(diǎn)：最理想的境界是前臺(tái)閉著眼睛都能知道后臺(tái)輸出的是什么樣的xhtml結(jié)構(gòu)代碼。那么問題出在哪里？div布局！尤其是在理解了h系列標(biāo)簽不合理之后，體會(huì)更深刻。

上篇文章我提出的關(guān)于結(jié)構(gòu)應(yīng)當(dāng)分為兩種：語義結(jié)構(gòu)和代碼結(jié)構(gòu)。理解了這兩個(gè)結(jié)構(gòu)之后，那么div的用處就比較明朗了，稍稍動(dòng)動(dòng)腦筋就能想到，用于組織代碼結(jié)構(gòu)。所以hx標(biāo)簽的問題我認(rèn)為經(jīng)典呢，不要說html了，即便對(duì)于xhtml，大部分的人關(guān)心的仍是如何表現(xiàn)，小部分人關(guān)心語義結(jié)構(gòu)，很少人去關(guān)心代碼結(jié)構(gòu)，似乎xml有了，xhtml就不需要代碼結(jié)構(gòu)了。但是從hx系列的問題可以看出并延伸知道W3可一直在關(guān)心代碼結(jié)構(gòu)，從1.0，1.1直到2.0，一直希望xhtml擁有xml般嚴(yán)謹(jǐn)?shù)拇a結(jié)構(gòu)。說到這里再多看xhtml 2.0的另一個(gè)變化，br不再被推薦，應(yīng)該很好理解了，br的語義是產(chǎn)生一個(gè)截?cái)啵╞reak），但實(shí)際作用是產(chǎn)生一個(gè)行，語義結(jié)構(gòu)上仍不完美，所以使用line進(jìn)行替代<line>this is one line</line>。同樣br也無代碼結(jié)構(gòu)可言，如果我想提取第三行的數(shù)據(jù)如何操作？所以很有可能類似br、hr這類標(biāo)簽都將被廢棄。我琢磨著，xhtml1.x是W3清理表現(xiàn)，將人們往語義結(jié)構(gòu)[Semantic]的方向牽引，而xhtml 2.0則是展示和突出代碼結(jié)構(gòu)[structure]。呵呵，您說我琢磨得對(duì)嗎？瞎猜瞎猜。^_^

回過頭來，那么怎么組織？首先對(duì)于一個(gè)設(shè)計(jì)稿，一定要不被設(shè)計(jì)所迷惑和左右，只提取看得見和看不見的數(shù)據(jù)，然后就扔掉設(shè)計(jì)稿，先完成數(shù)據(jù)的語義結(jié)構(gòu)，再添加代碼結(jié)構(gòu)（adding structure to documents.），完成xhtml后，最后一步才是重新拾起設(shè)計(jì)稿打開css，還原。當(dāng)然實(shí)際做的時(shí)候不可能不看設(shè)計(jì)稿，但是怎么看？只提數(shù)據(jù)！再說一點(diǎn)，數(shù)據(jù)在文檔中的先后順序由什么定？當(dāng)然是由文檔而定，不是由設(shè)計(jì)稿所定。舉個(gè)例子，假如有兩個(gè)欄目，新聞?lì)^條和普通新聞。誰在前誰在后，很顯然在文檔中應(yīng)該是頭條在前普通在后，這是由UE（用戶體驗(yàn)）和欄目輕重的綜合考慮決定。但是按照div布局的話，是按照設(shè)計(jì)稿上前下后左前右后的順序來決定的，那么如果設(shè)計(jì)稿中將普通新聞欄目設(shè)計(jì)在左欄，頭條設(shè)計(jì)在中欄，文檔中普通新聞就跑到頭條新聞上面去了。所以我打開一個(gè)Web標(biāo)準(zhǔn)站點(diǎn)文檔瀏覽，如果文檔的先后順序是按照頁面布局上前下后，左前右后的順序而定的，那么我……特例一點(diǎn)，如果一個(gè)單屏設(shè)計(jì)的網(wǎng)站，標(biāo)題和導(dǎo)航設(shè)計(jì)在頁面下方，那你的文檔豈不是最下面才是標(biāo)題和導(dǎo)航，這是什么UE？這不是扯蛋嘛。div，div布局的惡果——文檔結(jié)構(gòu)仍然在為表現(xiàn)所左右！貌合神離?。?br />
代碼結(jié)構(gòu)怎么做？大處按照上篇文章所寫，用h系列劃分大結(jié)構(gòu)。那么小處呢？這里就要牽涉進(jìn)div的另外一個(gè)概念：塊級(jí)元素。什么塊？模塊！用div模塊化小處。舉例：

<div> <h3><span>用戶登陸</span></h3> <div> <label for="name">用戶名</label> <input id="name" /> </div> <div> <label for="pw">密碼</label> <input id="pw" /> </div> <p><button /></p> </div>

這個(gè)在[復(fù)雜表單]中提到過的例子，我們來詳細(xì)分析div在小處如何模塊化運(yùn)用。其實(shí)很簡(jiǎn)單，h3/lable/p是語義結(jié)構(gòu)，然后，對(duì)于用戶名和相應(yīng)的輸入框顯然是不可分割的整體，那么好了，div將其標(biāo)識(shí)為一個(gè)塊，對(duì)應(yīng)的密碼部分同理。最后，兩者一起與標(biāo)題和按鈕又構(gòu)成一個(gè)不可分割的登陸整體，div之。這樣擁有很好的語義結(jié)構(gòu)和代碼結(jié)構(gòu)。好的代碼結(jié)構(gòu)不僅僅可以便于固定xhtml，便于程序操作節(jié)點(diǎn)，還對(duì)css提供了很高的自由度。如上例結(jié)構(gòu)，我只需要給最外div一個(gè)class，比如"loginarea"。那么：

我可以這么按節(jié)點(diǎn)/路徑層層定義下去：.loginarea label{} .loginarea input{} .loginarea div label{} .loginarea div input。如果我需要橫向登陸，只需要定義一個(gè)關(guān)鍵點(diǎn)：.loginarea div{float: left}，如果縱向則去掉這個(gè)關(guān)鍵點(diǎn)，模塊化的登陸就這么簡(jiǎn)單。這樣還可以省寫不少class，尤其對(duì)于有些看似復(fù)雜的結(jié)構(gòu)其實(shí)模塊化設(shè)計(jì)好了，模塊內(nèi)部是簡(jiǎn)單的，一個(gè)路徑定義過去，根本無需class還不會(huì)引起樣式?jīng)_突和干擾，css的可讀性也很好。當(dāng)然這里會(huì)涉及到css的技巧，我認(rèn)為css的技巧最重要的就是分析頁面，頁面分析的好，寫出來的css簡(jiǎn)單明了充分利用tag還有多以備擴(kuò)展，否則class一大堆復(fù)雜冗長(zhǎng)還會(huì)覺得tag不夠用又去添加破壞結(jié)構(gòu)。復(fù)雜表單那套系統(tǒng)的css我寫了48k，還未做最后優(yōu)化，全部圖片總共只有5K，還全是無損PNG格式。整套系統(tǒng)幾十個(gè)大模塊，又有無限級(jí)菜單、樹、頁簽、彈出，復(fù)雜表單，合同，frame，iframe，報(bào)表，控件套控件等等亂七八糟什么都有，css加圖片全部表現(xiàn)部分可以做到50K以內(nèi)。這個(gè)項(xiàng)目四個(gè)程序員一起開發(fā)我一個(gè)人頂所有前臺(tái)，三個(gè)月時(shí)間，程序員不管任何有關(guān)表現(xiàn)部分，我都是玩玩做做就搞定了。中后期，臨著交付客戶時(shí)候我還覺得公司提供的設(shè)計(jì)不好，又自己花1天重新設(shè)計(jì)，花不到2天另外寫了一個(gè)css，整個(gè)系統(tǒng)全變了且以前的設(shè)計(jì)未丟失。功能不變的情況下界面大換，再大的系統(tǒng)也不過一個(gè)人幾天時(shí)間，且程序員不用管。這就是Web標(biāo)準(zhǔn)的威力之一！（因?yàn)槭莾?nèi)網(wǎng)應(yīng)用，所以我?guī)缀鯖]考慮和照顧瀏覽器兼容性，沒必要，也是快的一個(gè)因素）

所以我認(rèn)為當(dāng)前各大網(wǎng)站上以各種方式事先列出什么單行一列，兩行一列諸如此類的幾行幾列的div＋css布局代碼，不好說他們不對(duì)，你完全可以去理解是如何使用css實(shí)現(xiàn)幾行幾列的布局，然后合理運(yùn)用到自己的結(jié)構(gòu)上。但是如果你按照他提供的代碼去套、去添加內(nèi)容，那么你就錯(cuò)了。不過話說回來，在被一篇一篇標(biāo)題著斗大的“布局”兩個(gè)字的潛移默化下，您還有心思去關(guān)心結(jié)構(gòu)嗎？所以很多都去琢磨css了，所以這些善意的Web標(biāo)準(zhǔn)推廣者還是有錯(cuò)的，包括我在內(nèi)，我2004年撰寫的《重構(gòu)之美》代碼示例部分帶有更大的誤導(dǎo)性（好在當(dāng)初我一再?gòu)?qiáng)調(diào)代碼毫無借鑒的意義，也算在文字上有所彌補(bǔ)）。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁題目：合理運(yùn)用div和span
標(biāo)題來源：http://www.muchs.cn/news49/310099.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、微信小程序、移動(dòng)網(wǎng)站建設(shè)、微信公眾號(hào)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)