符合WebStandards的結構清晰的xhtml文檔_Web標準教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
我們支持Web Standards，并且認為它提出的文檔對象模型(DOM，Document Object Model)是非常合理而且有用的，也是十分必要的，代表了一種潮流和進步。文檔對象模型讓我們脫離字符，在結構層面高級方式來操作文檔。
在網(wǎng)頁制作(HTML/XHTML)方面，遵循Web Standards可以使網(wǎng)站的結構更加合理。但是，新的標準總會導致一部分舊的網(wǎng)頁制作者的排斥，很簡單，因為他們無法把握新的標準或者與此同時他們認為不需要新的標準，原來的方式已經(jīng)夠用了。我不跟排斥與抵制的那部分人討論。
應用標準的時候，有些網(wǎng)頁制作者已經(jīng)走進了一些誤區(qū)。往往為了一個標準不擅長而且是微不足道的效果而弄得文檔結構混亂。這顯然已經(jīng)違反了Web Standards的初衷。Web Standards的初衷就是讓我們以清楚的結構來組織文檔，以便于使用DOM方式操作文檔。
舉一個例子來說，在網(wǎng)頁制作過程中的三欄(一般是3個div標簽)布局。很多網(wǎng)頁制作者都通過3個div標簽的嵌套來達到目的，因為假如不嵌套，在窗口縮小的時候，div標簽會向下流動。
它們是這樣的：
無論從結構還是從內容或者表現(xiàn)上講，這三欄一般都是等地位的，不應該嵌套。嵌套已經(jīng)暗示了它們的附屬關系。當我們使用xml解析工具如 JDOM，DOM4j 或者 DOM的JavaScript(ECMAScript)綁定 來解析這些內容時，我們就會發(fā)生邏輯上的混亂。
對Web Standards抱有偏見的人可能會說，使用表格布局可以輕松實現(xiàn)良好的三欄布局。那我們來看看表格的代碼：
可能表格在表現(xiàn)上能輕易達到三欄布局，但是代碼的結構上與上面一樣是多層嵌套。<table>和<tr>標簽是是冗余的。
正確的方法應該是下面的代碼：
而有人是這樣使用的：
因為它認為第三欄只是額外的(extra)。這種布局從代碼上可以看成是兩欄布局，然后第一欄再分成兩欄，所以表現(xiàn)上是三欄。
這樣，符合結構和內容的關系，表現(xiàn)方面我們可以通過在CSS(級聯(lián)樣式表)中設定每一欄的寬度百分比來完成�；蛘呶覀兌x每一欄的固定寬度，再定義 body標簽的最小寬度(IE6不支持，所以需要把三欄放在一個div--container里，再定義這個div的最小寬度)。我們還有更多的方法。
當需要表現(xiàn)復雜的外觀的時候，我們應該怎么辦？比如圓角邊框，那么就使用圖片吧。
我們來看一個版面和代碼結構都非常好的首頁。下面是它的截圖和使用 Firefox 的 DOM Inspector插件查看它的DOM結構。
在網(wǎng)頁制作(HTML/XHTML)方面，遵循Web Standards可以使網(wǎng)站的結構更加合理。但是，新的標準總會導致一部分舊的網(wǎng)頁制作者的排斥，很簡單，因為他們無法把握新的標準或者與此同時他們認為不需要新的標準，原來的方式已經(jīng)夠用了。我不跟排斥與抵制的那部分人討論。
應用標準的時候，有些網(wǎng)頁制作者已經(jīng)走進了一些誤區(qū)。往往為了一個標準不擅長而且是微不足道的效果而弄得文檔結構混亂。這顯然已經(jīng)違反了Web Standards的初衷。Web Standards的初衷就是讓我們以清楚的結構來組織文檔，以便于使用DOM方式操作文檔。
舉一個例子來說，在網(wǎng)頁制作過程中的三欄(一般是3個div標簽)布局。很多網(wǎng)頁制作者都通過3個div標簽的嵌套來達到目的，因為假如不嵌套，在窗口縮小的時候，div標簽會向下流動。
它們是這樣的：
示例代碼 [m.hl5o.cn]
<div id="column1">
<div id="column2">
<div id="column3">
</div>
</div>
</div>
<div id="column2">
<div id="column3">
</div>
</div>
</div>
無論從結構還是從內容或者表現(xiàn)上講，這三欄一般都是等地位的，不應該嵌套。嵌套已經(jīng)暗示了它們的附屬關系。當我們使用xml解析工具如 JDOM，DOM4j 或者 DOM的JavaScript(ECMAScript)綁定 來解析這些內容時，我們就會發(fā)生邏輯上的混亂。
對Web Standards抱有偏見的人可能會說，使用表格布局可以輕松實現(xiàn)良好的三欄布局。那我們來看看表格的代碼：
示例代碼 [m.hl5o.cn]
<table>
<tr>
<td id="column1"></td>
<td id="column2"></td>
<td id="column3"></td>
</tr>
</table>
<tr>
<td id="column1"></td>
<td id="column2"></td>
<td id="column3"></td>
</tr>
</table>
可能表格在表現(xiàn)上能輕易達到三欄布局，但是代碼的結構上與上面一樣是多層嵌套。<table>和<tr>標簽是是冗余的。
正確的方法應該是下面的代碼：
示例代碼 [m.hl5o.cn]
<div id="column1">
</div>
<div id="column2">
</div>
<div id="column3">
</div>
</div>
<div id="column2">
</div>
<div id="column3">
</div>
而有人是這樣使用的：
示例代碼 [m.hl5o.cn]
<div id="subwrap">
<div id="content-main">
</div>
<div id="content-related">
</div>
</div>
<div id="content-extra">
</div>
<div id="content-main">
</div>
<div id="content-related">
</div>
</div>
<div id="content-extra">
</div>
因為它認為第三欄只是額外的(extra)。這種布局從代碼上可以看成是兩欄布局，然后第一欄再分成兩欄，所以表現(xiàn)上是三欄。
這樣，符合結構和內容的關系，表現(xiàn)方面我們可以通過在CSS(級聯(lián)樣式表)中設定每一欄的寬度百分比來完成�；蛘呶覀兌x每一欄的固定寬度，再定義 body標簽的最小寬度(IE6不支持，所以需要把三欄放在一個div--container里，再定義這個div的最小寬度)。我們還有更多的方法。
當需要表現(xiàn)復雜的外觀的時候，我們應該怎么辦？比如圓角邊框，那么就使用圖片吧。
我們來看一個版面和代碼結構都非常好的首頁。下面是它的截圖和使用 Firefox 的 DOM Inspector插件查看它的DOM結構。
相關Web標準教程：
- 相關鏈接：
- 教程說明：
Web標準教程-符合WebStandards的結構清晰的xhtml文檔
。