HTML的本质知识

1、HTML的本质知识HTML学习的本质就是该是什么就用什么Ghost。当然这句话是需要一个解释的，参照的范例就是你的小学语文书。我们先来看看我们制作网站的历程。记忆中我第一个网站是产生于1998年，当时都是一群用table做网页的人。在table的时代我们觉得最难的题目是什么？奇特的三行不定列布局：奇特的一像素边界：table时代过后（记忆中是2001年前后），出现了第一批使用<div>的人。于是国内吹起了一股CSS之风。用法是将他套着若干的table然后利用CSS的绝对定位，还有的加上些JS让他飘来飘去。后面就有人开始研究CSS起来，记得“风人设计”的初期就有若干谈合作的人拿着一本

2、CSS的书和我说这说那的（当然这些人最后都转行了）。在这个时候我们觉得最难的题目是做一个当时被叫做“Java特效”的咚咚。于此时我被一个人提出的XML所吸引，但只是将他看作一种数据储存（其实这也就奠定了Qzone实现的雏形）。时间飞快如梭，2004年5月1日，国际劳动节当天，电子工业出版社出版了一本名为网站重构应用Web标准进行设计的书译。于是国内就遍布了“DIV+CSS”的信念，真正的意味上中国网站重构的跨时代性起步开始了；但另一个角度而言，这本书将中国的WebReBuilder从一个火坑拉出来，丢进了另外的一个火炕。我想我们只能使用看待隋唐盛世的眼光去看待这本书。因为它只是意味一革新的皇帝

3、和新的朝代的诞生，并没有从本质上面推动社会的变革和进化。这本书将table嵌套，变成了div嵌套。当时最流行的话语（直到现在）是“我的网站是DIV+CSS做的。”这个时候我并没有加入这个行列，一直是在等待；因为我有一个很关键的问题没有解决“为什么要DIV+CSS而不是TABLE+CSS”：引用这将是一场革命内容：我们先看看一下两个范例。table做的，div做的表面上他们是一样的，但是一旦产品经理提出修改，表现需要变化。对于div会很轻易的变化成为这个 范例 。范例可以看出不修改html的情况下，table就是打死也完成不了这样的改变。“DIV+CSS”比“TABLE+CSS”优秀就是排版的自

4、由化，就以上例为题，table就一辈子都无法做到。一直到了Qzone3.0前后，我才开始想明白上面的答案，历时差不多有一年。接着在Qzone4.0的时候动用了三个标记“dl、dt、dd”和 TMENU 的诞生。现在非常悔恨的是我也将大家带入了另一个跨时代的起步“XHTML+CSS”，同时也是将大家带进了一个新的火炕。进火炕容易出火炕难，我才开始明白为什么两个重构名人阿捷、老甘会在互联网当中逐渐消失。我开始不去怪责他们之前的事情，更多的是一种体谅，与此心中也暗下决心。便开始了进行铺垫“良性竞争”的“SB”观念。历史路程如上，回归到HTML学习的本质就是该是什么就用什么；意思就是标签不能滥用，还原

5、到内容的本质的标签才是合格的标签。就以 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>现在的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台不同牌子，不同外形，不同颜色的车；现在让你将这些车分成若干组，反馈一个列表以供选择。当然，使用列表是大家都会想到的。但是大家有没有想到这个列表能表现什么呢？引用范例 <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>注：*号注释部分为强调站点为推广首要的时候用。以上的范例当然是正确的。然而这样的结构就会让人觉得用户极度低能了，站名和副标过后不是站点地图导航菜单么？（特指menu在顶部的站点）而且与此同时HTML本身就提供了一个特指站点地图导航的标签<map>。既然有一个本身就有这样意义的标签你又何必使用文字去说明呢？你总不会使用<h3>这是一个无序列表</h3><ul>这么白痴吧。大家都知道阿妈是女人啊。我们再看看下面的范例：引用范例 <h1>站点名称</h1>*<h2>站点副标</h2>*<map><div><a href="#">连接1</a> <a href="#">连接2</a></div></map>注：*号注释部分为强调站点为推广首要的时候用。是不是，代码更加的简单清晰明了了。引用内容 我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。