《這將是一場革命》一文出來以後。得到業界大伙的認同,當然同時也得到部分來自內部與外部的挑釁,不過的更加多的是更多人來尋問每一個點的細節。今晚回家很早就睡了,半夜在一個夢中醒來,夢裡正在和小學的同學玩一個遊戲——「The Next」。醒來以後覺得自己需要做點什麼,於是終於將TMENU修改了(拖了很久了);然後覺得近期需要對之前提到的五點詳細的出一部分實在的案例寫得詳細點,於是開始寫本文。
夢裡回到小學,是有道理的。一是那個「The Next」的遊戲提醒我,另外一個則是我和飄飄經常和別人說的,要學好HTML先回去看看小學的語文書。回小學的原因是那裡的書本不會受到過多的應試教育的干擾,裡面的「本質」存有真實性,而語文書這是意味HTML的本質:標題、段落、列表、書目。
HTML學習的本質就是該是什麼就用什麼——Ghost。當然這句話是需要一個解釋的,參考的範例就是你的小學文。
我們先來看看我們製作網站的歷程。記憶中我第一個網站是產生於1998年,當時都是一群用table做網頁的人。在table的時代我們覺得最難的題目是什麼?
奇特的三行不定列佈局:
奇特的一像素邊界:
table時代過後(記憶中是2001年前後),出現了第一批使用
的人。於是國內吹起了一股CSS之風。用法是將他套著若干的table然後利用CSS的絕對定位,還有的加上些JS讓他飄來飄去。後面就有人開始研究CSS起來,記得「風人設計」的初期就有若干談合作的人拿著一本CSS的書和我說這說那的(當然這些人最後都轉行了)。這時候我們覺得最難的題目是做一個當時被叫做「Java特效」的咚咚咚。於此時我被一個人提出的XML所吸引,但只是將他看作一種資料儲存(其實這也就奠定了Qzone實現的雛形)。
時間飛快如梭,2004年5月1日,國際勞動節當天,電子工業出版社出版了一本名為《網站重構-應用Web標準進行設計》的書譯。於是國內就遍佈了「DIV CSS」的信念,真正的意義上中國網站重構的跨時代性起步開始了;但另一個角度而言,這本書將中國的WebReBuilder從一個火坑拉出來,丟進了另外的一個火炕。我想我們只能用看待隋唐盛世的眼光去看待這本書。因為它只是意味一革新的皇帝和新的朝代的誕生,並沒有從本質上推動社會的改變和進化。這本書將table嵌套,變成了div嵌套。當時最流行的話語(直到現在)是「我的網站是'DIV CSS'做的。」這個時候我並沒有加入這個行列,一直是在等待;因為我有一個很關鍵的問題沒有解決「為什麼要'DIV CSS'而不是'TABLE CSS'”:
引用《這將是一場革命》內容:
我們先來看看兩個範例。 table做的,div做的表面上他們是一樣的,但一旦產品經理提出修改,表現需要改變。對於div會很輕易的變化成為這個 範例 。範例可以看出不修改html的情況下,table就是打死也完成不了這樣的改變。 「DIV CSS」比「TABLE CSS」優秀就是排版的自由化,就以上例為題,table就一輩子都無法做到。
一直到了Qzone3.0前後,我才開始想明白上面的答案,歷時差不多有一年。接著在Qzone4.0的時候動用了三個標記「dl、dt、dd」和 TMENU 的誕生。現在非常悔恨的是我也將大家帶入了另一個跨時代的起步——“XHTML CSS”,同時也是將大家帶進了一個新的火炕。進火炕容易出火炕難,我才開始明白為什麼兩個重構名人──阿捷、老甘會在網路當中逐漸消失。我開始不去怪罪他們之前的事情,更多的是一種體諒,與此心中也暗下決心。便開始了進行鋪墊「良性競爭」的「SB」觀念。
歷史路程如上,回歸到HTML學習的本質就是該是什麼就用什麼;意思就是標籤不能濫用,還原到內容的本質的標籤才是合格的標籤。就以 TMENU 為範。
之前的HTML程式碼是:
現在的HTML程式碼是:
以下是一個選單列表
123123
兩者的不同點,大家也看到了。多了一塊map的標籤和一個hn的標籤。為什麼是這樣呢?我們再來看一個例子:操場上面有100台不同牌子,不同外形,不同顏色的車;現在讓你將這些車分成若干組,回饋一個清單以供選擇。當然,使用清單是大家都會想到的。但大家有沒有想到這個清單能表現什麼呢?
引用範例
- XXX牌子XXX型號
- XXX牌子XXX型號
XXX牌子XXX型號
再或者
XXX牌子XXX型號XXX牌子XXX型號
就這上面的列表,我根本就看不清楚這個列表的分類是怎麼形成的,為什麼一個是有序,一個是無序的。他們是怎麼樣會這樣排,為什麼要放在一起。很多很多的問題。我們再來看看下面的範例
- 引用範例
- 黃色系列車
X型號牌子XXX型號
XXX. 🎜>
再或者