如果你是一個(gè)喜歡什么都用<div>來(lái)標(biāo)簽的人,那么這個(gè)教程一定很適合你.在這個(gè)教程里著重講如何規(guī)范的來(lái)寫HTML代碼讓它更加的有意義.你有沒有經(jīng)歷過(guò)這樣的場(chǎng)景:在編緝別人的模版時(shí)發(fā)現(xiàn)那些語(yǔ)意不明的標(biāo)簽,你的感覺是什么樣子的.學(xué)完這個(gè)教程后你會(huì)發(fā)現(xiàn)規(guī)范的代碼不僅僅為你以后修改代碼省下時(shí)間,特別是當(dāng)你調(diào)試一個(gè)大的項(xiàng)目時(shí)你會(huì)發(fā)現(xiàn),原來(lái)規(guī)范代碼之后是那么的有用.

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

很多人都喜歡用<div>來(lái)包裹<form>和<ul>來(lái)建立菜單列表.你有沒有想過(guò)這樣一個(gè)多余的<div>是不是需要的.你可以使用css規(guī)則來(lái)實(shí)現(xiàn)同樣的效果.

Example 1:

這個(gè)例子展示如何刪除<form>中的<div>.

Example 2:

有時(shí)候我們會(huì)給內(nèi)容添加一個(gè)額外的<div>標(biāo)簽來(lái)以示這是一個(gè)內(nèi)容.在事例中用了<div class="sidebox">來(lái)包括內(nèi)容區(qū).如果一個(gè)內(nèi)容有一個(gè)標(biāo)題的話(如:<h4>),那么我們就可以把這個(gè)<h4& gt;來(lái)代替<div>.

2.使用有語(yǔ)義的標(biāo)簽

用有語(yǔ)義的標(biāo)簽來(lái)編寫你的HTML文檔(如:<h1>為標(biāo)題;<p>為段落;<ul>為列表.)那么即使用戶不支持css的話,那你的文檔也被正確的讀出來(lái).

Example:

這個(gè)例子很好的說(shuō)明了,使用有語(yǔ)義標(biāo)簽的好處.

3.盡量減少使用<div>

你有沒有見過(guò)那么混亂的模板,到處都可以看到<div>標(biāo)簽,看到這些,你的頭有沒有變大了.你是否因?yàn)樯儆?lt;/div>來(lái)結(jié)束標(biāo)簽,或者因?yàn)槎嘤昧?lt;div>標(biāo)簽而把一個(gè)布局弄亂了.我想大多數(shù)初學(xué)者都有這樣的經(jīng)歷.所以盡可能的少使用<div>,它會(huì)使調(diào)試和編輯更加的容易.

Example 1:

使用<p>來(lái)代替<div>來(lái)創(chuàng)建導(dǎo)航.

Example 2:

看如何使用<span>來(lái)代替<div>實(shí)現(xiàn)同樣的效果.

4.格式(縮進(jìn))代碼

你應(yīng)該格式源代碼(即縮進(jìn)嵌套元素),以便于容易閱讀和修改.如果你使用DW來(lái)編寫代碼的話,那么你就可以很方便的格式代碼.

5.在</div>標(biāo)簽之后添加注解.

你有沒有見過(guò)在一些模版在</div>之后有注明這一部分是什么.(如:header;contant;footer.)所以你可以在< /div>之后加入一個(gè)<!--  footer -->.這樣別人就可以知道這是一個(gè)頁(yè)腳結(jié)束點(diǎn).

寫完代碼累了,那就輕松一下:

最新評(píng)論