根本不存在 DIV + CSS 布局这回事
在《欲练 CSS ，必先宫 IE》和《你有 <table /> 强迫症吗？》这两篇文章中，看到有不少评论用到 div+CSS 布局这个说法，用来和 table 布局比较。实际上 div 不是用来布局的，div 只是用来表示一个其它元素都无法准确表达语意的一个块区，只有 CSS 是用于布局的，所以根本就不存在 div+CSS 布局这回事。反过来，table 布局的时候经常依赖于 CSS 定义一个单元格的布局属性，所以可以说是 table+CSS 布局。也就是说，我们讨论的两种主流布局方法应该是纯 CSS 布局和 table+CSS 布局，如果你觉得你在用的是 div+CSS 布局，那么有可能你也有强迫症了。
接下来我们说说如何进行纯 CSS 布局，因为 CSS 布局依赖于 XHTML，所以我们先要说说如何书写一个 CSS 无关的 XHTML。其实书写 CSS 无关的 XHTML 并不难，虽然你不能再好像书写 table 布局代码那样集中精力于最重的视觉效果上，但其难度也不过是中学生写作文那样。
中学生写作文如何写呢？首先看看题目，然后想想整篇文章分为哪几个大的段落，每个大的段落说些什么，能够把你要说的东西说清楚。对于 XHTML 来说，这相当于用 div 把文档切割为几大块。这时候你不要想着这些 div 将构建一个怎样的 DOM 啊、CSS 如何选择 DOM 中元素设置规则实现布局之类的事情，就大概划分一下文档的大区域就好了。
然后当然是用一些常用的手法来表现感情或者论证问题，这在 XHTML 中就是用特定的元素来完成一些常见的信息组织。下面就是信息组织形式与元素的对应列表。
img
作为内容的图片是一定要放到 img 里面的，这没有更好的选择了。然而如果图片不是作为内容，而是作为修饰性的，则千万不要用 img。对于非内容的图片，应该在 CSS 中引用，而不在 XHTML 中出现。例如每一个导航链接有一个前导的箭头指示，那么这些箭头就应该通过 CSS 的 background-image 属性加上去，而不是直接作为 img 出现。
a
这也是一个非常准确定义的元素，链接都需要使用它。或许已经有很多人忘记了 a 的本意是锚点，其实这是一个十分有用的语义，你可以用它来标记文档中一些重要的引用位置。
ul, ol
ul 和 ol 分别是什么意思呢？如果你回答不上来，却知道它们可以用来干什么，那证明你是被可视化工具宠坏了，要转换过来编写符合语义的 XHTML 需要先补充基础知识，这时候你最好先找一些看起来非常基础非常全面的 XHTML 书籍看看，因为没有扎实的基础你在上面构建更多的知识都是不牢固的。ul 和 ol 其实分别代表 unordered list 和 ordered list，也就是无序列表和有序列表。在语义上，它们都用于表示一类并列关系的内容，例如我们去商店购物之前列一张 shopping list，上面要买的东西就是并列关系，在中文可以用顿号隔开那种。它们的差别在于是否有顺序，例如 shopping list 是没顺序的，先买什么后买什么是没关系的，但是一份旅游行程安排上面的景点列表却是有游览的先后顺序的。
ul 常用于导航栏，因为导航元素符合上面所说的并列关系，树状导航结构还可以通过嵌套 ul 来表述。在这里，导航可以是我们常见的水平或竖直导航栏，甚至可以是地图导航，例如在中国地图上不同的省份热区其实是不同的 li。如果我说，在主流浏览器上用户看到了中国地图和可以直接点击省份热区，在不支持 CSS 的浏览器上用户能看到一份纯文本的省份名称列表，使用的是同一份 XHTML，而这完全通过 CSS 实现，甚至不依赖于 JavaScript，你相信吗？
另外，如果你要显示一个图库的缩略图，这些图片也可以放在 ul 中哦，因为这些图片也是并列关系。它们可以自动先横排，排满一行就自动排第二行，CSS 可以让他们乖乖排队，而不需好像 table 那样把图片定死在一个格子里。其实 table 用于布局就如同用监狱关押内容一样，把内容锁死在一个格子里不让它到处乱跑；符合语义的 XHTML 就如同一个开放的舞台，你只要懂得利用 CSS 的规则，内容就自然会找一个适合表现自己的地方站着。
dl
没有听说过 dl 吗？因为那些可视化工具生成的代码中从来不会出现 dl？dl 的意思是 definition list，也就是定义列表。它包含的子元素不是 li，而是 dt 和 dd，也就是 definition term 和 definition description。dl 本身设计为字典单词与解释列表这样的语义，例如：
<dl>
<dt>Apple</dt>
<dd> 苹果 </dd>
<dt>Boy</dt>
<dd> 男孩 </dd>
</dl>
然而，如果你需要表示的的语义也是类似的，一个列表既包含定义也包含解释，那么也可以考虑用 dl。
form, input
form 也就是表单啦，这没什么好说的，就算再不顾及语义的人在书写 XHTML 时也会考虑到它与各种 input 对提交数据的影响，从而小心谨慎。
table
table 自然是用来表示表格的，这不废话！如果是数据表，当然可以用 table 来表示，但如果不是，就最好别用 table 了。
人名列表呢？例如一个 3 行 4 列的人名列表。如果这 12 个人名是并列关系，我建议你用 ul 和 12 个 li 来表示，再通过 CSS 来让它们在一行内并列显示多个。名片表呢？也就是 3 行 8 列，每两列中左侧一列显示人名右侧一列显示电话地址等联系方式。我觉得 dl 在一定程度上能满足此需求，dt 放人名，dd 放联系方式，不过这时候就涉及了 dl 滥用的争论，因为人名与联系方式当作定义与解释有点牵强。
接下来还有一个关于你是否系统学习过 XHTML 的小提问，那就是你是否知道 table 下面的 caption、col、colgroup、thead、tbody、tfoot 元素及 summary 属性分别用于定义什么，还有就是你书写 table 时是否会使用 thead、tbody。
div, span
再次审阅上面的列表，如果你需要表示一个块区却无法在上面找到更适合的元素，那么你就可以考虑使用 div 和 span 这两个最没有语义的元素了。div 与 span 的区别，历史上的不说了，现在通常大块的区域用 div，行内的小文本片段就用 span。在上面我已经说了 div 一般用于全局划分为几个大的区域，所以一般不需要使用了。span 其实也很少使用，因为行内的强调通常可以用语义更强的元素例如 strong 和 em。
在理解上上述那么多常用元素后，写一个 XHTML 就真的如同中学生写作文一样容易啦，还是搭积木那样，其实和以前使用可使化工具搭积木没什么不同，唯一不同是现在你理解了你在搭的是什么，而以前你只在乎搭出你想要的视觉效果来。写代码与写作文所类似的地方，就在于你写得越多就越熟练，也就越能写出好东西来。在写好 XHTML 后我们就要开始考虑如何写 CSS 了，或许还需要在 XHTML 中略作修改以方便 CSS 中规则的选择与匹配，不过这是以后再说的内容了，今天就说到这里。
最后，如果你有兴趣阅读我以后发表的有关 CSS 的文章，可以考虑订阅我的 blog：