|
什么叫結(jié)構(gòu)化？
由于個(gè)人認(rèn)為這個(gè)知識(shí)點(diǎn)是十分重要的，所以請(qǐng)?jiān)试S我在這里多羅嗦幾句，我們采用WEB標(biāo)準(zhǔn)的方法制作頁(yè)面的優(yōu)勢(shì)就體現(xiàn)在頁(yè)面結(jié)構(gòu)清晰。我們以前用table布局的時(shí)候，我們的表現(xiàn)（數(shù)據(jù)）和形式（布局樣式）是混在一起的，有很多冗余的數(shù)據(jù)混雜在一起，而大家再看看我上面給大家展示的代碼，很明顯，結(jié)構(gòu)十分清晰。
呵呵，說(shuō)了半天，還是沒(méi)有說(shuō)什么是結(jié)構(gòu)化，什么才是結(jié)構(gòu)清晰啊？不要急。還記得我剛才提到的那幾個(gè)標(biāo)簽嗎？
h1~h6--如果你要顯示的數(shù)據(jù)是作為標(biāo)題顯示的時(shí)候，就用這些標(biāo)簽，因?yàn)檫@個(gè)標(biāo)簽的意思就是說(shuō)，這個(gè)是一個(gè)標(biāo)題，不僅我們的用戶(hù)很容易理解h-head的英文字母縮寫(xiě)，我們的另外一個(gè)用戶(hù)搜索引擎也可以很容易理解它。呵呵，看到了吧，一個(gè)充分結(jié)構(gòu)化的頁(yè)面，對(duì)用戶(hù)是十分友好的。
p--Paragraph（段落）
ul--unorglized list(無(wú)序的列表)
ol--orglized list(有序的列表)
li--list item(列表項(xiàng))
form--表單
div--division(區(qū)域)
我這么一寫(xiě)，大家估計(jì)開(kāi)始明白了，原來(lái)XHTML標(biāo)簽是有著自己的意義的（至于其他的標(biāo)簽的語(yǔ)意義，大家可以自己到W3C看看它的解釋?zhuān)部梢圆榭凑Z(yǔ)義化你的HTML標(biāo)簽和屬性），所以我們講要語(yǔ)意化的意思，就是用合理的標(biāo)簽來(lái)顯示數(shù)據(jù)，比如前面提到的，是標(biāo)題，就應(yīng)該用h1~h6標(biāo)簽，如果是一個(gè)段落的介紹文字，那么就應(yīng)該使用p標(biāo)簽，如果是顯示的一個(gè)沒(méi)有順序的列表，就應(yīng)該用ul標(biāo)簽，如此...
所以看這個(gè)例子里
<h2>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</h2>
這么寫(xiě)就是很合理的，h2標(biāo)簽就說(shuō)明這里是個(gè)標(biāo)題。而這么寫(xiě)：
復(fù)制內(nèi)容到剪貼板代碼:
.title{
font-size:18px;
...
}
<div class="title"><strong>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</strong></div>
雖然你用了strong來(lái)強(qiáng)調(diào)說(shuō)明這部分文字，但是還是沒(méi)有h2標(biāo)簽來(lái)的直接明了。
還有這么寫(xiě)
<div class="ariticle-title"><h2>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</h2></div>
也不是我們推薦的，可以不用嵌套層的地方，我們盡量不要去過(guò)多的嵌套層，減少嵌套會(huì)讓我們的瀏覽器解析起來(lái)會(huì)更容易，速度更快。
所我們使用WEB標(biāo)準(zhǔn)開(kāi)發(fā)頁(yè)面，絕對(duì)不是單純的把以前的table換成DIV就OK了。而采用標(biāo)準(zhǔn)制作頁(yè)面，也不意味著我們就不使用table。只要把握我剛才說(shuō)的原則，使用合理的標(biāo)簽顯示相應(yīng)特征的數(shù)據(jù)。
其實(shí)我們的table標(biāo)簽是一個(gè)很好的用來(lái)顯示二維數(shù)據(jù)的標(biāo)簽，而table標(biāo)簽也確實(shí)是設(shè)計(jì)出來(lái)用來(lái)顯示數(shù)據(jù)的，而不是用來(lái)布局的，只是我們當(dāng)時(shí)的設(shè)計(jì)師們都用table標(biāo)簽來(lái)布局了。關(guān)于table標(biāo)簽的使用，大家也可以去看看上面提供那篇參考文章《語(yǔ)義化你的HTML標(biāo)簽和屬性》。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) WEB前端開(kāi)發(fā)經(jīng)驗(yàn)總結(jié) [2] 下一頁(yè) WEB前端開(kāi)發(fā)經(jīng)驗(yàn)總結(jié) [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) WEB前端開(kāi)發(fā)經(jīng)驗(yàn)總結(jié) [3]
