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

Posted 2020-10-15 shuijinggz

　　div还是table?这是个问题……鞍山首大皮肤病防治研究所www.pfk0412.net

　　自从web标准和网站重构的热潮席卷而来，到处都可以看到如下的问题：

　　问题1：怎么做1px高的div?

　　问题2：这个x行y列的table用div怎么实现?

　　问题3：css能不能实现拖动这个行?

　　问题4：为什么网页在浏览器里是正常的，可是在dw里却乱了?

　　问题5：为什么布局在ie里面是正确的，可是在ff里就乱了?

　　……

　　对于刚刚发觉表格布局已经被大家所抛弃，从而开始接触web标准来构建网页的人来说，这确实是个问题。

　　其实，这个问题从一开始就偏离了中心。

　　web标准并不可以简单地理解为：“查找：table，替换为：div”，而是要从根本上转变思想，其中比较重要的，就是把内容、行为与表现分离。鞍山皮肤病治疗去哪家好www.pfk0412.net

　　对于设计人员以及已经使用表格布局很长时间的人来说，这也正是难点所在。

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

　　内容、行为与表现?那什么是内容?什么是行为?什么又是表现呢?

　　内容，顾名思义，就是访问者真正想了解的信息，可以包含数据、文档或者图片等。注重这里强调的“真正”，是指纯粹的数据信息本身，而不包含辅助的信息，比如导航菜单、装饰性图片等。

　　例如猫窝的另一篇文章《盒模型(BOX Model)》的页面，其真正的内容应该是：

　　盒模型(BOX Model)假如想熟练把握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充(padding)，盒子本身有边框(border)，而盒子边框外和其他盒子之间，还有边界(margin)，如图1所示。……

　　明确了内容的定义，表现其实很轻易理解，就是页面的外观，例如：导航条的位置、链接的颜色、文字的大小等等。

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

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

　　理解了内容、行为与表现的区别，下面来说说“结构”。