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

最新評論