首頁  >  文章  >  web前端  >  HTML其實就是學習幾個重要標籤的應用程式_HTML/Xhtml_網頁製作

HTML其實就是學習幾個重要標籤的應用程式_HTML/Xhtml_網頁製作

WBOY
WBOY原創
2016-05-16 16:45:551305瀏覽

《這將是一場革命》一文出來以後。得到業界大伙的認同,當然同時也得到部分來自內部與外部的挑釁,不過的更加多的是更多人來尋問每一個點的細節。今晚回家很早就睡了,半夜在一個夢中醒來,夢裡正在和小學的同學玩一個遊戲——「The Next」。醒來以後覺得自己需要做點什麼,於是終於將TMENU修改了(拖了很久了);然後覺得近期需要對之前提到的五點詳細的出一部分實在的案例寫得詳細點,於是開始寫本文。
夢裡回到小學,是有道理的。一是那個「The Next」的遊戲提醒我,另外一個則是我和飄飄經常和別人說的,要學好HTML先回去看看小學的語文書。回小學的原因是那裡的書本不會受到過多的應試教育的干擾,裡面的「本質」存有真實性,而語文書這是意味HTML的本質:標題、段落、列表、書目。 HTML學習的本質就是該是什麼就用什麼——Ghost。當然這句話是需要一個解釋的,參考的範例就是你的小學文。
我們先來看看我們製作網站的歷程。記憶中我第一個網站是產生於1998年,當時都是一群用table做網頁的人。在table的時代我們覺得最難的題目是什麼?
奇特的三行不定列佈局:
HTML其實就是學習幾個重要標籤的應用程式_HTML/Xhtml_網頁製作
奇特的一像素邊界:
HTML其實就是學習幾個重要標籤的應用程式_HTML/Xhtml_網頁製作
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台不同牌子,不同外形,不同顏色的車;現在讓你將這些車分成若干組,回饋一個清單以供選擇。當然,使用清單是大家都會想到的。但大家有沒有想到這個清單能表現什麼呢?
引用範例

  1. XXX牌子XXX型號
  2. XXX牌子XXX型號

XXX牌子XXX型號


再或者

    引用範例

  • XXX牌子XXX型號

XXX牌子XXX型號


XXX牌子XXX型號



    就這上面的列表,我根本就看不清楚這個列表的分類是怎麼形成的,為什麼一個是有序,一個是無序的。他們是怎麼樣會這樣排,為什麼要放在一起。很多很多的問題。我們再來看看下面的範例
  1. 引用範例
  2. 黃色系列車


X型號牌子XXX型號
XXX. 🎜>
再或者

引用範例

    出廠年份


    型號牌子XXX型號



    上述的範例,大家是否一看就一目了然了。所有的來龍去脈都變得清清楚楚。然而為什麼TMENU程式碼裡面還有map標籤呢?我們來看看一個範例

    以上的範例當然是正確的。然而這樣的結構就會讓人覺得用戶極度低能了,站名和副標過後不是網站地圖導航選單麼? (
    特別指menu在頂部的站點
    )而且同時HTML本身就提供了一個特別指點站點地圖導航的標籤-
    。既然有一個本身就有這樣意義的標籤你又何必用文字去說明呢?你總是不會用

    這是一個無序列表


    這麼白痴吧。大家都知道阿媽是女人啊。我們再來看看下面的範例:


    是不是,程式碼更加的簡單清晰明了。
    其實要走好WebReBuild的第一步HTML不會很難的,回去看看小學的語文書,想想最本質的,多點問問自己「為什麼?」。和做人一樣,該是怎麼樣就應該怎麼樣,不應該被複雜的社會和繁瑣的人際關係幹擾你,堅持做人腳踏實地的原則,踏實地工作和做人,是金子總是要發光的。

    引用內容

    我有個怪癖。我很喜歡在面試的時候總是要先考面試人XHTML。就好像以前師傅招收學徒一樣,能力和慧根屬其次,人品首當其衝。

    我以為,XHTML好比一個人的本質,CSS好比人的處事方式和態度,JS好比人做事的行為以及作風。三者的分離再加上些週邊的SEO、人機互動也就是我們所說的網站重構,也就是一個很不錯的人。之前總是有一部分人認為CSS就是網站的最主要的元素,其實自然而然的也代表了一種人生觀。的確,一個人沒有好的處事方式和態度很難在現在的社會很好的存活;但是這個處事的方式和態度位置過於偏重了,就成了一個善於欺騙、做事不擇手段的人。
    引用範例

    站點名稱
    *

    站點副標
    *

    • 連接1
    • 連接2


    註:*號註釋部分為強調站點為推廣首要的時候用。 引用範例站點名稱*站點副標*站點地圖導航菜單連接1連接2 註:*號註釋部分為強調站點為推廣首要的時候用。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn