暈倒：“用web2.0來制作符合標準的頁面”

互聯網 ? 發布時間：2008-10-17 19:58:15 ? 作者：佚名 ? 我要評論

今天有人和我談一個網站開發項目，當說到具體要求時，他給我來了這么一句“用web2.0來制作符合標準的頁面”，我當場暈倒，心想你不懂也別裝啊，不過最后還是決定進行一次面談，可是他的這句話卻引起了我對網站重構的重新思考。

web2.0是一個歷史性概念，是一個

今天有人和我談一個網站開發項目，當說到具體要求時，他給我來了這么一句“用web2.0來制作符合標準的頁面”，我當場暈倒，心想你不懂也別裝啊，不過最后還是決定進行一次面談，可是他的這句話卻引起了我對網站重構的重新思考。

web2.0是一個歷史性概念，是一個階段，更是一種互聯網模式，但絕對不是一種技術；而web標準是一系列標準的集合，它的核心是內容，結構，表現和行為的徹底分離(我自己將內容也添加進去了)，這對于以后改版和維護是十分方便的，如果要說對瀏覽速度有多么大的改進，我不感茍同。

說到重構，當然得從內容說起，因為任何的改進都是為了更好的顯示內容。那什么是內容？內容應該是頁面實際要傳達的真正信息，包含數據、文檔或者圖片等，從本質上簡潔地講，內容就是指最原始的數據，是構成頁面的基礎。

下面就得主要說頁面重點–結構了，因為脫離了結構的內容幾乎不能使用，一個具有良好語義的結構會使內容更加具有邏輯性和易用性，所以說內容和結構是無法分割的整體，也許這也是標準未把內容分離明確指出的原因。

一提起結構，很多人大腦里就迸出“用div css布局”的概念，我先不管這種意識的對錯，因為我一直很喜歡先弄清楚一個事物的概念：結構目前劃分為兩部分，一是語義結構，二是代碼結構，語義結構是靠標簽自身的語義產生(附注：關于到底什么是語義，我一直沒有大搞明白，不過現在自己可以明確的一點是：語義含有部分結構的概念，卻不等于結構，同樣語義也和樣式無關)，代碼結構則是面向程序的，需要人工的參與。下來說我對上面那種意識的看法,首先我認為布局這個詞匯是不應該出現的，也許這都是IE惹的禍，另外必須糾正一個錯誤的概念，標準是提倡用xhtml css而不是div css，這個就得歸罪于那些推廣標準的朋友了，不能為快速取得成效而迷惑學習者啊，開個玩笑。既然說到div與table了，我想順便說下二者的區別：div有語義且是面向代碼結構的，它代表部分,用于在文檔中定義一個分割,通過分割來展現xml化的節點結構,通過分割產生具有結構的行,關于節點和行的具體應用，在即將出世的xhtml2.0中已經出現了，它用section代表節點，line表示行；table的重心應該是在產生數據列，顯示表狀數據，而絕不應該用來劃分結構。但這時候可能有朋友要提出問題了：如果顯示的表狀數據是單列多行，那么使用ul/ol不也可以實現嗎？假如你真有如此疑問，那我得說你不清楚表狀數據的概念了，表狀數據指擴展趨勢是列的數據，所以當你預計擴展的趨勢是產生列的時候，哪怕它只有一列也應該使用table，而不能運用列表，因為ul/ol的重心是在產生數據級上,對于二者的正確把握和應用,關鍵得看個人對未來頁面結構的預見性.

不往下說了，好象有點跑題了，回到結構上來，根據設計給出的效果圖，我們在開始之前應通盤考慮所有要素, 爭取用通用的結構來獲得相同的效果, 而不是不斷定義那些小巧的div單元，從而努力達到設計中最理想的境界：前臺閉著眼睛都能知道后臺輸出的是什么樣的xhtml結構代碼，為了這一目的我們就必須得固定xhtml，具體實現方法就是用H系列來劃分頁面的大結構，用div來模塊化局部區域。

在模塊化局部的時候，由于xhtml中有意義的專用元素可能不夠用，且它又不能象XML那樣創建自己的元素，所以就必須通過添加id或class來賦予它們額外的意義。關于二者的區別，簡單來講就是，id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。具體說來，在XHTML的結構中，科學的方法是大結構尤其外圍元素盡量用id,而class盡量在結構內部使用,使其具有通用性,但最好不要讓class包含id,它倆之間有點類似于父子關系，但絕不理解為就是父子或爺孫關系。

關于表現和行為我不想多說什么，只進行一下簡單的描述：沒有添加樣式的純xhtml結構是有UE的，但沒有UI，這就使得css的地位永遠都不可能超越xhtml的核心地位，當然我并沒有說表現不重要，因為就我個人而言，一份沒有調料的燒烤或一部沒有藝術的電影對我都是沒有吸引力的。至于javascript，隨著對ajax的接觸和了解，越來越體會到了它的特效作用，不過站在行為層而言，它的使用更多是和CSS結合在一起的，這也就讓你在學習CSS時多了另一個任務。

原文連接：http://blog.5u96.cn/article.asp?id=30

相關文章

這篇文章主要介紹了告別硬編碼讓你的前端表格自動計算,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-27

這篇文章主要介紹了淺析Table 和 div 的簡介及用法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-25

這篇文章主要介紹了隱藏 Web 中的元素方法及優缺點教程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-13

這篇文章主要介紹了小項目中怎么防止Vue的閃現畫面效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-08

一般來說html結構 css表現 javascrip行為，網頁布局要考慮到結構，表現，行為分離原則，首先重點放在結構和語義化上面，再考慮CSS，JS等，便于后期維護和分析2020-04-17

今天在制作頁面的時候發現兩個div之間有空隙導致兩個本來應該在一起的效果，這里結合一下解決方法2020-03-13

今天看到一個網頁使用了rgba不知道這個a是什么意思，原來是因為了忘了下面的顏色比上面的淺一些特別用rgba確實很方便，頁面也不突兀,特分享一下需要的朋友可以參考下2020-03-05

這篇文章主要介紹了顏色之ARGB與RGB、RGBA的區別與介紹,需要的朋友可以參考下2020-03-05

這篇文章主要介紹了解決document.getElementBy系列方法獲取不到對象的問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-14

這篇文章主要介紹了白話分析自適應跟響應式的區別詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-02-11

最新評論

總結

以上是生活随笔為你收集整理的html基于web2.0标准,晕倒：“用web2.0来制作符合标准的页面”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。