俏小丫网 > 星座 > 正文

怎样合并html中的单元格(如何进行HTML页面的布局)

发布时间:2021-04-27 14:01:30   来源: 新华网宁夏    投稿: 莹白


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

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

当HTML内容被浏览器显示后,整个HTML页面对使用者来说,就是一个显示信息与进行操作的界面。我们常常见到类似下面的界面:

使用word设计的一个简易界面

在这个界面中,整个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更清晰,但实际上增加了元素的种类,增加了开发人员的记忆负担,容易出错。因此,前端程序员基本上都不喜欢这种方案。


上一篇:打电话不接如何定位(有对方电话号码能定位对方吗)
下一篇:属龙人为什么会二婚:属龙的人多有再婚命,竟是这些原

最新资讯
阅读排行