HTML的本質(zhì)知識

1、HTML的本質(zhì)知識HTML學習的本質(zhì)就是該是什么就用什么Ghost。當然這句話是需要一個解釋的，參照的范例就是你的小學語文書。我們先來看看我們制作網(wǎng)站的歷程。記憶中我第一個網(wǎng)站是產(chǎn)生于1998年，當時都是一群用table做網(wǎng)頁的人。在table的時代我們覺得最難的題目是什么？奇特的三行不定列布局：奇特的一像素邊界：table時代過后（記憶中是2001年前后），出現(xiàn)了第一批使用<div>的人。于是國內(nèi)吹起了一股CSS之風。用法是將他套著若干的table然后利用CSS的絕對定位，還有的加上些JS讓他飄來飄去。后面就有人開始研究CSS起來，記得“風人設計”的初期就有若干談合作的人拿著一本

2、CSS的書和我說這說那的（當然這些人最后都轉行了）。在這個時候我們覺得最難的題目是做一個當時被叫做“Java特效”的咚咚。于此時我被一個人提出的XML所吸引，但只是將他看作一種數(shù)據(jù)儲存（其實這也就奠定了Qzone實現(xiàn)的雛形）。時間飛快如梭，2004年5月1日，國際勞動節(jié)當天，電子工業(yè)出版社出版了一本名為網(wǎng)站重構應用Web標準進行設計的書譯。于是國內(nèi)就遍布了“DIV+CSS”的信念，真正的意味上中國網(wǎng)站重構的跨時代性起步開始了；但另一個角度而言，這本書將中國的WebReBuilder從一個火坑拉出來，丟進了另外的一個火炕。我想我們只能使用看待隋唐盛世的眼光去看待這本書。因為它只是意味一革新的皇帝

3、和新的朝代的誕生，并沒有從本質(zhì)上面推動社會的變革和進化。這本書將table嵌套，變成了div嵌套。當時最流行的話語（直到現(xiàn)在）是“我的網(wǎng)站是DIV+CSS做的。”這個時候我并沒有加入這個行列，一直是在等待；因為我有一個很關鍵的問題沒有解決“為什么要DIV+CSS而不是TABLE+CSS”：引用這將是一場革命內(nèi)容：我們先看看一下兩個范例。table做的，div做的表面上他們是一樣的，但是一旦產(chǎn)品經(jīng)理提出修改，表現(xiàn)需要變化。對于div會很輕易的變化成為這個 范例 。范例可以看出不修改html的情況下，table就是打死也完成不了這樣的改變?！癉IV+CSS”比“TABLE+CSS”優(yōu)秀就是排版的自

4、由化，就以上例為題，table就一輩子都無法做到。一直到了Qzone3.0前后，我才開始想明白上面的答案，歷時差不多有一年。接著在Qzone4.0的時候動用了三個標記“dl、dt、dd”和 TMENU 的誕生?，F(xiàn)在非?；诤薜氖俏乙矊⒋蠹?guī)肓肆硪粋€跨時代的起步“XHTML+CSS”，同時也是將大家?guī)нM了一個新的火炕。進火炕容易出火炕難，我才開始明白為什么兩個重構名人阿捷、老甘會在互聯(lián)網(wǎng)當中逐漸消失。我開始不去怪責他們之前的事情，更多的是一種體諒，與此心中也暗下決心。便開始了進行鋪墊“良性競爭”的“SB”觀念。歷史路程如上，回歸到HTML學習的本質(zhì)就是該是什么就用什么；意思就是標簽不能濫用，還原

5、到內(nèi)容的本質(zhì)的標簽才是合格的標簽。就以 TMENU 為范。之前的HTML代碼是：<ul class="menu"><li><a href="#"><span><span>123123</span></span></a></li><li><a href="#"><span><span>123123</span></span></a></li&

6、gt;<li><a href="#"><span><span>123123</span></span></a></li><li><a href="#" class="now"><span><span>123123</span></span></a></li><li><a href="#"><spa

7、n><span>123123</span></span></a></li></ul>現(xiàn)在的HTML代碼是：<map id="directmenu" class="menu"><div><a href="#"><span><span>123123</span></span></a><a href="#"><span><

8、;span>123123</span></span></a><a href="#"><span><span>123123</span></span></a><a href="#" class="now"><span><span>123123</span></span></a><a href="#"><span>

9、;<span>123123</span></span></a></div></map><h2>以下是一個菜單列表</h2><ul class="menu"><li><a href="#"><span><span>123123</span></span></a></li><li><a href="#"><s

10、pan><span>123123</span></span></a></li><li><a href="#"><span><span>123123</span></span></a></li><li><a href="#" class="now"><span><span>123123</span></span&

11、gt;</a></li><li><a href="#"><span><span>123123</span></span></a></li></ul>兩者的不同點，大家也看到了。多了一塊map的標簽和一個hn的標簽。為什么是這樣呢？我們再來看一個例子：操場上面有100臺不同牌子，不同外形，不同顏色的車；現(xiàn)在讓你將這些車分成若干組，反饋一個列表以供選擇。當然，使用列表是大家都會想到的。但是大家有沒有想到這個列表能表現(xiàn)什么呢？引用范例 <ul&

12、gt;<li>XXX牌子XXX型號</li><li>XXX牌子XXX型號</li></ul>再或者引用范例 <ol><li>XXX牌子XXX型號</li><li>XXX牌子XXX型號</li></ol>就這上面的列表，我根本就看不清楚這個列表的分類是怎么形成的，為什么一個是有序，一個是無序的。他們是怎么樣會這樣排，為什么放在一起。很多很多的問題。我們再來看看下面的范例引用范例 <h3>黃色系列車</h3><ul><li&g

13、t;XXX牌子XXX型號</li><li>XXX牌子XXX型號</li></ul>再或者引用范例 <h3>出廠年份</h3><ol><li>XXX牌子XXX型號</li><li>XXX牌子XXX型號</li></ol>上述的范例，大家是否一看就一目了然了。所有的來龍去脈都變得清清楚楚。然而為什么TMENU代碼里面還有map標簽呢？我們看看一個范例引用范例 <h1>站點名稱</h1>*<h2>站點副標</h2&g

14、t;*<h3>站點地圖導航菜單</h3><ul><li>連接1</li><li>連接2</li></ul>注：*號注釋部分為強調(diào)站點為推廣首要的時候用。以上的范例當然是正確的。然而這樣的結構就會讓人覺得用戶極度低能了，站名和副標過后不是站點地圖導航菜單么？（特指menu在頂部的站點）而且與此同時HTML本身就提供了一個特指站點地圖導航的標簽<map>。既然有一個本身就有這樣意義的標簽你又何必使用文字去說明呢？你總不會使用<h3>這是一個無序列表</h3><ul>這么白癡吧。大家都知道阿媽是女人啊。我們再看看下面的范例：引用范例 <h1>站點名稱</h1>*<h2>站點副標</h2>*<map><div><a href="#">連接1</a> <a href="#">連接2</a></div></map>注：*號注釋部分為強調(diào)站點為推廣首要的時候用。是不是，代碼更加的簡單清晰明了了。引用內(nèi)容 我有個怪癖。我很喜歡在面試的時候我總是要先考面試人XHTML。