新聞中心
你對(duì)CSS代碼結(jié)構(gòu)div和span的使用是否熟悉,我們?cè)谑褂肅SS規(guī)劃網(wǎng)頁(yè)結(jié)構(gòu)時(shí)通常會(huì)用到div,div是有語(yǔ)意的,它不象h1或ul等那些標(biāo)簽的語(yǔ)意那么明確而已,div的語(yǔ)意是division,英文的意思是區(qū)分、分開、部分。即用它來(lái)分割文檔的不當(dāng)部分。

創(chuàng)新互聯(lián)從2013年開始,先為賀蘭等服務(wù)建站,賀蘭等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為賀蘭企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
CSS代碼結(jié)構(gòu)div和span初探
我們?cè)谝?guī)劃網(wǎng)頁(yè)的結(jié)構(gòu)時(shí)通常會(huì)用到div。我們正常都認(rèn)為div是一個(gè)沒(méi)有語(yǔ)意的標(biāo)簽,它的作用是用來(lái)分割文檔的不同區(qū)域。但我們也發(fā)現(xiàn),有些人認(rèn)為div是有語(yǔ)意的。只不過(guò)它不象h1或ul等那些標(biāo)簽的語(yǔ)意那么明確而已,div的語(yǔ)意是division,英文的意思是區(qū)分、分開、部分。即用它來(lái)分割文檔的不當(dāng)部分。我們?cè)谡>幋a中,會(huì)給div分配一個(gè)id名稱,這樣也使得文檔具有了結(jié)構(gòu)的意義,例如:id="main"、id="sider"等等。關(guān)于id的知識(shí)我們?cè)谇懊娴奈恼隆度绾螢閕d及class類命名?》http://www.52css.com/article.asp?id=403中已經(jīng)討論過(guò)了,希望大家都能掌握相關(guān)知識(shí)。
◆我們?cè)噲D將文檔的標(biāo)注標(biāo)簽盡量的減化。只有在不得已,實(shí)在沒(méi)有可用的HTML元素進(jìn)行分割的時(shí)候我們?cè)偈褂胐iv的方式。這是一種簡(jiǎn)潔的方式,但有些人也認(rèn)為這樣使得文檔的結(jié)構(gòu)化出現(xiàn)障礙,主張需要div進(jìn)行分割。我們看下面的例子:
ExampleSourceCode
這是一:
Div+CSS教程 CSS布局實(shí)例 - .....
這是二:
Div+CSS教程 CSS布局實(shí)例 - .....
有人主張用***種方法,結(jié)構(gòu)明晰。添加了外圍的div標(biāo)簽,釋意這一段代碼是nav區(qū)域。
也有人主張第二種方法,去掉不必要的div標(biāo)簽,簡(jiǎn)化代碼,而且能達(dá)到同樣的效果。
這是一種爭(zhēng)論,事實(shí)上類似于這樣的爭(zhēng)論還有很多。我們不必太較真了。因?yàn)樗麄兌加凶约旱牡览?。我們只需要理解他們的主張是什么,編碼的思想是什么,就學(xué)習(xí)到知識(shí)了。52CSS.com的MrJin更傾向于第二種。因?yàn)樗呀?jīng)滿足需要了。這不一定是正確的。這只是解決問(wèn)題的方法之一。
除了上面所說(shuō)的兩種情況之外,還有一種情況與上面的相反,有些人對(duì)div的依賴太強(qiáng)烈了,以至于編碼思想是用div構(gòu)建與傳統(tǒng)table類似的結(jié)構(gòu)。這樣是絕不可取的,這就與Web標(biāo)準(zhǔn)的思想背道而馳了,使代碼煩雜不便于理解,缺少語(yǔ)義,結(jié)構(gòu)不明朗。
◆div是block塊元素,可以規(guī)劃文檔的不同功能區(qū)域,當(dāng)然,你可以運(yùn)用display:inline,使它變成內(nèi)聯(lián)形式。但我們更常用的還是span。這是對(duì)內(nèi)聯(lián)無(wú)素進(jìn)行標(biāo)識(shí)的標(biāo)簽??聪旅娴拇a。
ExampleSourceCode
Div+CSS教程www.52css.com
52css.com是一個(gè)非常專業(yè)的CSS站點(diǎn)
52css.com的Div+CSS教程欄目有豐富的教程
這段代碼中的“專業(yè)的CSS站點(diǎn)”“Div+CSS”都被嵌套在了span元素之內(nèi)。我們可以對(duì)某一些地方應(yīng)用這些標(biāo)記以應(yīng)用不同的樣式。我們可以將上面的兩個(gè)span內(nèi)嵌的內(nèi)容顯示為不同于普通段落的文字色彩。
◆總結(jié):
總之,我們應(yīng)該盡量的簡(jiǎn)化我們的代碼,扔掉那些不必要的標(biāo)簽標(biāo)記,不過(guò)你也不要太過(guò)了保守,在實(shí)際操作中有這樣的精簡(jiǎn)思維就可以了?,F(xiàn)實(shí)的情況讓我們不得不添加一些標(biāo)記來(lái)讓CSS準(zhǔn)確的找到目標(biāo)。因?yàn)镃SS的功能還不夠強(qiáng)大,相信未來(lái)一定會(huì)有更好的方法解決問(wèn)題。
【編輯推薦】
- CSS Sprites對(duì)CSS布局的意義
- 如何使用CSS框架這把雙刃劍?
- CSS中font-size屬性值四大種類
- 解析四大CSS屬性值選擇器用法
- 專家推薦 DIV CSS表單布局的五個(gè)小技巧
網(wǎng)頁(yè)名稱:CSS代碼結(jié)構(gòu)div和span初探
轉(zhuǎn)載來(lái)源:http://fisionsoft.com.cn/article/dphidcd.html


咨詢
建站咨詢
