CSS代碼結(jié)構(gòu)div和span初探
你對CSS代碼結(jié)構(gòu)div和span的使用是否熟悉，我們在使用CSS規(guī)劃網(wǎng)頁結(jié)構(gòu)時通常會用到div，div是有語意的，它不象h1或ul等那些標(biāo)簽的語意那么明確而已，div的語意是division，英文的意思是區(qū)分、分開、部分。即用它來分割文檔的不當(dāng)部分。
CSS代碼結(jié)構(gòu)div和span初探
我們在規(guī)劃網(wǎng)頁的結(jié)構(gòu)時通常會用到div。我們正常都認(rèn)為div是一個沒有語意的標(biāo)簽，它的作用是用來分割文檔的不同區(qū)域。但我們也發(fā)現(xiàn)，有些人認(rèn)為div是有語意的。只不過它不象h1或ul等那些標(biāo)簽的語意那么明確而已，div的語意是division，英文的意思是區(qū)分、分開、部分。即用它來分割文檔的不當(dāng)部分。我們在正常編碼中，會給div分配一個id名稱，這樣也使得文檔具有了結(jié)構(gòu)的意義，例如：id="main"、id="sider"等等。關(guān)于id的知識我們在前面的文章《如何為id及class類命名？》http://www.52css.com/article.asp?id=403中已經(jīng)討論過了，希望大家都能掌握相關(guān)知識。
◆我們試圖將文檔的標(biāo)注標(biāo)簽盡量的減化。只有在不得已，實(shí)在沒有可用的HTML元素進(jìn)行分割的時候我們再使用div的方式。這是一種簡潔的方式，但有些人也認(rèn)為這樣使得文檔的結(jié)構(gòu)化出現(xiàn)障礙，主張需要div進(jìn)行分割。我們看下面的例子：
ExampleSourceCode
這是一：
- <dividdivid="nav">
- <ul>
- <li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li>
- <li><ahrefahref="http://www.52css.com/">CSS布局實(shí)例</a></li>
- .....
- </ul>
- </div>
這是二：
- <ulidulid="nav">
- <li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li>
- <li><ahrefahref="http://www.52css.com/">CSS布局實(shí)例</a></li>
- .....
- </ul>
有人主張用***種方法，結(jié)構(gòu)明晰。添加了外圍的div標(biāo)簽，釋意這一段代碼是nav區(qū)域。
也有人主張第二種方法，去掉不必要的div標(biāo)簽，簡化代碼，而且能達(dá)到同樣的效果。
這是一種爭論，事實(shí)上類似于這樣的爭論還有很多。我們不必太較真了。因?yàn)樗麄兌加凶约旱牡览?。我們只需要理解他們的主張是什么，編碼的思想是什么，就學(xué)習(xí)到知識了。52CSS.com的MrJin更傾向于第二種。因?yàn)樗呀?jīng)滿足需要了。這不一定是正確的。這只是解決問題的方法之一。
除了上面所說的兩種情況之外，還有一種情況與上面的相反，有些人對div的依賴太強(qiáng)烈了，以至于編碼思想是用div構(gòu)建與傳統(tǒng)table類似的結(jié)構(gòu)。這樣是絕不可取的，這就與Web標(biāo)準(zhǔn)的思想背道而馳了，使代碼煩雜不便于理解，缺少語義，結(jié)構(gòu)不明朗。
◆div是block塊元素，可以規(guī)劃文檔的不同功能區(qū)域，當(dāng)然，你可以運(yùn)用display:inline，使它變成內(nèi)聯(lián)形式。但我們更常用的還是span。這是對內(nèi)聯(lián)無素進(jìn)行標(biāo)識的標(biāo)簽。看下面的代碼。
ExampleSourceCode
- <dividdivid="about52css">
- <h1>Div+CSS教程www.52css.com</h1>
- <p>52css.com是一個非常<span>專業(yè)的CSS站點(diǎn)</span></p>
- <p>52css.com的<span>Div+CSS</span>教程欄目有豐富的教程</p>
- </div>
這段代碼中的“專業(yè)的CSS站點(diǎn)”“Div+CSS”都被嵌套在了span元素之內(nèi)。我們可以對某一些地方應(yīng)用這些標(biāo)記以應(yīng)用不同的樣式。我們可以將上面的兩個span內(nèi)嵌的內(nèi)容顯示為不同于普通段落的文字色彩。
◆總結(jié)：
總之，我們應(yīng)該盡量的簡化我們的代碼，扔掉那些不必要的標(biāo)簽標(biāo)記，不過你也不要太過了保守，在實(shí)際操作中有這樣的精簡思維就可以了?，F(xiàn)實(shí)的情況讓我們不得不添加一些標(biāo)記來讓CSS準(zhǔn)確的找到目標(biāo)。因?yàn)镃SS的功能還不夠強(qiáng)大，相信未來一定會有更好的方法解決問題。
【編輯推薦】
