前言：说到布局这个内容比较有意思，2003年第一次学HTML的时候，我还是个初一学生，对于网页一窍不通，是菜鸟级别的，属于只会上网的那种。刚学的时候，看这东西四不像，后面感觉就像是造房子一样的，还是蛮有趣的。当时学的是HTML4，学了2年以后，除了中间参加了几个设计比赛，在学算法以后，有5、6年没用过HTML了。突然这两年HTML5就火起来了，很莫名，于是去看了下，发现HTML5好强大啊，不禁感叹，特别是本地存储、canvas、地理位置、默认的音频视频等新特性，真的做得很好。接着，就从国外论坛找了点电子书视频，又开始研究起来，发现这个布局有点不太一样，HTML5的新标签布局突显了一种结构化，还定义了头部、尾部、水平导航栏、侧边栏导航以及文章内容这些标签，这个是与时俱进的。
一、HTML4中的DIV布局
DIV（层）是HTML4中常用的布局标签，现在也一直使用，很多网页设计的顶尖大师就是利用CSS+DIV来设计漂亮网页的。
确实DIV就是结合CSS（级联样式表）来进行布局，CSS是个定义标签样式的语言，以后会另外用几章来大致讲解CSS的用法。
下面讲一个实例，w3school中的实例
这个布局是通过设定DIV的宽和高进行布局的，首先，前面我们说了，可以在<head></head>中设定好css（样式）。
在 <head></head> 中定义 <style type="text/css"></style> ，这个就是样式的定义，内容就是对网页中的标签的样式进行定义。
然后下面div#，#后面则是div的id。div#container{500px}，意思是把名为container的div的宽设为500个像素。例如float:left就是左对齐的意思。
其他的CSS属性大家可以从w3school中找到。
在<div></div>这个标签中，id为container的是一个容器，它把header、menu、content和footer包含在内。
由于第一层叫header的 div没有设置宽度，因此它就占据这第一层。
而第二层中，menu和content都设置了width（宽度）、height（高度），两个div宽度加起来没有超过container的宽度，因此不用把content放在第三层。
另外float这个属性为div的对齐方式，<ul></ul>是一个列表显示的标签，其中每一项的内容用<li></li>包含在内。
第三层中，只有footer这个div，它里面有text-align的属性为设置div中的文本对齐方式。
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99; height:200px; width:100px; float:left;} div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} div#footer {background-color:#99bbbb; clear:both; text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>
二、总结
这一章讲了关于div的简单布局，另外我们还可以根据height和width还有边距等参数布局，但是这都是网页设计的内容，不作详细讲解，这里仅讲解标签使用，HTML的基础。
然后在结束html、javascript、css、jquery等静态网页的技术以后，介绍asp.net php等技术。下一章将介绍html5中布局标签。学编程是需要不断地练习不断地研究，才能有所进步，大家加油啦！