百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

HTML页面的布局方案

zhezhongyun 2024-12-05 18:00 41 浏览

当我们刚开始学习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更清晰，但实际上增加了元素的种类，增加了开发人员的记忆负担，容易出错。因此，前端程序员基本上都不喜欢这种方案。

相关推荐

EU Said to Accept a 10% U.S. Universal Tariff while Seeking Exemptions for Key Sectors

TMTPOST--TheEuropeanUnionmaymakeconcessionstosecureexemptionsfromtariffsonkeysectors...

抖音品质建设 - iOS启动优化《实战篇》

前言启动是App给用户的第一印象，启动越慢，用户流失的概率就越高，良好的启动速度是用户体验不可缺少的一环。启动优化涉及到的知识点非常多，面也很广，一篇文章难以包含全部，所以拆分成两部分：原理和实战...

荷兰引进美国诗人阿曼达·戈尔曼诗作，因译者肤色遭抵制

记者｜刘亚光阿曼达在拜登就职典礼上朗诵诗歌。图源：PatrickSemansky/AssociatedPress阿曼达·戈尔曼（AmandaGorman）出生于1998年，自小患有语言障碍，...

EU and U.S. Upbeat on Trade Deal Ahead of July Deadline

TMTPOST--TheEuropeanUnionandtheUnitedStatesseemupbeatontheirtradeagreementtoavoidtr...

“过期食品”英文怎么说?（过期食品）

在购买食品时，我们都会特别留意一下食物的保质期有多久，是否新鲜，以免买到过期的商品。TheafternoonteaspreadatThePeninsulaBoutiqueandCaf...

世界首富撩妹露骨短信遭曝光 网友评论亮了

原标题：世界首富如何撩妹？亚马逊创始人贝索斯给情妇的露骨短信曝光这周最大的一个瓜，可能就是亚马逊首席执行官杰夫·贝佐斯（JeffBezos）与妻子麦肯齐（MacKenzie）离婚的惊人消息。紧接...

征收熊孩子“尖叫费”不合理?店主回怼网友

爱尔兰一家很受欢迎的咖啡馆要收“孩童尖叫费”，网友们。。。爱尔兰一咖啡店店主5月4日在脸书发帖，表示要向带有吵闹孩童的顾客多收15%的额外费用，引发了大批网友的议论。原贴内容如下：图viaFaceb...

Rationality, objectivity and pragmatism win the day in Geneva to benefit of all

ApressbriefingisheldbytheChinesesidefollowingtheChina-UShigh-levelmeetingoneconomica...

Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析|6大应用场景实战

这篇文章是关于Dify「模板转换」节点的终极指南，解析了基于Jinja2模板引擎的动态文本生成技巧，涵盖多源文本整合、知识检索结构化、动态API构建及个性化内容生成等六大应用场景，助力开发者高效利用模...

微软 Edge 浏览器 96.0.4664.93 稳定版发布:修复大量安全问题

IT之家12月12日消息，据外媒mspoweruser消息，微软12月11日为Edge浏览器推出了96.0.4664.93稳定版。该版本没有增加新功能，而是修复了大量漏洞，...

HarmonyOS NEXT仓颉开发语言实战案例:健身App

各位好，今日分享一个健身app的首页：这个页面看起比之前的案例要稍微复杂一些，主要在于顶部部分，有重叠的背景，还有偏移的部分。重叠布局可以使用Stack容器实现，超出容器范围的偏移可以使用负数间距来实...

如果使用vue3.0实现一个modal，你会怎么设计?

这是个很好的问题！设计一个Vue3.0Modal时，我建议按照可复用、高扩展、简洁的原则来实现。下面我给你一个清晰的设计思路，涵盖组件拆分、使用方式以及Vue3中特性（如Telepor...

在进行APP切图的前，我们需要做什么?

切图是个技术活，小伙伴们千万不能忽视切图的重要性噢，前文介绍了设计的七大元素，那么我们现在来看看在切图之前，我们需要做什么呢？。1、和客户端的技术沟通好用不同的框架来实现的时候，图会有不一样的切法。...

独立开发问题记录-margin塌陷（独立提出历史问题）

一、概述往事如风，一周就过去了。上周在Figma里指点江山，这周在前端代码里卑微搬砖。回想上周，在Figma中排列组合，并且精确到1像素。每设计出一个页面，成就感就蹭蹭往上涨。没想到还没沾沾自喜多久，...

循序渐进Vue+Element 前端应用开发(8)—树列表组件的使用

在我前面随笔《循序渐进VUE+Element前端应用开发(6）---常规Element界面组件的使用》里面曾经介绍过一些常规的界面组件的处理，主要介绍到单文本输入框、多文本框、下拉列表，以及按钮...

一周热门
最近发表
标签列表