CSS代碼結(jié)構(gòu)初探:再談div和span!_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
我們?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ū)分、分開(kāi)、部分。即用它來(lái)分割文檔的不當(dāng)部分。我們?cè)谡>幋a中,會(huì)給div分配一個(gè)id名稱(chēng),這樣也使得文檔具有了結(jié)構(gòu)的意義,例如:id="main"、id="sider"等等。
我們?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)行分割。我們看下面的例子:
有人主張用第一種方法,結(jié)構(gòu)明晰。添加了外圍的div標(biāo)簽,釋意這一段代碼是nav區(qū)域。
也有人主張第二種方法,去掉不必要的div標(biāo)簽,簡(jiǎn)化代碼,而且能達(dá)到同樣的效果。
這是一種爭(zhēng)論,事實(shí)上類(lèi)似于這樣的爭(zhēng)論還有很多。我們不必太較真了。因?yàn)樗麄兌加凶约旱牡览�。我們只需要理解他們的主張是什么,編碼的思想是什么,就學(xué)習(xí)到知識(shí)了。MB5U.com的MrJin更傾向于第二種。因?yàn)樗呀?jīng)滿(mǎn)足需要了。這不一定是正確的。這只是解決問(wèn)題的方法之一。
除了上面所說(shuō)的兩種情況之外,還有一種情況與上面的相反,有些人對(duì)div的依靠太強(qiáng)烈了,以至于編碼思想是用div構(gòu)建與傳統(tǒng)table類(lèi)似的結(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。
這段代碼中的“專(zhuān)業(yè)的CSS站點(diǎn)”“Div CSS”都被嵌套在了span元素之內(nèi)。我們可以對(duì)某一些地方應(yīng)用這些標(biāo)記以應(yīng)用不同的樣式。我們可以將上面的兩個(gè)span內(nèi)嵌的內(nèi)容顯示為不同于普通段落的文字色彩。
總之,我們應(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)題。
我們?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)行分割。我們看下面的例子:
示例代碼 [hl5o.cn]
這是一:
<div id="nav">
<ul>
<li><a href="http://hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實(shí)例</a></li>
.....
</ul>
</div>
這是二:
<ul id="nav">
<li><a href="http://hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實(shí)例</a></li>
.....
</ul>
<div id="nav">
<ul>
<li><a href="http://hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實(shí)例</a></li>
.....
</ul>
</div>
這是二:
<ul id="nav">
<li><a href="http://hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實(shí)例</a></li>
.....
</ul>
有人主張用第一種方法,結(jié)構(gòu)明晰。添加了外圍的div標(biāo)簽,釋意這一段代碼是nav區(qū)域。
也有人主張第二種方法,去掉不必要的div標(biāo)簽,簡(jiǎn)化代碼,而且能達(dá)到同樣的效果。
這是一種爭(zhēng)論,事實(shí)上類(lèi)似于這樣的爭(zhēng)論還有很多。我們不必太較真了。因?yàn)樗麄兌加凶约旱牡览�。我們只需要理解他們的主張是什么,編碼的思想是什么,就學(xué)習(xí)到知識(shí)了。MB5U.com的MrJin更傾向于第二種。因?yàn)樗呀?jīng)滿(mǎn)足需要了。這不一定是正確的。這只是解決問(wèn)題的方法之一。
除了上面所說(shuō)的兩種情況之外,還有一種情況與上面的相反,有些人對(duì)div的依靠太強(qiáng)烈了,以至于編碼思想是用div構(gòu)建與傳統(tǒng)table類(lèi)似的結(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。
示例代碼 [hl5o.cn]
<div id="aboutmb5u">
<h1>Div CSS教程 hl5o.cn</h1>
<p>mb5u.com是一個(gè)非常<span>專(zhuān)業(yè)的CSS站點(diǎn)</span></p>
<p>mb5u.com的<span>Div CSS</span>教程欄目有豐富的教程</p>
</div>
<h1>Div CSS教程 hl5o.cn</h1>
<p>mb5u.com是一個(gè)非常<span>專(zhuān)業(yè)的CSS站點(diǎn)</span></p>
<p>mb5u.com的<span>Div CSS</span>教程欄目有豐富的教程</p>
</div>
這段代碼中的“專(zhuān)業(yè)的CSS站點(diǎn)”“Div CSS”都被嵌套在了span元素之內(nèi)。我們可以對(duì)某一些地方應(yīng)用這些標(biāo)記以應(yīng)用不同的樣式。我們可以將上面的兩個(gè)span內(nèi)嵌的內(nèi)容顯示為不同于普通段落的文字色彩。
總之,我們應(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)題。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- HTML教程,HTML默認(rèn)樣式
- 網(wǎng)頁(yè)表單設(shè)計(jì)實(shí)例技巧五則
- XHTML教程:Doctype文檔類(lèi)型聲明必不可少!
- XHTML入門(mén)學(xué)習(xí)教程:什么是XHTML?
- HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。
- HTML表格標(biāo)記教程(2):表格的邊框?qū)傩訠ORDER
- HTML表格標(biāo)記教程(34):跨行屬性ROWSPAN
- HTML表格標(biāo)記教程(13):內(nèi)部邊框樣式屬性RULES
- 容易讓人迷惑的alt和title
- robots.txt詳細(xì)介紹
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-CSS代碼結(jié)構(gòu)初探:再談div和span!
。