HTML学习的本质

原文：http://www.twinsenliang.net/web/20070912.htm

《这将是一场革命》一文出来以后。得到业界大伙的认同，当然与此同时也得到部分来自内部与外部的挑衅，不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了，半夜在一个梦中醒来，梦里正在和小学的同学玩一个游戏——“The Next”。醒来以后觉得自己需要做点什么，于是终于将TMENU修改了（拖了很久了）；然后觉得近期需要对之前提到的五点详细的出一部分实在的案例写得详细点，于是开始写本文。

梦里回到小学，是有道理的。一是那个“The Next”的游戏提醒我，另外一个则是我和飘飘经常和别人说的，要学好HTML先回去看看小学的语文书。回小学的原因是那里的书本不会受到过多的应试教育的干扰，里面的“本质”存有真实性，而语文书这是意味HTML的本质：标题、段落、列表、书目。HTML学习的本质就是该是什么就用什么——Ghost。当然这句话是需要一个解释的，参照的范例就是你的小学语文书。

我们先来看看我们制作网站的历程。记忆中我第一个网站是产生于1998年，当时都是一群用table做网页的人。在table的时代我们觉得最难的题目是什么？

奇特的三行不定列布局：

奇特的一像素边界：

table时代过后（记忆中是2001年前后），出现了第一批使用<div>的人。于是国内吹起了一股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代码是：

<ul class="menu">
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><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></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>

现在的HTML代码是：

<map id="directmenu" class="menu">
<div><a href="#"><span><span>123123</span></span></a>
<a href="#"><span><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><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="#"><span><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></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>

两者的不同点，大家也看到了。多了一块map的标签和一个hn的标签。为什么是这样呢？我们再来看一个例子：操场上面有100台不同牌子，不同外形，不同颜色的车；现在让你将这些车分成若干组，反馈一个列表以供选择。当然，使用列表是大家都会想到的。但是大家有没有想到这个列表能表现什么呢？

引用范例
<ul>
<li>XXX牌子XXX型号</li>
<li>XXX牌子XXX型号</li>
</ul>

再或者

引用范例
<ol>
<li>XXX牌子XXX型号</li>
<li>XXX牌子XXX型号</li>
</ol>

就这上面的列表，我根本就看不清楚这个列表的分类是怎么形成的，为什么一个是有序，一个是无序的。他们是怎么样会这样排，为什么放在一起。很多很多的问题。我们再来看看下面的范例

引用范例
<h3>黄色系列车</h3>
<ul>
<li>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>*
<h3>站点地图导航菜单</h3>
<ul>
<li>连接1</li>
<li>连接2</li>
</ul>

注：*号注释部分为强调站点为推广首要的时候用。

 以上的范例当然是正确的。然而这样的结构就会让人觉得用户极度低能了，站名和副标过后不是站点地图导航菜单么？（特指menu在顶部的站点）而且与此同时HTML本身就提供了一个特指站点地图导航的标签——<map>。既然有一个本身就有这样意义的标签你又何必使用文字去说明呢？你总不会使用<h3>这是一个无序列表</h3><ul>这么白痴吧。大家都知道阿妈是女人啊。我们再看看下面的范例：

引用范例
<h1>站点名称</h1>*
<h2>站点副标</h2>*
<map><div><a href="#">连接1</a> <a href="#">连接2</a></div></map>

注：*号注释部分为强调站点为推广首要的时候用。

是