今天发现博客上不少流量来自于蓝色理想，跟过去一看，晕倒，原来greengnn这小子把我前年的Web标准面试考题翻出来透气扑灰。
一年半的时间过去了，回头看看还真感慨。这是我出的唯一一道题，只用了一次，亏啊……想到一直以来我并没有给出解释，现在心血来潮，顺带就说说看。因为这道题是完全开放的考题，并没有限制结构（XHTML）也没有限制表现（CSS），所以是没有标准答案的，不过既然是我出的题，自然会有很多考点，或叫考虑吧，用我心目中的“标准答案”来审视面试者的Web标准水平。说起来这道题还有个故事呐……
当时我上跳下窜，举着实例，基本上从扫地的一直说到CEO（很搞笑，由于我频繁的说，说到后来CTO笑着对我说以后咱们不叫你爆牙齿了，你改名叫“Web标准”算了），折腾一个月后总算成功完成对卡当的忽悠，正式决定开始全面部署应用标准。但整个公司就我一个人知道标准（还有个小子知道，但他正沉浸在成功脱离前端设计转入产品设计的快乐中，没啥用处……），新人的培训速度跟不上产品的发布进度，于是急需招个高手来帮我分担工作。在当时要找个高手真是不太容易，更重要的是需要一招制敌，因为万一没找对人，会严重影响高速的整体进度。
相比漫山遍野的程序员，前端人员甚至愿意做前端的少之又少（好坏太直观很容易被挑三捻四工作也复杂待遇还低技术中也最缺乏地位不被重视……），虽然我很清楚，但还是没啥挑选余地。不过幸运的是手中寒酸的，一只手就可以数清的简历中，有一份简历说自己有一年半的标准应用经验，一算时间，2005年初就开始用标准了，哟，只比我晚半年，是不是真的哦！叫来看看！
从2004年8月接触标准后到当时2006年7月，我走过的公司，我的身边，只有一个鬼知道“Web标准”这几个字还会用用，就是那个转进产品设计happy去了的鬼。所以一听说这个家伙有一年半的标准应用经验，我超级饥渴，能有个知音不容易啊。然后06年7月11日上午我就开始设计考题，满怀希望的迎接中午他来面试。
人来了，没啥说的，做题吧。说到做题我小跑一下题，我这个人最恨面试做考题，之前我去面试的公司老让我做题，我是对做题深恶痛绝，妈的当时我已经工作了6年了，还拿着厚厚一叠大学般的试题来考我，那些理论概念模型之类的我知道个屁啊，老子只知道无论遇到什么难题，不畏艰难险阻从各个角度、想各种办法去解决，脑袋是用来转的不是用来记的（“不畏艰难险阻”说起来容易，做起来真不是那么容易的，恰恰都不会说的“放弃”，做起来很容易）。后来几次面试，凡是遇到拿着厚厚一叠题的公司，我只说一句话：“对不起，我是不做题的。”然后当场转身离去。我的题，当然不一样，哈哈哈哈。
我没管他，我想一个用了标准一年半的人，做起来应该很容易，不管他怎么做的，我只需要问他为什么这么做，可是，555，他完全不给我机会……半个小时后我晃了一眼，没写出几行代码，一个小时之后，还是没写出几行代码，甚至甚至连手写代码都相当不熟练（之前还叫我安装dreamweaver……），更不要说页面了。我火热火热的心啊，拔凉拔凉的……受不了了，不让他继续了，在我对他展现了我那颗拔凉拔凉的心之后，临别前还是提醒了他四个字：独立于根。完全不报任何希望，一个连键盘都敲不熟的人知道了也没用，因为还有标记的选择还有各种CSS技巧，怎么可能嘛。
没想到这小子是个两面派，当面一套背后一套，当天晚上给我发来一份答案，我一看，晕倒，基本上接近我心中的“标准答案”。“独立于根”虽然我提醒了他，但他还原了设计稿，说明css水平通过。另外就是选择了p和br而没选择div或li或全p，还有a的位置。只是缺乏两点：1、没有选择hx。2、没有把“附：考题说明”分离出来。我糊涂了，当面一个新手背面一个高手，我信啥呢？
先链一下那张图片吧
我从Gmail中翻出这位兄弟当年给我的答案，截出结构部分，如下：
<!--Begin #Header-->
<div id="header">
<img alt="页面logo" border="0" lowsrc="logo_s.gif" src="logo.gif" id="logo" />
<span id="date">2006 7 11</span>
<p><span class="t">页头</span><br />
页面居中时宽度为700px<br />
页面自适应时宽度自适应<br />
高度固定为100px<br />
色彩代码为:#0099CC
</p>
</div>
<!--End #Header-->
<!--Begin #Content-->
<div id="c1">
<p><span class="t">栏目一</span><br />
宽度固定120px<br />
高度固定为300px<br />
色彩代码为:#FF9900
</p>
<a class="more" href="#" >更多>></a>
</div>
<div id="c2">【同上】</div>
<div id="c3">【同上】</div>
<div id="c4">【同上】</div>
<div id="c5">【同上】</div>
<!--End #Content-->
<!--Begin #Footer-->
<div id="footer">
<p><span class="t">页脚</span><br />
页面居中时宽度为700px<br />
页面自适应时宽度自适应<br />
高度固定为100px<br />
色彩代码为:#009966
</p>
<p class="r"><span class="t">附:考题说明</span><br />
请写出xhtml和css展现<br />
出图片中所有内容<br />
<span class="tWhite">没有标准答案</span><br />
JS部分未来加上
</p>
</div>
<!--End #Footer-->
</body>
当时我心中的答案如下：
<h1>爆牙齿的Web标准面试考题 <span>2007 1 11</span></h1>
<div id="header">
<h2>页头</h2>
<p>
页面居中时宽度为700px<br />
页面自适应时宽度自适应<br />
高度固定为100px<br />
色彩代码为:#0099CC
</p>
</div>
<div id="c1">
<h2>栏目一</h2>
<p>
宽度固定120px<br />
高度固定为300px<br />
色彩代码为:#FF9900
</p>
<a class="more" href="#" >更多>></a>
</div>
<div id="c2" class="x">【同上】</div>
<div id="c3">【同上】</div>
<div id="c4" class="x">【同上】</div>
<div id="c5">【同上】</div>
<div id="footer">
<h2>页脚</h2>
<p>
页面居中时宽度为700px<br />
页面自适应时宽度自适应<br />
高度固定为100px<br />
色彩代码为:#009966
</p>
</div>
<div id="a">
<h2>附:考题说明</h2>
<p>
请写出xhtml和css展现<br />
出图片中所有内容<br />
<em >没有标准答案</em><br />
JS部分未来加上
</p>
</div>
</body>
可能大家都关心css在哪里，我并不在意css，对我来说，这道题主要还是用来了解面试者对结构的认知。
面试者可以“套”div，怎么“套”都可以，关键是你如何解释这些用来“套”的div，比如在c1/c2/c3/c4/c5外面“套”一个div，你的解释如果是为了居中，那么我会认为你的思路是以表现定结构，而如果你的解释是这部分作为内容主体的一个节点，那么好我会认为你的思路是分离了的。在比如，如果在c2/c3/c4外面“套”一个div，同样会有两种解释，1、为了浮动为了布局。2、为了文档结构。而我很显然会偏向以文档结构优先来定xhtml的面试者，我会认为作出这种解释的人是真正在思想上分离了表现和结构，不是泛泛而谈。当然还有其他的看点，内容部分标记的选择，hx、a、p、em和br的选择等方面，这部分就不说了。总而言之，我认为，每个标签的选择都应该有它在文档中的结构意义，也就是说你在选择标记的时候应该赋予它结构层面上的含义。
至于我所选择的“独立于根”结构，我个人认为是对于这道题来说，最精简的答案，把布局完全交付给CSS来完成。至于CSS水平，如果能在这种结构下完成题目所要求的界面设计，我认为根本没问题。所以我打开这位兄弟的结构，再用浏览器预览，CSS压根就一眼没看。介于他的两面派作风，我犹豫半天还是招了他，还好没错，是个悟性很高，擅于解决问题的高手，从设计到开发技术比我还全面，只不过有点三心二意、两天打渔三天晒网。这位兄弟后来在我离开卡当后是卡当的前端顶梁柱，现在也以一人之力撑起了海词前端所有的JS交互开发。
我不建议使用这种“独立于根”的结构，虽然我至今还在采用。因为“独立于根”的弊端还是蛮多的，我被害了一年半，已经快抗不住了。之所以还在硬着头皮使用，因为这种方式还是有不少优点，而且在全局上有些我认为很关键的优势，还有一个原因是我同时负责产品和设计，我可以通过其他角度尽量回避其劣势，发挥其优势。我觉得这种方式在结构上比较完美，唯一的不完美并不是因为xhtml，而是因为css，是css2的不完美导致这种结构在css实现上障碍重重。我又情不自禁的憧憬着xhtml2和css3的配合，不知道自己能否等到那天，能否撑到那天。
现阶段，要完全面向结构，完全脱离表现还是太难了，但是我觉得我们至少应该去靠近，从思想上去靠近，去分析页面，把结构和表现尽可能的分离。然后，然后才可以挖掘出更多的东东来……
最后严正提醒，别被我忽悠了，别跟着我学，我是有天时地利人和的条件，有所处位置、兄弟的配合、自身功力这些条件才敢去玩“独立于根”这种至今还没明确好坏的方式。在有市场对产品的限制、产品对设计的限制、设计对前端开发的限制情况下，还是多“套”几个div，省心省力省时间，也不会如我一样天天奔沙县小吃吃猪脑补充高速阵亡的脑细胞。
