一.HTML页面布局
1.1 什么是html页面布局？
HTML页面布局是指在网页中安排和组织内容的方式。它涉及到如何放置页面元素（例如文字、图片、视频等），以及如何确定它们之间的关系和空间。HTML页面布局是Web开发中非常重要的一部分，因为它可以影响用户对网站的使用和体验。
通过HTML页面布局，开发人员可以创建易于导航和浏览的页面，并使其具有适当的结构和外观，以达到最佳的用户体验效果。页面布局可以包括基本的网格系统、栅格布局、定位布局、框架布局等多种方法，每种方法都有其独特的优缺点和适用场景。
1.2 html样式举例
下面的图片就是在网页中的布局：
二.实现方法
2.1 常用方法
HTML页面布局可以使用多种方法，以下是其中一些常用的方法：
使用HTML表格：可以使用HTML表格来创建网页布局。表格可以被分成行和列，每个单元格可以包含文本、图像或其他元素。
使用CSS布局：可以使用CSS来控制网页中每个元素的位置和大小。通过设置元素的样式属性，可以将它们放置在网页上的任何位置，并调整它们的大小和形状。
使用CSS定位：CSS定位可以让开发者更加精确地控制元素的位置和大小。使用CSS定位可以将一个元素放置在网页上的任何位置，并且可以让它悬浮在其它元素之上。
使用HTML框架：可以使用HTML框架来创建复杂的网页布局。框架可以将网页拆分成多个区域，并使这些区域可以独立滚动。
以上仅是几种常见的布局方法，实际上还有很多其他的方法可以用于创建网页布局，具体取决于开发者的需求和技术水平。
2.2 实验方法
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
本次练习暂时不接触CSS，主要通过 <div> 和 <table> 来实现页面布局。
三.题目要求
3.1 题目
使用 <div> 和 <table>标签来简单实现页面的布局。
3.2 补充说明
<table>标签虽然也可以用来实现页面布局，但它本来的作用是实现页面的表格，它不是布局工具。
四.源代码
4.1 <div> 标签实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>终究还是散了</title> </head> <body> <front align="center"> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">div页面布局</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>前端工具</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#FFFACD;height:200px;width:400px;float:left;"> 请输入内容</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 作者：@CSDN：终究还是散了</div> </div> </front> </body> </html>
4.2 <table>标签实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <front align="center"> <table border="5" width="1024" height=500 bgcolor="#FFD700"> <tr height="100"> <td colspan="2">页头</td> </tr> <tr> <td rowspan="3">列表</td> <td>一行</td> </tr> <tr> <td>二行</td> </tr> <tr> <td>三行</td> </tr> <tr> <td colspan="2">页尾</td> </tr> </table> </front> </body> </html>
五.页面效果
5.1<div>标签实现效果
5.2 <table>标签实现效果
六.相关推荐
本人也是开始学习前端，慢慢开始，可以阅读我专栏里的其他文章。
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)