暈倒：“用web2.0來(lái)制作符合標(biāo)準(zhǔn)的頁(yè)面”

互聯(lián)網(wǎng) ? 發(fā)布時(shí)間：2008-10-17 19:58:15 ? 作者：佚名 ? 我要評(píng)論

今天有人和我談一個(gè)網(wǎng)站開(kāi)發(fā)項(xiàng)目，當(dāng)說(shuō)到具體要求時(shí)，他給我來(lái)了這么一句“用web2.0來(lái)制作符合標(biāo)準(zhǔn)的頁(yè)面”，我當(dāng)場(chǎng)暈倒，心想你不懂也別裝啊，不過(guò)最后還是決定進(jìn)行一次面談，可是他的這句話卻引起了我對(duì)網(wǎng)站重構(gòu)的重新思考。

web2.0是一個(gè)歷史性概念，是一個(gè)

今天有人和我談一個(gè)網(wǎng)站開(kāi)發(fā)項(xiàng)目，當(dāng)說(shuō)到具體要求時(shí)，他給我來(lái)了這么一句“用web2.0來(lái)制作符合標(biāo)準(zhǔn)的頁(yè)面”，我當(dāng)場(chǎng)暈倒，心想你不懂也別裝啊，不過(guò)最后還是決定進(jìn)行一次面談，可是他的這句話卻引起了我對(duì)網(wǎng)站重構(gòu)的重新思考。

web2.0是一個(gè)歷史性概念，是一個(gè)階段，更是一種互聯(lián)網(wǎng)模式，但絕對(duì)不是一種技術(shù)；而web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，它的核心是內(nèi)容，結(jié)構(gòu)，表現(xiàn)和行為的徹底分離(我自己將內(nèi)容也添加進(jìn)去了)，這對(duì)于以后改版和維護(hù)是十分方便的，如果要說(shuō)對(duì)瀏覽速度有多么大的改進(jìn)，我不感茍同。

說(shuō)到重構(gòu)，當(dāng)然得從內(nèi)容說(shuō)起，因?yàn)槿魏蔚母倪M(jìn)都是為了更好的顯示內(nèi)容。那什么是內(nèi)容？內(nèi)容應(yīng)該是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等，從本質(zhì)上簡(jiǎn)潔地講，內(nèi)容就是指最原始的數(shù)據(jù)，是構(gòu)成頁(yè)面的基礎(chǔ)。

下面就得主要說(shuō)頁(yè)面重點(diǎn)–結(jié)構(gòu)了，因?yàn)槊撾x了結(jié)構(gòu)的內(nèi)容幾乎不能使用，一個(gè)具有良好語(yǔ)義的結(jié)構(gòu)會(huì)使內(nèi)容更加具有邏輯性和易用性，所以說(shuō)內(nèi)容和結(jié)構(gòu)是無(wú)法分割的整體，也許這也是標(biāo)準(zhǔn)未把內(nèi)容分離明確指出的原因。

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

不往下說(shuō)了，好象有點(diǎn)跑題了，回到結(jié)構(gòu)上來(lái)，根據(jù)設(shè)計(jì)給出的效果圖，我們?cè)陂_(kāi)始之前應(yīng)通盤考慮所有要素, 爭(zhēng)取用通用的結(jié)構(gòu)來(lái)獲得相同的效果, 而不是不斷定義那些小巧的div單元，從而努力達(dá)到設(shè)計(jì)中最理想的境界：前臺(tái)閉著眼睛都能知道后臺(tái)輸出的是什么樣的xhtml結(jié)構(gòu)代碼，為了這一目的我們就必須得固定xhtml，具體實(shí)現(xiàn)方法就是用H系列來(lái)劃分頁(yè)面的大結(jié)構(gòu)，用div來(lái)模塊化局部區(qū)域。

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

關(guān)于表現(xiàn)和行為我不想多說(shuō)什么，只進(jìn)行一下簡(jiǎn)單的描述：沒(méi)有添加樣式的純xhtml結(jié)構(gòu)是有UE的，但沒(méi)有UI，這就使得css的地位永遠(yuǎn)都不可能超越xhtml的核心地位，當(dāng)然我并沒(méi)有說(shuō)表現(xiàn)不重要，因?yàn)榫臀覀€(gè)人而言，一份沒(méi)有調(diào)料的燒烤或一部沒(méi)有藝術(shù)的電影對(duì)我都是沒(méi)有吸引力的。至于javascript，隨著對(duì)ajax的接觸和了解，越來(lái)越體會(huì)到了它的特效作用，不過(guò)站在行為層而言，它的使用更多是和CSS結(jié)合在一起的，這也就讓你在學(xué)習(xí)CSS時(shí)多了另一個(gè)任務(wù)。

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

相關(guān)文章

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

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

這篇文章主要介紹了隱藏 Web 中的元素方法及優(yōu)缺點(diǎn)教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-13

這篇文章主要介紹了小項(xiàng)目中怎么防止Vue的閃現(xiàn)畫(huà)面效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-08

一般來(lái)說(shuō)html結(jié)構(gòu) css表現(xiàn) javascrip行為，網(wǎng)頁(yè)布局要考慮到結(jié)構(gòu)，表現(xiàn)，行為分離原則，首先重點(diǎn)放在結(jié)構(gòu)和語(yǔ)義化上面，再考慮CSS，JS等，便于后期維護(hù)和分析2020-04-17

今天在制作頁(yè)面的時(shí)候發(fā)現(xiàn)兩個(gè)div之間有空隙導(dǎo)致兩個(gè)本來(lái)應(yīng)該在一起的效果，這里結(jié)合一下解決方法2020-03-13

今天看到一個(gè)網(wǎng)頁(yè)使用了rgba不知道這個(gè)a是什么意思，原來(lái)是因?yàn)榱送讼旅娴念伾壬厦娴臏\一些特別用rgba確實(shí)很方便，頁(yè)面也不突兀,特分享一下需要的朋友可以參考下2020-03-05

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

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

這篇文章主要介紹了白話分析自適應(yīng)跟響應(yīng)式的區(qū)別詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-02-11

最新評(píng)論

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。