Div+Css教程模板無(wú)憂(yōu)>建站教程>Div+Css教程>Web標(biāo)準(zhǔn)教程>

Web標(biāo)準(zhǔn)學(xué)習(xí)：保持清晰的文檔結(jié)構(gòu)_Web標(biāo)準(zhǔn)教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

我十分支持Web標(biāo)準(zhǔn)，并且認(rèn)為它提出的文檔對(duì)象模型(DOM，Document Object Model)是非常合理而且有用的。文檔對(duì)象模型讓我們脫離字符，在結(jié)構(gòu)層面高級(jí)方式操作文檔。

在網(wǎng)頁(yè)制作(HTML/XHTML)方面，遵循Web標(biāo)準(zhǔn)可以使網(wǎng)站的結(jié)構(gòu)更加合理。但是，新的標(biāo)準(zhǔn)總會(huì)導(dǎo)致一部分舊的網(wǎng)頁(yè)制作者的排斥，很簡(jiǎn)單，因?yàn)樗麄儫o(wú)法掌握新的標(biāo)準(zhǔn)或者/同時(shí)他們認(rèn)為不需要新的標(biāo)準(zhǔn)，原來(lái)的方式已經(jīng)夠用了。我不跟后一部分的人討論。

應(yīng)用標(biāo)準(zhǔn)的時(shí)候，有些網(wǎng)頁(yè)制作者已經(jīng)走進(jìn)了一些誤區(qū)。往往為了一個(gè)標(biāo)準(zhǔn)不擅長(zhǎng)而且是微不足道的效果而弄得文檔結(jié)構(gòu)混亂。這顯然已經(jīng)違反了Web標(biāo)準(zhǔn)的初衷。Web標(biāo)準(zhǔn)就是讓我們以清晰的結(jié)構(gòu)來(lái)組織文檔，好使用DOM方式操作文檔。

舉一個(gè)例子來(lái)說(shuō)，在網(wǎng)頁(yè)制作過(guò)程中的三欄(一般是3個(gè)div標(biāo)簽)布局。很多網(wǎng)頁(yè)制作者都通過(guò)3個(gè)div標(biāo)簽的嵌套來(lái)達(dá)到目的，因?yàn)槿绻磺短祝诖翱诳s小的時(shí)候，div標(biāo)簽會(huì)向下流動(dòng)。

它們是這樣的：

以下為引用的內(nèi)容：
<div id="column1">
        <div id="column2">
                <div id="column3">
                </div>
        </div>
</div>

無(wú)論從結(jié)構(gòu)還是從內(nèi)容或者表現(xiàn)上講，這三欄一般都是等地位的，不應(yīng)該嵌套。嵌套已經(jīng)暗示了它們的附屬關(guān)系。當(dāng)我們使用xml解析工具如 JDOM，DOM4j 或者 DOM的JavaScript(ECMAScript)綁定來(lái)解析這些內(nèi)容時(shí)，我們就會(huì)發(fā)生邏輯上的混亂。

對(duì)Web標(biāo)準(zhǔn)抱有偏見(jiàn)的人可能會(huì)說(shuō)，使用表格布局可以輕松實(shí)現(xiàn)良好的三欄布局。那我們來(lái)看看表格的代碼：

以下為引用的內(nèi)容：
<table>
        <tr>
                <td id="column1"></td>
                <td id="column2"></td>
                <td id="column3"></td>
        </tr>
</table>

可能表格在表現(xiàn)上能容易達(dá)到三欄布局，但是代碼的結(jié)構(gòu)上與上面一樣是多層嵌套。<table>和<tr>標(biāo)簽是是冗余的。

正確的方法應(yīng)該是下面的代碼：

以下為引用的內(nèi)容：
<div id="column1">
</div>
<div id="column2">
</div>
<div id="column3">
</div>

而 http://www.djangoproject.com 這樣使用：

以下為引用的內(nèi)容：
<div id="subwrap">
        <div id="content-main">
        </div>
        <div id="content-related">
        </div>
</div>
<div id="content-extra">
</div>

因?yàn)樗J(rèn)為第三欄只是額外的(extra)。這種布局從代碼上可以看成是兩欄布局，然后第一欄再分成兩欄，所以表現(xiàn)上是三欄。

這樣，符合結(jié)構(gòu)和內(nèi)容的關(guān)系，表現(xiàn)方面我們可以通過(guò)在CSS(級(jí)聯(lián)樣式表)中設(shè)定每一欄的寬度百分比來(lái)完成。或者我們定義每一欄的固定寬度，再定義 body標(biāo)簽的最小寬度(IE6不支持，所以需要把三欄放在一個(gè)div--container里，再定義這個(gè)div的最小寬度)。我們還有更多的方法。

當(dāng)需要表現(xiàn)復(fù)雜的外觀的時(shí)候，我們應(yīng)該怎么辦？比如圓角邊框，那么就使用圖片吧。