HTML页面的布局方案
myzbx 2024-12-09 15:35 14 浏览
当我们刚开始学习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更清晰，但实际上增加了元素的种类，增加了开发人员的记忆负担，容易出错。因此，前端程序员基本上都不喜欢这种方案。
- 上一篇：CSS基本布局16例
- 下一篇：css布局方案汇总(28个实例图文并茂)
相关推荐
- Fabric.js使用说明详解（fabric nodejs）
-
Fabric介绍简介：Fabric是一款基于HTML5Canvas的开源绘图库，它提供了丰富的API和工具，可以轻松地创建交互式的绘图应用程序和游戏。功能特点：介绍Fabric的核心功能，如图形绘制...
- 如何才能快速将照片变成漫画?（如何才能快速将照片变成漫画风格）
-
本文分享8个超级详细的照片变漫画教程，让你秒变绘画大师，跟着教程就能亲手将自己的照片制作成精美的漫画，快来一起试试吧~1、PS一款专业的图像处理软件，具备出色的图像处理功能，提供了强大的编辑工具和广...
- 很少人知道的20个最好用的免费设计软件
-
不是每个人都能花重金去购置昂贵的软件来装备自己，特别是在刚开始涉足设计这个行业的新手们。我们知道adobe系列软件正版是收费的，而且很贵，虽然说我们国内已经能破解使用，很多人都认为adobe的那些软件...
- 13个免费的信息图表制作软件推荐（如何制作信息表）
-
制作信息图表涉及大量的工作，如：数据收集，数据排列，选择和规划信息图表的格式和设计信息图表。在设计信息图表时，选择适当的制图软件是一个非常艰巨的任务。下面为大家推荐13个最好的免费信息图表制作软件。A...
- 怎么转换图片的格式?（怎么转换图片的格式）
-
我们日常用到最多的图片格式是JPG/JPEG格式的，其他常见的图片格式包括有bmp，png，tif，gif，svg，cdr，ai，raw，webp等，由于图片的使用场景不同，所以要求的具体格式也会有所...
- Adobe的各种图形处理软件分别是做什么的
-
Adobe公司的Ps,Pr,Ae,An,Ai软件分别的用来做什么的？PS：AdobePhotoshop的简称，用于图像处理、编辑、通道、图层、路径综合运用，图像色彩的校正，各种特效滤镜的使用、特效字...
- 前端开发中，对图片的优化技巧有哪些?
-
按照先后顺序有以下：1.去掉无意义的修饰。嗯，我会瞎说吗？除了内容图片，其他的图片的作用是修饰，也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片！所以在优化之前要做的，首先是确认设计，...
- Adobe软件的最佳Linux替代品有哪些?这几款工具不容错过
-
如果你是一名平面设计工作者，那么估计很多与你职业相同或者是喜欢并正在学习平面设计的小伙伴们，而如果恰巧你们都是Linux用户的话，那么估计很多的小伙伴都在寻找Adobe的Linux替代品吧。但是，...
- 精心收集几个免费绘图、修图与照片编辑软件分享一下
-
本次为大家介绍几款绘图、修图与照片编辑软件，都可以免费授权个人与教育使用，有些开源软件甚至可以在工作上商业使用。其中大多数的绘图软件都是跨平台的，可以在Windows或Mac上安装，对个人照片...
- UI设计入门干货!八大软件+技能+素材网站
-
随着互联网行业的发展，UI设计师越来越多的被提及，UI设计师大火，需求岗位越来越多，也有越来越多的人转行投身UI设计师。UI设计是什么？一般所说的UI设计多指UI视觉设计，主要负责APP、Web、H5...
- 干货!一文读懂10种主流的图片格式
-
JPG、PNG、GIF，这些在我们生活中常见的图片格式，你真的了解它们吗？你知道除了这3种图片格式外，还有十多种主流的图片格式吗？每一种图片格式都有自己的特点和适用场景，选择正确的图片类型不仅能提升视...
- 最佳设计:A-Frame，阅读进度指示器，Colorify.js，交互式讲故事
-
最佳设计和开发好东西的综述以及一些新版本-第44期（2015年最后一期），包括A-Frame，阅读进度指示器，Colorify.js，交互式讲故事的动画地图路径，简单的Ionic侧菜单过渡等。摇滚...
- 当爆火的“粘土风”吹进铁路......
-
展播开始啦⑨<animateattributeName="opacity"begin="0s"dur="0.01"fill="freeze"from="1"to="1"/>&l...
- 日日是好日:书法艺术文字T恤定制，陶冶性情、现代生活新平衡
-
书法，心情和思想都融入文字的意境当中，对眼前或身边发生的不愉快事情视而不见、听而不闻，从而进入既轻松又舒适的状态，没有了妄念和烦恼，精神获得享受。本文节选自《DIYSKU个性化定制设计按需印刷行业出海...
- 从默默无闻到无可替代，Photoshop背后藏着多少不为人知的故事 ?
-
1990年2月推出了photoshop1.0。当时Photoshop只能在Mac计算机上运行，功能上也只有“工具”面板和少量的滤镜。1991年2月推出了photoshop2.0。该版本发行引发了桌...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)