小编给大家分享一下HTML如何实现布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
页面布局：
标题：前端的一部分，用于页面顶部。<header>标签用于在网页中添加标题部分。
导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
索引/侧边栏：它包含其他信息或广告，并不总是需要添加到页面中。
内容部分：内容部分是显示内容的主要部分。
页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。<footer>标签用于设置网页中的页脚。
使用表格布局
最简单和最流行的创建布局的方法是使用HTML <table>标签。可以按照自己喜欢的方式来对表格中的列和行进行排列
例
例如，使用包含3行和2列的表来实现以下HTML布局示例，但页眉和页脚列使用colspan属性跨越两列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h2>标题</h2>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "20">
<b>侧边栏</b>
</td>
<td bgcolor = "#eee" width = "100" height = "200">
内容
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
页脚
</center>
</td>
</tr>
</table> |
效果图：
多列布局
将网页内容放在多个页面中，可以将内容保留在中间列中，也可以使用左栏使用菜单，右栏可以用于放置广告或其他内容。
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>左菜单</b>
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
内容
</td>
<td bgcolor = "#aaa" width = "20%">
<b>右菜单</b>
</td>
</tr>
<table> |
效果图：
使用div布局
<div>元素是用于对HTML元素进行分组的块级元素。虽然<div>标记是块级元素，但HTML <span>元素用于在内联级别对元素进行分组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<div style = "width:450px">
<div style = "background-color:#b5dcb3; width:100%">
<h2>标题</h2>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>左侧栏</b></div>
</div>
<div style = "background-color:#eee; height:200px; width:250px; float:left;" >
<b>内容</b>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>右侧栏</b></div>
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
页脚
</center>
</div>
</div> |
效果图：
以上是“HTML如何实现布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注天达云行业资讯频道！