web标准若干条

——写给刚刚接触web标准的新人们

　　div还是table？这是个问题……
　　自从web标准和网站重构的热潮席卷而来，到处都可以看到如下的问题：
　　问题1：怎么做1px高的div？
　　问题2：这个x行y列的table用div怎么实现？
　　问题3：css能不能实现拖动这个行？
　　问题4：为什么网页在浏览器里是正常的，可是在dw里却乱了？
　　问题5：为什么布局在ie里面是正确的，可是在ff里就乱了？
　　……
　　对于刚刚发觉表格布局已经被大家所抛弃，从而开始接触web标准来构建网页的人来说，这确实是个问题。
　　其实，这个问题从一开始就偏离了中心。
　　web标准并不可以简单地理解为：“查找：table，替换为：div”，而是要从根本上转变思想，其中比较重要的，就是把内容、行为与表现分离。

　　对于设计人员以及已经使用表格布局很长时间的人来说，这也正是难点所在。
　　往往我们现在的网页制作，都是从一张psd图开始的，而制作人员负责把这个psd图转换成html文件。对于制作人员来说，将图片分割然后再组合，使用表格是再简单快捷不过的了，特别是现在可视化开发软件越来越强大，但是这样正培养了制作人员的惰性，人们往往习惯于动动鼠标点点设设就完成了，而不去考虑实际的代码是什么乱七八糟的样子。

　　内容、行为与表现？那什么是内容？什么是行为？什么又是表现呢？
　　内容，顾名思义，就是访问者真正想了解的信息，可以包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身，而不包含辅助的信息，比如导航菜单、装饰性图片等。
　　例如猫窝的另一篇文章《盒模型（BOX Model）》的页面，其真正的内容应该是：

盒模型（BOX Model）如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。…… 　明确了内容的定义，表现其实很容易理解，就是页面的外观，例如：导航条的位置、链接的颜色、文字的大小等等。

　　而行为则是一些交互的操作，比如表单的验证、点击按钮使某个层显示和隐藏，这些需要通过javascript来完成。

交互是javascript的工作，不要指望css能完成。

　　理解了内容、行为与表现的区别，下面来说说“结构”。
　　上面例子中的内容，看上去很乱，而结构则使内容具有逻辑性、易用性。因此，可将上例中的文字结构化如下：
　　标题=〉盒模型（BOX Model）
　　正文=〉如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
　　结构对于页面来说，是非常重要的，可以说它是一个页面的骨架，只有真正搞懂了“结构”的意义，才能实现表现和内容分离，保证页面的源代码语义清晰且简洁。
　　因此，当制作人员拿到一个设计图的时候，首先要做的，并不是划分切片，而是提取页面的内容将其结构化，而上例中的页面结构如图1所示。

图1 页面的结构

　　此时，可以看到标题文字已经变大、表单有边框、文字也没有挤在一起，这是因为浏览器内有预制的css设定，规定了标题的大小、表单的样式等。虽然这个页面不好看，但是它却有很高的可读性，浏览者已经可以轻松地阅读页面的内容，而且，这个页面内没有为了装饰而存在的div或者其它什么代码。

还在想怎么用div来实现1px的横线？仔细看看css中border的定义吧！

　　当然，为了更好的视觉效果，还是需要使用css来完成“表现”。
　　只有在确定了结构之后，才能确定css以及图片切片如何划分。划分切片已经从原来最重要的工作变得不那么重要了。

　　再回到div与table之争。
　　之所以提出用div布局来替换table布局，其实中心思想是让xhtml的各个标签能名副其实，专职专用。例如，上面的例子中，“盒模型（BOX Model）”使用h2（2级标题），而正文则用p（段落）。css可以应用在任何的xhtml标签上，因此不要嵌套一层又一层的div和 span。

　　但是，table是否就被判了死刑不能再用了呢？
　　当然不是！
　　table也是xhtml的标签之一，而且它有它的意义——放置表格类数据，表格内的数据也是内容的一部分。例如一个班学生的考试成绩表，自然要用表格来显示，如果也非要用所谓的div布局，那就是舍本逐末了。

　　理论搞清楚了，那么还有什么难点挡在我们实现表现与内容分离的路上？
　　首先就是浏览器！
　　这个问题无法回避，毕竟页面就是为了放在浏览器内看的。而不同的浏览器自然会有不同的表现方式。虽然ie在国内是应用最广的浏览器，但是现在使用firefox和opera等浏览器的也大有人在。而制作软件，无论它再怎么号称“所见即所得”，但它毕竟不是浏览器，因此不可能所见所得，因此不要相信你的制作软件，在几个流行的浏览器内测试才是正道！
　　此时，另一个巨大的问题又出现了——浏览器的bug。
　　俗话说，人不是完美的，因此人写的浏览器也不可能是完美的。多多利用搜索引擎，可以搜到很多关于浏览器bug以及破解方法的文章。

不要相信ie，它可以说是bug最多的浏览器。先用符合标准的浏览器测试，比如firefox或者opera，再针对ie的问题使用hack。这样会缩减工作时间提高效率。 当然，还可以祈祷ie7会符合标准，不过这怕是不太可能的。

　　然后，还可能的，就是制作者的懒惰。
　　css和xhtml都是基础，花些时间好好看看手册，一定会有很大收获的。

想想吧，当你不再依赖dw或者golive而能写出一个完整漂亮的页面，制作人员的价值也就体现出来了。不会再混同于一个用ps的自动切片来生成页面的电脑爱好者了。