HTML5中的布局方式主要有两种：div布局和table布局。这两种布局方法各有特点，适用于不同的场景。下面我们将详细探讨这两种布局的异同。
我们来看div布局。Div布局是基于HTML元素`<div>`（定义文档中的分区或节）和CSS（Cascading Style Sheets）来实现页面结构和样式的。在div布局中，我们可以自由地定义每个div的尺寸、位置和样式，从而实现灵活多变的页面设计。例如，以下代码展示了如何用div布局创建一个包含头部、内容菜单、内容主体和底部的页面：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div布局示例</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 650px;
background-color: aqua;
}
#heading {
width: 100%;
height: 10%;
background-color: azure;
}
#content-menu {
width: 30%;
height: 80%;
background-color: chartreuse;
float: left;
}
#content-body {
width: 70%;
height: 80%;
background-color: chocolate;
float: left;
}
#footer {
width: 100%;
height: 10%;
background-color: darkgrey;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content-menu">内容菜单</div>
<div id="content-body">内容主体</div>
<div id="footer">底部</div>
</div>
</body>
</html>
```
在这个例子中，`#container`定义了整个页面的容器，`#heading`、`#content-menu`和`#content-body`分别代表头部、内容菜单和内容主体，而`#footer`则表示底部。通过设置`float`属性和`clear`属性，实现了多列布局。需要注意的是，div布局中的高度（height）通常需要指定具体值，而不是百分比，因为百分比高度在某些情况下可能无法正确计算。
与div布局相比，table布局则是利用HTML的表格元素（如`<table>`、`<tr>`、`<td>`等）来构建页面布局。这种方式的优点在于它可以轻松实现等宽或等高的单元格，适合用于固定宽度和高度的布局。例如：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table布局示例</title>
</head>
<body marginwidth="0px" marginheight="0px">
<table width="100%" height="650px" style="background-color: aqua">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td>
<td width="60%" height="80%" style="background-color: coral">内容</td>
<td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td>
</tr>
</table>
</body>
</html>
```
在这个table布局中，我们创建了一个三列的表格，其中头部占满整个表格宽度，内容部分由两列组成。`colspan`属性用于合并单元格，而`width`和`height`属性直接设定了单元格的大小。
然而，table布局的主要缺点是它不适合响应式设计，因为表格的结构较难通过CSS进行调整。此外，表格元素原本是用来展示数据的，当用于布局时，可能会对SEO（搜索引擎优化）产生负面影响，因为它可能使搜索引擎难以理解页面的实际内容。
div布局更适用于现代网页设计，因为它提供更大的灵活性和更好的SEO性能。而table布局在处理固定尺寸的布局时更为简便，但不推荐作为主要的页面布局手段。随着前端技术的发展，如Flexbox和Grid布局的出现，div布局变得更加高效和易于维护，成为了HTML5布局的首选方式。在实际开发中，应根据项目需求选择合适的布局策略。
