html5结构与表现分离原则,网页简单布局之结构与表现原则案例

网页简单布局之结构与表现原则案例

一开始我们接触网页制作的时候，就了解到html代表结构、css代表样式、javascript代表行为，网页制作中，我们一直强调结构与表现相分离的原则，这里面的结构一般指HTML，此外分离是说把它们写在不同的文件加以引用吗？当然不是，在这里的学习中了解到，分离不单是一种方法更是一种思想，简而言之，一个平面二维坐标，其中x轴代表技术发展，y轴代表网页制作需求，分离是根据技术发展和我们的网页制作需求完成的！

一开始我们接触网页制作的时候，就了解到html代表结构、css代表样式、javascript代表行为，网页制作中，我们一直强调结构与表现相分离的原则，这里面的结构一般指HTML，此外分离是说把它们写在不同的文件加以引用吗？当然不是，在这里的学习中了解到，分离不单是一种方法更是一种思想，简而言之，一个平面二维坐标，其中x轴代表技术发展，y轴代表网页制作需求，分离就是根据根据技术发展和我们的网页制作需求完成的！

举例：比方说我们盖房子，html就相当房子的结构，css相当于后期的装修，网页都是基于一张效果来完成的，在我们浏览网页的时候，根据效果图不同，样式不同，所以我们浏览的页面是五花八门的，那么我们如何来布局好网页？首先不要考虑过多的css样式，尽量让我们的html结构合理简洁和语义化，然后再添加完善css样式！

当我们拿到页面时，不同的制作者对结构结构样式有不同的链接，根据这个结构样式了解深度的不同，暂定划分为：初级、中级、高级三个不同的层次；

比方说这样一个常见的对话框，有3个单元，首先我们需要完成一个单元，另外的进行CTRL+V；如果是初级制作者拿到页面后，一般按照上面的方框进行划分，一个大的div里面包含2个小的div，左右浮动，左侧放img，右侧放p,h等标签，至于时间因子通过 position属性定位实现,那下面就用代码说明下

1

2

3

4