html5页面布局框架HTML页面的结构计划

当我们刚开始学习Web前端时，就对HTML页面的布局特殊感兴趣，上一讲《CSS初步先容》中，讲解了CSS的入门知识，现在我们先容一下HTML布局的知识。

HTML布局的方案有Table布局、最盛行的DIV布局、以及HTML5建议的DIV布局的替代方案。

当HTML内容被浏览器显示时，全体HTML页面对利用者来说，便是一个显示信息与进行操作的界面。
我们常常见到和下面类似的界面：

html5页面布局框架HTML页面的结构计划 Angular

在这个界面中，全体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更清晰，但实际上增加了元素的种类，增加了开拓职员的影象包袱，随意马虎出错。
因此，前端程序员基本上都不喜好这种方案。