我们刚开始学习Web前端的时候，对HTML页面的布局特别感兴趣。在上一讲“CSS的初步介绍”中，我们讲解了CSS的基础知识。现在我们来介绍一下HTML布局的知识。

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

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

用word设计的简单界面

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

1.表格布局方案

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

            layout001                            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{&嘉文社百科nbsp;               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;            }                                    标题区                                            导航区                                        内容区                                        状态栏区            

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

这个框架建立起来之后，我们就可以在各个领域进行具体的开发了。

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

3.HTML5推荐的布局方案

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

            layout003                

以上就是由优质生活领域创作者 嘉文社百科网小编 整理编辑的，如果觉得有帮助欢迎收藏转发~