看了《重构之美》深有感触，网上都是什么DIV+CSS，根本没多少人理解什么才是标准，难道DIV＋css就是标准？我不知道是不是原贴太乱了，所以才没人看，我这里整理一下，重新发一下，希望大家都能看看，应该把标准先正确理解了，再去学它。
（作者：爆牙齿 http://yuntian.cnblogs.com。严禁任何营利性商业网站在未经作者授权同意情况下进行转载等侵权行为。）
唠叨先
对自己没信心了，不指望能集中续写《重构之美》，还是散开记录比较好。
看见一个评论这么说：“晕，现在才谈XHTML是不是太晚了点，这东东2004就火了一把了。”其实我觉得，作为一项技术，没有火与不火的说法，也没有早与晚的说法。技术的生命力和火没有关系的，不知道不理解没学会怎么都不晚。再说了，Web标准这个东西再过几个月就是进入中国两年的时间段了（这里我们暂且以傅捷所译《网站重构》2004年5月出版这事作为一个起点好吧）。两年的时间，你敢说Web标准已经全面推广开了吗？
有多少人还不知道？
有多少人只知道“Web标准”这个词？
有多少人正在学习？
有多少人把Web标准理解为div+css或者是ul/li代替table/tr/td？
有多少人把Web标准理解为css的崛起？……
我不知道，但是我去年底到目前的公司，40多名研发开发人员没一个知道Web标准。当我把Web标准带到他们面前，他们的理解只是我的css很强，……恰恰相反我个人觉得我自己的css水平很一般，本来css就没太多的技术含量，都是些技巧的东西。7、8年的思维模式哪那么容易就改过来了？ html也倔得要命，要连根拔出也不是件容易的事。所以Web标准之路还长着呢。我琢磨着xhtml 2.0发布的时候估计xhtml 1.0都在国内普及不开来，或者说不能正确的被普及开来。
既然叫随想随说，我就懒得整理了，想到那里说到那里，不分先后。我说出我的一些个人理解，正确与否自行判断吧，如果觉得我有错请无情的指出，谢谢。
振臂一呼：Css, Stop!
Web标准在概念描述上涵盖了三个部分，结构[xhtml]、表现[css]、交互[DOM、ECMAScript]，准确的定义我就不摘抄凑字数了，百度上google一下，遍地都是。这三个部分我认为并非处于同一个等级，xhtml是最重要的部分是第一级，而css和script则并列处于第二级，简单如下图例：
我认为不要小看了这个认识，我觉得这个目前很多人都没有意识到的问题，即便意识到了，行为上也没有跟上。怎么说呢？script不是我所擅长的，所以我基本上不会涉及到Web标准中交互这部分，即便涉及也只是很浅，个人能力有限。css部分会有针对性的涉及到，但不会很多，因为我不想在css上做太多的文章，因为我感觉现在国内Web标准界对css的追捧有点过了，大小介绍Web标准的网站和书籍主要都是在介绍css的各种技巧，而对于xhtml部分的介绍很少，也就泛泛的提及用div代替table进行布局和书写规则，多一点的会提到语义。
有没有深入的理解过？为什么要严格书写？我想大部分的答案是通过认证。再问，为什么要通过认证？答不出来了？好，再来，那又为什么要严格书写？又是认证？这不扯蛋嘛！鬼大爷管你认证与否。那么严格书写需要吗？不需要吗？靠！再来说语义，说起来估计还有很多“Web标准”者连语义这两个字都不知道。我认为语义是xhtml的两个核心之一，另外一个核心就是今天要谈到的结构。比如对表格table的使用，都是这么说的：表状数据还是要用table标记。那么有没有想过什么样的数据是属于表状数据？我说把一个三栏式布局的页面视为一行三列表状数据行不行？我是在扯蛋，那么什么是表状数据？什么时候用 table？现在网上关于xhtml语义理解的文章真的很少，为什么？css啊，从上到下都追捧css去了，以至于那天我在蓝色理想上见回帖：学div+ css，但不准备遵守xhtml……。类似的还有很多，什么花样都有。无语中，我想每个真正理解了Web标准的人都会很无奈的摇头，近2年Web标准的推广演变为Css的推广。Css很重要吗？不重要吗？靠！我说不要Css行不行？你找一大堆完全合理的理由……“行不行？”“行！”那就对了，我说不要你的 Css，我要他的Css，又行不行？那么和xhtml相比，Css重要在哪里？
最后我们来说说关于“用div代替table进行布局”这种说法，这么说吧，如果你是抱着这种思路使用div，我认为是错误的，布局这个概念其实是table带来的，如果你又把布局加到对div的理解中去，那么对不起，你还是一个“table者”。最典型的，有位朋友针对我上一篇[复杂表单]评论到：你这个表单看似复杂，其实很简单，不过左右两列式布局，左二右六，……。他还提到了“拼装”两个字，然后说我的代码不过是用div代替 table，说我是table思路。看看看看他对页面的分析，“左右两列”，“左二右六”，“拼装”，多么熟悉啊，即便他用div实现了这样的布局，你认为他抛开了table吗？所以我说他完全没看懂我的代码。我只听说过“不要使用table布局”，没有在很官方的地方看见过“用div代替table进行布局”这种说法，都是人为造出来的，或许是为了更好的推广Web标准，但是现在我们要知道，这种说法是错误的！div从来不是布局元素，也没有哪个标记是布局元素。
像上面的图示，xhtml是根基，表现和交互虽然也很重要，但毕竟可以不要表现，也可以不要交互，但是不能不要xhtml，所以在现在，在现在狂热的追捧Css，几乎达到忽略xhtml这个根基的环境下（比如上面我说的那个回帖），我要站出来，振臂一呼：Css，Stop!（不知道有多少人响应我，鄙视我也欢迎，当我是疯子一笑而过也可以。^_^）
本来打算简单说说Web标准的概念和对现状的不满，然后专心写[深入结构：理解h系列的不合理。]，结果扯谈了这么多，也好，换个标题发布，[深入结构：理解h系列的不合理。]放到下篇来写。
深入结构：理解h系列的不合理。
回头看上篇文章，确实有点乱，感觉自己像个愤青，怨妇一样。我的意思是不要过多的把关注投向Css，Css并非Web标准的最核心的东西。我认为 Web标准的核心在从html到xhtml这个看似变化很小确意义非凡的事情上。Web标准更多的是思想的变革，思想的重构，而不是技术，而这一点则几乎全部体现在xhtml上。
菩提树朋友在评论中做了个比喻：
XHTML像是一块白肉,不能吃,就算能吃,吃起来,也是十一分难吃。CSS就是那酱料，沾着吃，才有味，SCRIPT就好比加了一道火，烤一下，再吃，原来，完全不一样。
非常感谢你，这个比喻非常好，不过理解重心不一样。
还是这个比喻，我把xhtml视为牛排好不好？一份牛排好吃与否关键在牛肉本身的品质，其价值也体现在这里。甚至牛肉本身的品质可以好到任何外部因素都显多余，生吃是最好的选择。不知道你喜欢烹饪吗？我比较喜欢。首先要肉好菜好，新鲜，其次才是调料、火候、技巧。一堆好菜，不用费什么功夫就能得到很好的效果，而一堆烂菜，怎么掩饰都掩饰不住本质的缺陷。任何厨师都最重视原材料的筛选，事半功倍。话说回来，生存第一位，所以一块白肉哪怕再难吃也强过调料，没别的意思，只是为了说明轻重，应该首先重视xhtml的品质，其次才是css的技巧。By The Way，我很喜欢吃牛排，而且只要3成熟。^_^
我还是继续说下去吧，或许听完后再回头看，就能理解我为什么说：Css, Stop!并非要否定Css，而是指对Css的过度追捧，Stop。
问题：HTML中的六个标题Tag（h1/h2/h3/h4/h5/h6），设计是否合理？理由？解决办法？
这是我在培训中提出的两个问题之一，不知道大家有没有考虑过？或许你要说这个不是我们该考虑的问题，这个是W3的工作。我承认，其实我最初也没主动去考虑过，直到有一天接触了xhtml2.0，我才知道h系列标题的设计是不合理的，在xhtml2.0中，不推荐使用<hx>系列Tag，理由是结构不好，推荐使用这样更合理的结构进行代替：
<section>
<h>
<section>
<h>
<section>
<h>
</section>
</section>
</section>
嗯，好像答案都有了，不合理，结构不好，解决如上。其实我想问的是为什么hx系列结构不好？为什么要这样改？现在你先别急着向下看，试试想想。
琢磨这个问题是因为我想试着去理解W3到底想干什么？现在我们清楚了为什么在xhtml1.1中不认可类似font之类的Tag，xhtml1.1 是2001年的产物，如果当时我们就理解了，那么Web标准早就推广开来了。现在W3如法炮制，在2.0中不推荐现有的h系列Tag，那么会不会在 “2.1”中完全抛弃它，如同抛弃font一样。xhtml2.0尚处于草稿和提议当中，还未被W3正式推荐。当然我无意从中引出Web大标准、超标准之类的东西，我只是希望能对目前的Web标准加深理解有所帮助，实际上我认为我得到了较大启发或者说之前的一些模糊的，不确定的感觉变清晰了，所以我认为这是一个对于目前Web标准非常经典的问题。
好，现在说说我的理解。
首先我们想想h1/h2/h3/h4/h5/h6这六个Tag是什么东西，当然是标题Tag。它们有什么不同？h1页面唯一（一个页面只能存在一个 h1），并且字体最大。h2~h6可以多个，字体逐步减小。曾经有个朋友说他认为h系列都是和表现相关的东西，有可能在以后的xhtml中被删除，所以他从来不用也搞不懂为什么那么多人用。其实他搞错了开头，却猜中了结局。确实已经在2.0中不被推荐，却不是因为表现而是因为结构。不知道还有没有人和他有同样看法？h系列绝对不是类似font的表现Tag，如果因为粗体和大小就算的话，那么所有标签都属于表现标签了，ul还有点，ol还有数字呢，p有间距，div会换行，……那么还需要xhtml干嘛呢？直接XML好了。
xml里的X是指可扩展，也就是可以随意定制标签。而xhtml中的X虽然也叫Extensible可扩展，但是并非可扩展，你不能为xhtml自定义标签，它更多是指xml化，也就是xml化的html。所以，xhtml每个标签都需要有默认的样式来支撑它的语义化，这些样式是最基础的样式，为什么h1和h2不一样？因为它们默认样式不一样。为什么2个div会形成2行，而2个span却在一行上？因为div默认一个display:block的样式。具体的大家有兴趣可以查一下。好了，hx系列Tag的不合理就出在这里，语义和结构。h1~h6的语义通通都是一样的，那就是标题。他们之间有没有结构？有的。同样的语义却设计了6个Tag，为什么？因为结构的存在。hx系列之间的结构（节，俗点叫上下级关系）是靠123456（不同的默认样式来决定），但是这些数字并没有语义的，你说1大还是6大？不同的环境下截然相反，人的判断都如此，作为程序是无法理解凭什么2就是1的子级，3就是2的子级。再有，假如一篇极端的文档需要用到h7，h8……怎么办呢？所以有了以上的改变，语义用h表示，把结构分离出来用section表示，这样一来，程序喜欢不喜欢，我想不用多说了。^_^
2006 2 27 Create
很久以前，我第一次看到IBM网站上《Web 的未来：XHTML 2.0》这篇译文时，第一个反应是怎么把标题Tag搞得这么复杂，再定睛一看，马上就联想到自己的迷惑和一直在追求的东西，真的立刻就有一种醍醐灌顶、豁然开朗、近视眼带上眼镜的感觉。其实早在一年多前，我就有过这样的迷惑：如何固定xhtml文档？后来还在重构之美－迎接Web标准化设计的来临[总结一：网页设计回归？]中对这个问题曾做过这样的总结：
…2、根据规划完成XHTML文档，组织好文档结构，设计纯文档。这里我要提醒，纯文档同样具有UE，它只是没有了UI而已，所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。…4、根据设计稿为XHTML文档添加样式进行还原，通过样式表的设计技巧尽可能的不修改XHTML，如果UI 实在是复杂，则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。…
可以看到当时的我其实是迷惑的，怎样选用标记？怎样的xhtml文档最简洁又灵活？我一直在努力，去始终好像很难找到一个方法固定xhtml。对于一个页面，不同的人有不同的分析，不同的分析又将产生不同的xhtml文档。哪怕两人在不加载样式表情况下设计出浏览界面完全一样的页面，背后也可能因为分析的不同是两份不同结构的xhtml，也就是语义一样，但结构不一样。语义含有部分结构的概念，却不等于是结构。
2006 2 28 Update
很早就开始关心纯文档的结构，从最初的关注浏览器中xhtml的浏览结构，慢慢也开始关注xhtml的代码结构。简单说明一下这两个结构吧，希望大家能够多关注一下浏览结构，更多关注一下代码结构，而不是仅仅把目光注视在应用了css后的最终页面效果上。比如：
<h1>文档名</h1>
<h2>标题1</h2>
<h3>标题1.1</h3>
<h3>标题1.2</h3>
<h4>标题1.2.1</h4>
<h4>标题1.2.2</h4>
<h3>标题1.3</h3>
<h2>标题2</h2>
<h3>标题2.1</h3>
这段代码的浏览效果如下：
我们可以看到，浏览已经完整了，有了结构，这种结构是通过语义而产生，然而代码结构完整吗？所以我说过，语义带有部分结构的含义，却不等于结构。完整的代码结构我认为如下：
<h1>文档名</h1>
<div>
<h2>标题1</h2>
<div>
<h3>标题1.1</h3>
<h3>标题1.2</h3>
<div>
<h4>标题1.2.1</h4>
<h4>标题1.2.2</h4>
</div>
<h3>标题1.3</h3>
</div>
<h2>标题2</h2>
<div>
<h3>标题2.2</h3>
</div>
</div>
上面的代码还不是很合理，有心的朋友应该能看出来，不过意思到了就好。
这有没有觉得这段代码眼熟？回头看看开头xhtml2.0中推荐的标题表达形式。是的，当我看见xhtml2.0的时候马上想起的就是我的这种写法，然后更加坚定的将这种写法延伸使用下去，并且发现似乎找到了固定xhtml的方法：用标题划分代码结构。这样对于同一个页面，不同的人都能写出同样的xhtml结构。例如，对于大部分页面，都可以视为页头，内容，页脚三部分，那么好了，每个人都能写出一模一样的xhtml大结构，而不管页面具体如何设计的，看看：
<h1>网站标题</h1>
<div>
<h2>页头</h2>
<h2>内容</h2>
<h2>页脚</h2>
</div>
或许你会说，这样简单了，那么你可以去看我在[复杂表格]中的几段代码，或者看《粗略整理博客圆的页面Xhtml代码》。统统是这样的结构。
这样写优势太多了，因为它不论在哪一方面都吻合xml的要求，不论在写法上还是结构上，程序会非常喜欢，比如无论通过js还是后台编程，我们都可以很轻松的通过xpath查询提出所有的h3或者任何部分。我想这也是xhtml的目标，让html尽可能的靠向xml。xhtml会代替html，但是我想xml不会代替xhtml，至少在浏览器没变革前，xml没有直接的语义，只有结构。xml的语义需要通过程序或者xsl来转换成有直接语义的 xhtml来体现，关于xml这里就不多说了。这种写法是有缺点的，那就是会感觉h不够用，6个h标签，只有3个可用，h4已经显小。那么当我们的结构层次高于3层或者高于4层的时候就麻烦了，所以开始向往xhtml2.0，可以无限层的表达下去，虽然还不清楚它怎么来区分每个h标签。
这样的写法很接近一个结构很好的Word文档，对，就是以写Word文档的方式来写xhtml页面，固定下来。
好了，现在你理解了吗？认可吗？
对HTML/XHTML/XML/XSL的一些认识
追随lpspider的评论，知道他在《刚要玩玩xhtml就被当头一棒》中迷惑于国外在html和xhtml之间的争论，没来得及细看，不过我认为没有太多争论的。
xhtml1.X一定是html，而html则不一定是xhtml1.X。那么如果说IE不支持xhtml就等于说IE不支持html，不会吧。所以IE不支持xhtml一说不知何来之有，不过IE不完全支持Css倒是真的，但是，但是css是表现，表现和结构是无关的。xhtml的产生正是因为在 html中，表现和结构混为一团，不利于向xml平稳过渡。
如果要说担心，xhtml2.0到值得担心，因为有很多新的东西被加入进来，就需要各浏览器作出相应的支持，不像目前xhtml1.x，浏览器不用变化。但是这种担心或许有点早了，又或许多余了。首先xhtml2.0还处于草案和提议与设计中，而1.X还没有被正确普及开来，时间还长着呢。其次，即便xhtml2.0被确定被推荐，由于不能完全向下兼容，还需要等浏览器跟上节奏，这又是一长段时间。所以完全不用着急，我认为的话，即便xhtml是被视为一种过渡技术，但是仍然有着相当的生命力。
说到这里，想起曾经看过这么一篇文章《了解了XHTML2.0后，有感》（实在找不到原出处），文中最后提出的观点：我的意见是，直接做XML的网页！这样的观点我是不认可的。
再来说表现与结构，老生长谈了，2年前我就推荐过阿捷写得一篇《理解表现与结构相分离》，今天我仍要不遗余力的推荐！文中写出的四个部分，数据，结构，表现，行为。上次我给出一个简单的关系图：
现在我再给出一个更为详细的关系图：
数据和结构是无法分割的整体，脱离了结构的数据几乎不能使用。所以纯数据需要用xhtml或者xml来格式化，展示其结构。具体的阿捷比我说得更清楚。我这里着重谈谈结构。在我的理解里，结构目前划分为两部分，一是语义结构，二是代码结构。语义结构是靠语义产生，代码结构则是面向程序的。XML拥有完美的代码结构，但是却因为高度的可扩展和自定义性，很难拥有语义结构，除非在它的基础上定义一个通用的格式，比如现在很火的RSS。所以在目前通过浏览器上网浏览html的模式下，直接应用xml写网页是无法通用的，也是困难的。而xhtml则是一种折中，它不允许扩展，从而继承html的语义性，拥有现代浏览器都可以识别的语义结构以适应目前互联网应用大环境，同时用xml的规则规范它，让它继承完美的代码结构以便以后顺利过渡。所以我说css相对不重要呢，Web 2.0时代一个标志就是数据跟着用户走，这里的数据当然包括结构，语义结构和代码结构。再说了，css这个东西专心学习，我想一个月足以精通。但是并不代表你页面就能做得很漂亮了，那是设计，和css无关，你敢说1个月精通设计吗？我做了6年设计了，仍觉得欠缺太多，设计难啊！所以从重要性上css比不上 xhtml，从技术含金量上，css比不上设计，呵呵好像把css说得一无是处了，我错了我错了，不要骂我了。
至于所谓的xml+xsl，并不是xhtml＋css的升级版本，xsl的意义在于转换而非控制表现，xml过于开放了，所以需要xsl来转换，将 xml中的语义结构和代码结构转换成不同领域相应的标准结构，比如移动中的WML又或者WEB中的XHTML。所以不要说我要xml+xsl，若你不懂 xhtml，转换出看起来像xhtml的html，貌合神离又有什么意义呢。
最后，我认为xhtml一定会代替html（XHTML is aimed to replace HTML），但是不一定被xml所代替，或者就如上所说，有相当的生命力。xml只有数据和结构，它的语义是面向程序的，而不是面向浏览器。如果要全面xml话，首先使用浏览器浏览网页这种上网模式就一定要先转变，再或者浏览器本身的内核会有较大的改变甚至需要重新设计。这两个都不是一蹴而就的事情，所以xml的意义更多在于桥梁，要作为主体目前还不行，不管作为数据的主体（有数据库）还是结构的主体（有xhtml）。因此即便 xhtml被视为过渡技术，2000年出生以来，经历了1.0，1.1，现在仍然在向2.0发展，直到所有条件成熟，xml能够全面接管过来。而 xhtml的作用就是等到xml能够接管之时，顺利平稳过渡。我个人认为现在谈过渡还早，2003年说99％是过时的，现在呢？2006年了，纠正了多少了？那么，我想，xhtml会再存在3、5年或者更久吧。不过互联网谁又知道呢，也许就在明天一切都变了。
未来不可知，明天太遥远，我们只能有个方向，然后全力把握住今天。
深入结构：合理运用div和span。
特意上网搜索了一下，关于div，说法很多。
把div看成是布局元素这种观点我想是最多的，类似有“用div代替table进行布局”、“实战CSS+DIV布局”等等等等，太多了，还有不少人延用Dreamweaver的定义，称div为层，按 Photoshop的层的概念来使用……有朋友干脆就直接称div和span为辅助布局元素。
怎么说呢？虽然我很想说对div类似的这种认识是错误的，div不是一个布局元素，没有一个tag是用来布局的，但是我是对的吗？我也不知道。几乎所有人对div的宣传都是布局，不管是‘民间’的还是‘官方’的，但是如果我们找根源，中文中，div是一个结构化标签，是一个块级元素。好吧，我们首先看看div拥有的语义，division（分隔），按语义它的作用是将两个部分分隔开来。然后我们再回到w3去看看怎么定义div和span的：The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.
注意到我上面加粗的一句话了吗？W3可没说是 for layout，而是for structure，是结构！因为分隔从而产生（定义）一个代码结构。我想，结构和布局应该是两个概念吧。或许，因为table确实被用于布局了，所以这种根深蒂固的布局思路又自然而然的转嫁到div上，我曾在很长一段时间里也是这么理解的。但是，现在我要说，这绝对是一个错误并且，这是极度严重的错误！！！这纯粹个人观点个人理解，自己取舍好了。
为什么严重？理解的错误直接导致的就是使用的错误。因为如果按照这个思路，把div作为布局元素使用，那么我认为：
你永远无法固定xhtml！永远陷在css的怪圈中！永远不会去思考和理解结构！永远擦不干净table烙下的痕迹！永远无法接近神（貌合神离的神哈，呵呵）……
或许把div称为布局元素还是为了更好的推行标准，但是却将人们从一个错误带向了另一个错误。两年前我刚接触标准时就在《重构之美》首篇中迷惑过关于改版的事情，虽然随着理解的深入好像有了突破，在我写下xhtml后不变动，然后通过css的技巧来完成新版面。比如像著名的csszengarden。但是很快我又有新的迷惑，一个人这样做好像没什么问题，团队呢？比如如果同样的内容，设计成两个版式，然后交给不同的两个人来写xhtml，会一样吗？就像如果把csszengarden的形式颠倒一下，基于同一份数据先做好100个设计稿，让100个人按照这个设计稿写100份xhtml，会一样吗？我想按照div布局模式，对于同样的版式，不同人不同的页面分析都会产生不同的xhtml，更何况不同的版式呢？但是既然表现与结构无关，那么同样的内容不应该有2份以上的xhtml。不要小看这个问题，对于团队中前后台的有效分离与快速协同，这是关键！我在培训中提出一个观点：最理想的境界是前台闭着眼睛都能知道后台输出的是什么样的xhtml结构代码。那么问题出在哪里？div布局！尤其是在理解了h系列标签不合理之后，体会更深刻。
上篇文章我提出的关于结构应当分为两种：语义结构和代码结构。理解了这两个结构之后，那么div的用处就比较明朗了，稍稍动动脑筋就能想到，用于组织代码结构。所以hx标签的问题我认为经典呢，不要说html了，即便对于 xhtml，大部分的人关心的仍是如何表现，小部分人关心语义结构，很少人去关心代码结构，似乎xml有了，xhtml就不需要代码结构了。但是从hx系列的问题可以看出并延伸知道W3可一直在关心代码结构，从1.0，1.1直到2.0，一直希望xhtml拥有xml般严谨的代码结构。说到这里再多看 xhtml 2.0的另一个变化，br不再被推荐，应该很好理解了，br的语义是产生一个截断（break），但实际作用是产生一个行，语义结构上仍不完美，所以使用 line进行替代<line>this is one line</line>。同样br也无代码结构可言，如果我想提取第三行的数据如何操作？所以很有可能类似br、hr这类标签都将被废弃。我琢磨着，xhtml1.x是W3清理表现，将人们往语义结构[Semantic]的方向牵引，而xhtml 2.0则是展示和突出代码结构[structure]。呵呵，您说我琢磨得对吗？瞎猜瞎猜。^_^
回过头来，那么怎么组织？首先对于一个设计稿，一定要不被设计所迷惑和左右，只提取看得见和看不见的数据，然后就扔掉设计稿，先完成数据的语义结构，再添加代码结构（adding structure to documents.），完成xhtml后，最后一步才是重新拾起设计稿打开css，还原。当然实际做的时候不可能不看设计稿，但是怎么看？只提数据！再说一点，数据在文档中的先后顺序由什么定？当然是由文档而定，不是由设计稿所定。举个例子，假如有两个栏目，新闻头条和普通新闻。谁在前谁在后，很显然在文档中应该是头条在前普通在后，这是由UE（用户体验）和栏目轻重的综合考虑决定。但是按照div布局的话，是按照设计稿上前下后左前右后的顺序来决定的，那么如果设计稿中将普通新闻栏目设计在左栏，头条设计在中栏，文档中普通新闻就跑到头条新闻上面去了。所以我打开一个Web标准站点文档浏览，如果文档的先后顺序是按照页面布局上前下后，左前右后的顺序而定的，那么我……特例一点，如果一个单屏设计的网站，标题和导航设计在页面下方，那你的文档岂不是最下面才是标题和导航，这是什么UE？这不是扯蛋嘛。div，div布局的恶果——文档结构仍然在为表现所左右！貌合神离！！
代码结构怎么做？大处按照上篇文章所写，用h系列划分大结构。那么小处呢？这里就要牵涉进div的另外一个概念：块级元素。什么块？模块！用div模块化小处。举例：
<div>
<h3><span>用户登陆</span></h3>
<div>
<label for=”name”>用户名</label>
<input id=”name” />
</div>
<div>
<label for=”pw”>密码</label>
<input id=”pw” />
</div>
<p><button /></p>
</div>
这个在[复杂表单]中提到过的例子，我们来详细分析div在小处如何模块化运用。其实很简单，h3/lable/p是语义结构，然后，对于用户名和相应的输入框显然是不可分割的整体，那么好了，div将其标识为一个块，对应的密码部分同理。最后，两者一起与标题和按钮又构成一个不可分割的登陆整体，div之。这样拥有很好的语义结构和代码结构。好的代码结构不仅仅可以便于固定xhtml，便于程序操作节点，还对css提供了很高的自由度。如上例结构，我只需要给最外div一个 class，比如”loginarea”。那么：
我可以这么按节点/路径层层定义下去：.loginarea label{} .loginarea input{} .loginarea div label{} .loginarea div input。如果我需要横向登陆，只需要定义一个关键点：.loginarea div{float: left}，如果纵向则去掉这个关键点，模块化的登陆就这么简单。这样还可以省写不少class，尤其对于有些看似复杂的结构其实模块化设计好了，模块内部是简单的，一个路径定义过去，根本无需class还不会引起样式冲突和干扰，css的可读性也很好。当然这里会涉及到css的技巧，我认为css的技巧最重要的就是分析页面，页面分析的好，写出来的css简单明了充分利用tag还有多以备扩展，否则class一大堆复杂冗长还会觉得tag不够用又去添加破坏结构。复杂表单那套系统的css我写了48k，还未做最后优化，全部图片总共只有5K，还全是无损PNG格式。整套系统几十个大模块，又有无限级菜单、树、页签、弹出，复杂表单，合同，frame，iframe，报表，控件套控件等等乱七八糟什么都有，css加图片全部表现部分可以做到50K以内。这个项目四个程序员一起开发我一个人顶所有前台，三个月时间，程序员不管任何有关表现部分，我都是玩玩做做就搞定了。中后期，临着交付客户时候我还觉得公司提供的设计不好，又自己花1天重新设计，花不到2天另外写了一个css，整个系统全变了且以前的设计未丢失。功能不变的情况下界面大换，再大的系统也不过一个人几天时间，且程序员不用管。这就是Web标准的威力之一！（因为是内网应用，所以我几乎没考虑和照顾浏览器兼容性，没必要，也是快的一个因素）
所以我认为当前各大网站上以各种方式事先列出什么单行一列，两行一列诸如此类的几行几列的div＋css布局代码，不好说他们不对，你完全可以去理解是如何使用css实现几行几列的布局，然后合理运用到自己的结构上。但是如果你按照他提供的代码去套、去添加内容，那么你就错了。不过话说回来，在被一篇一篇标题着斗大的“布局”两个字的潜移默化下，您还有心思去关心结构吗？所以很多都去琢磨css了，所以这些善意的Web标准推广者还是有错的，包括我在内，我2004年撰写的《重构之美》代码示例部分带有更大的误导性（好在当初我一再强调代码毫无借鉴的意义，也算在文字上有所弥补）。现在呢？我也不知道，在路上，在路上……