国产午夜男女爽爽爽爽爽_亚洲A∨无码一区二区一二区毛片_蜜桃tv在线二三区_天天摸一摸视频寡妇_国产欧美国产精品第二区_亚洲老司机在线凹凸福利网站_大痉挛中文字幕色视频_欧美日韩性爱第一页_亚洲高清无码在线一区二区_亚洲黄片视频免费看

如果你用<div>處理所有的web前端設(shè)計(jì)，這篇文章正合適你看看。它關(guān)注于使用盡量少的<div>標(biāo)簽，如何使用語(yǔ)義化的標(biāo)簽寫(xiě)出干凈簡(jiǎn)潔的Html編碼。

你有沒(méi)有遇到過(guò)編輯別人的html模板，頭疼于其凌亂而無(wú)意義的標(biāo)記？編寫(xiě)干凈的語(yǔ)義化的html模板不單單只對(duì)你個(gè)人呢有好處，對(duì)團(tuán)隊(duì)也大有裨益，在編輯和調(diào)試一個(gè)比較大的項(xiàng)目將會(huì)更加有效率。

1.清除不必要的<div>標(biāo)記

我發(fā)現(xiàn)有很多人都會(huì)在<form>或者<ul>外邊包上<div>標(biāo)簽，為什么加上一個(gè)你根本不需要的<div>標(biāo)簽?zāi)?？你完全可以?duì)選擇符運(yùn)用CSS規(guī)則，實(shí)現(xiàn)你想達(dá)到的效果。

示例1

丟掉冗余的<div>標(biāo)簽，在CSS規(guī)則化<form>標(biāo)簽也可以達(dá)到同樣的效果。

示例2

有時(shí)候我們會(huì)用<div>外包c(diǎn)ontent（內(nèi)容）以達(dá)到外邊距。左邊的例子使用<div class="sidebox">創(chuàng)造margin的外邊距，但是如果每個(gè)box中都有一個(gè)標(biāo)題（比如說(shuō)<h4>）,我們完全可以利用<h4>產(chǎn)生邊距而拋棄多余的<div>.

2.使用語(yǔ)義化標(biāo)記編碼

你應(yīng)該完全語(yǔ)義化的編寫(xiě)html文檔（比如說(shuō)：標(biāo)題用<h>標(biāo)簽，段落用<p>，列表用<ul>等等。）。這樣就算CSS無(wú)效，你的文檔任然是有結(jié)構(gòu)化意義的。

示例

下圖顯示了無(wú)語(yǔ)義<div>結(jié)構(gòu)和語(yǔ)義結(jié)構(gòu)在CSS失效后出現(xiàn)的差異。

3.盡量少使用<div>標(biāo)簽

你有沒(méi)有見(jiàn)過(guò)到處都充滿了混亂的<div>的html模板文檔，讓你發(fā)瘋？有時(shí)候是否會(huì)因?yàn)?lt;/div>結(jié)束標(biāo)記的缺失或者多余的<div>搞亂整個(gè)布局？我相信很多開(kāi)發(fā)者曾今都遇到過(guò)類似的問(wèn)題。所以應(yīng)當(dāng)盡量減少<div>標(biāo)簽的使用，這樣調(diào)試和編輯起來(lái)會(huì)比較容易。

示例1

用更語(yǔ)義化的<p>標(biāo)簽代替<div>外包面包屑導(dǎo)航標(biāo)簽。

示例2

用一個(gè)<span>標(biāo)簽替代兩個(gè)<div>在CSS上達(dá)到同樣的布局效果。

4.格式化（嵌套縮進(jìn)）你的編碼

你應(yīng)該堅(jiān)持格式化（嵌套縮進(jìn)）你的編碼，這樣便于調(diào)試和編輯。如果你有Dreamweaver的話，在菜單中選擇

命令>運(yùn)用源格式

5.在結(jié)束標(biāo)簽</div>后面寫(xiě)注釋

在編輯類似于WordPress之類的模板代碼時(shí)，模板總是被分為header.php，sidebar.php和footer.php等進(jìn)行編輯。這樣你就應(yīng)該在在結(jié)束標(biāo)簽</div>后面寫(xiě)上注釋提醒你自己。比如說(shuō)看到</div><!-- /wrapper -->標(biāo)簽的時(shí)候就知道這個(gè)是<div id="wrapper">結(jié)束標(biāo)記。

示例

我用“/”表示是結(jié)束標(biāo)記

總結(jié)

1.盡量少使用<div>標(biāo)記。

2.盡量在布局需要的時(shí)候使用<div>標(biāo)簽：標(biāo)題 內(nèi)容 側(cè)邊欄 和 頁(yè)腳

3.內(nèi)容應(yīng)該使用語(yǔ)義化標(biāo)記，不要使用<div>

4.嵌套縮進(jìn)編碼和在</div>后面寫(xiě)上恰當(dāng)?shù)淖⑨?/p>