当我们第一次开始学习网络前端时，我们对HTML页面的布局特别感兴趣。上节课我们讲解了CSS的基础知识，现在介绍HTML布局的知识。

HTML布局方案包括Table布局，最流行的DIV布局，以及HTML5建议的DIV布局的替代方案。

当浏览器显示HTML内容时，整个HTML页面就是用户显示信息和操作的界面。我们经常看到如下界面:

用word设计的简单界面

在这个界面中，整个HTML页面分为标题区、导航区、内容区和状态区。接下来，我们使用HTML5建议的Table布局、div布局和布局方案来实现这个界面。

1、Table布局方案

使用Table布局方案，整个浏览器的显示部分是一个表格，然后我们可以设置表格单元格的大小和合并。下面是一个使用表格布局方案的网页:

!DOCTYPE html html   head   title layout001 /title   meta charset= utf-8  /   style type= text/css  html,body, table{ width:100%; height:100%; } #first_row{ height:6%; } #second_row{ height:91%; } #third_row{ height:3%; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #header{ border:1px black solid; color:white; text-align:center; background:green; } #navigator{ border:1px black solid; color:white; text-align:center; background:blue; } #content{ border:1px black solid; color:white; text-align:center; background:gray; } #footer{ border:1px black solid; color:white; text-align:center; background:orange; }  /style   /head   body   table   tr id= first_row   td id= header  colspan= 2 标题区 /td   /tr    tr id= second_row   td id= navigator  width= 15% 导航区 /td   td id= content  width= 85% 内容区 /td   /tr    tr id= third_row   td id= footer  colspan= 2 状态栏区 /td   /tr   /table   /body /html

用浏览器打开这个HTML文档，显示效果如下:

在这个框架建立之后，我们可以在每个td中进行具体的开发。

2、DIV布局方案

使用DIV布局方案时，整个浏览器的显示部分由每个DIV分配。下面是一个使用DIV布局方案的HTML页面:

!DOCTYPE html html   head   title layout002 /title   meta charset= utf-8  /   style type= text/css  html,body{ width:100%; height:100%; } body,#header,#second_row,#navigator,#content,#footer{ margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #header{ height:6%; width:100%; color:white; text-align:center; background:green; } #second_row{ height:91%; width:100%; } #navigator{ height:100%; width:15%; float:left; color:white; text-align:center; background:blue; } #content{ height:100%;   width:85%; float:right; color:white; text-align:center; background:gray; }  #footer{ height:3%; width:100%; color:white; text-align:center; background:orange; }  /style   /head   body   div id= header  标题区  /div   div id= second_row   div id= navigator  导航区  /div   div id= content  内容区  /div   /div   div id= footer  状态栏区  /div   /body /html

用浏览器打开这个HTML文档，显示效果如下:

在这个框架建立之后，我们可以在每个div中进行具体的开发。

我们可以发现，使用DIV元素来布局页面对我们来说更方便。

3、HTML5推荐的布局方案

使用DIV布局方案使用起来非常方便，基本上是前端开发者的首选。但是按照HTML5标准，每个DIV的含义并不明确，建议用特殊元素代替DIV。这是以HTML5推荐的方式实现的布局方案的页面:

!DOCTYPE html html   head   title layout003 /title   meta charset= utf-8  /   style type= text/css  html,body{ width:100%; height:100%; } body,header,#second_row,nav,main,footer{ margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } header{ height:6%; width:100%; color:white; text-align:center; background:green; } #second_row{ height:91%; width:100%; } nav{ height:100%; width:15%; float:left; color:white; text-align:center; background:blue; } main{ height:100%; width:85%; float:right; color:white; text-align:center; background:gray; } footer{ height:3%; width:100%; color:white; text-align:center; background:orange; }  /style   /head   body   header  标题区  /header   div id= second_row   nav  导航区  /nav   main  内容区  /main   /div   footer  状态栏区  /footer   /body /html

用浏览器打开这个HTML文档，显示效果和上面一模一样:

这个方案和DIV方案没有区别，只是使用了含义明确的页眉、导航、主、页脚元素。

这种方法看似HTML更清晰，但实际上增加了元素的类型，增加了开发人员的内存负担，容易出错。所以前端程序员基本不喜欢这个方案。