当我们刚开始学习Web前端时，就对HTML页面的布局特别感兴趣，上一讲《CSS初步介绍》中，讲解了CSS的入门知识，现在我们介绍一下HTML布局的知识。
HTML布局的方案有Table布局、最流行的DIV布局、以及HTML5建议的DIV布局的替代方案。
当HTML内容被浏览器显示时，整个HTML页面对使用者来说，就是一个显示信息与进行操作的界面。我们常常见到和下面类似的界面：
在这个界面中，整个HTML网页被分为标题区、导航区、内容去、状态栏区，下面我们分别用Table布局、DIV布局和HTML5建议的布局方案来实现该界面。
1、Table布局方案
使用Table布局方案，将整个浏览器的展示部分就是一个表格，然后我们设置好表格的单元格合并、大小即可。下面是使用Table布局方案的HTML页面：
<!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文档，展示效果和上面的一模一样：
使用这种方案，除了使用了含义明确的<header>、<nav>、<main>、<footer>元素外，和DIV方案没有区别。
这种做法貌似HTML更清晰，但实际上增加了元素的种类，增加了开发人员的记忆负担，容易出错。因此，前端程序员基本上都不喜欢这种方案。