Web標準學習:保持清晰的文檔結構

來源:互聯網
上載者:User
web|web標準

我十分支援Web標準,並且認為它提出的文件物件模型(DOM,Document Object Model)是非常合理而且有用的。文件物件模型讓我們脫離字元,在結構層面進階方式操作文檔。

在網頁製作(HTML/XHTML)方面,遵循Web標準可以使網站的結構更加合理。但是,新的標準總會導致一部分舊的網頁製作者的排斥,很簡單,因為他們無法掌握新的標準或者/同時他們認為不需要新的標準,原來的方式已經夠用了。我不跟後一部分的人討論。

應用標準的時候,有些網頁製作者已經走進了一些誤區。往往為了一個標準不擅長而且是微不足道的效果而弄得文檔結構混亂。這顯然已經違反了Web標準的初衷。Web標準就是讓我們以清晰的結構來組織文檔,好使用DOM方式操作文檔。

舉一個例子來說,在網頁製作過程中的三欄(一般是3個div標籤)布局。很多網頁製作者都通過3個div標籤的嵌套來達到目的,因為如果不嵌套,在視窗縮小的時候,div標籤會向下流動。

它們是這樣的:

<div id="column1">
        <div id="column2">
                <div id="column3">
                </div>
        </div>
</div>

無論從結構還是從內容或者表現上講,這三欄一般都是等地位的,不應該嵌套。嵌套已經暗示了它們的附屬關係。當我們使用xml解析工具如 JDOM,DOM4j 或者 DOM的JavaScript(ECMAScript)綁定 來解析這些內容時,我們就會發生邏輯上的混亂。

對Web標準抱有偏見的人可能會說,使用表格版面配置可以輕鬆實現良好的三欄布局。那我們來看看錶格的代碼:

<table>
        <tr>
                <td id="column1"></td>
                <td id="column2"></td>
                <td id="column3"></td>
        </tr>
</table>

可能表格在表現上能容易達到三欄布局,但是代碼的結構上與上面一樣是多層嵌套。<table>和<tr>標籤是是冗餘的。

正確的方法應該是下面的代碼:

<div id="column1">
</div>
<div id="column2">
</div>
<div id="column3">
</div>

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

<div id="subwrap">
        <div id="content-main">
        </div>
        <div id="content-related">
        </div>
</div>
<div id="content-extra">
</div>

因為它認為第三欄只是額外的(extra)。這種布局從代碼上可以看成是兩欄布局,然後第一欄再分成兩欄,所以表現上是三欄。

這樣,符合結構和內容的關係,表現方面我們可以通過在CSS(階層式樣式表)中設定每一欄的寬度百分比來完成。或者我們定義每一欄的固定寬度,再定義 body標籤的最小寬度(IE6不支援,所以需要把三欄放在一個div--container裡,再定義這個div的最小寬度)。我們還有更多的方法。

當需要表現複雜的外觀的時候,我們應該怎麼辦?比如圓角邊框,那麼就使用圖片吧。

我們來看一個版面和代碼結構都非常好的網頁 http://www.recyclenow.com 的首頁。下面是它的截圖和使用 Firefox 的 DOM Inspector外掛程式查看它的DOM結構。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。