前端三剑客
HTML

HTML 布局

# HTML 布局

HTML 布局是指通过 HTML 和 CSS 创建网页的结构和外观。以下是两种常见的布局方式：使用 <div> 元素和使用表格。

# 1. HTML 布局 - 使用 `<div>` 元素

<div> 元素是一个通用的容器，用于分组其他 HTML 元素。以下示例展示了如何使用五个 <div> 元素创建多列布局：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
  <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">主要的网页标题</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:#EEEEEE;height:200px;width:400px;float:left;">
    内容在这里
  </div>
 
  <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    版权 © runoob.com
  </div>
 
</div>
 
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在上述示例中：

<div id="container"> 是一个容器，设置了宽度为 500 像素。
<div id="header"> 定义了页头部分，背景颜色为橙色，包含主要标题。
<div id="menu"> 定义了一个侧边栏菜单，背景颜色为金色，高度为 200 像素，宽度为 100 像素，左浮动。
<div id="content"> 定义了主要内容区，背景颜色为浅灰色，高度为 200 像素，宽度为 400 像素，左浮动。
<div id="footer"> 定义了页脚部分，背景颜色为橙色，使用 clear:both 清除浮动，文本居中。

# 2. HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单方式，但这种方法已不推荐，因为使用 CSS 和 <div> 元素更为灵活。以下示例展示了如何使用表格创建类似的布局：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
  <td colspan="2" style="background-color:#FFA500;">
    <h1>主要的网页标题</h1>
  </td>
</tr>
 
<tr>
  <td style="background-color:#FFD700;width:100px;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript
  </td>
  <td style="background-color:#eeeeee;height:200px;width:400px;">
    内容在这里
  </td>
</tr>
 
<tr>
  <td colspan="2" style="background-color:#FFA500;text-align:center;">
    版权 © runoob.com
  </td>
</tr>
</table>
 
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在上述示例中：

<table width="500" border="0"> 定义了一个宽度为 500 像素的无边框表格。
第一行（<tr>）包含一个单元格（<td colspan="2">），设置了背景颜色为橙色，包含主要标题。
第二行包含两个单元格：
- 第一个单元格（<td>）宽度为 100 像素，背景颜色为金色，包含菜单项。
- 第二个单元格（<td>）宽度为 400 像素，背景颜色为浅灰色，包含主要内容。
第三行包含一个单元格（<td colspan="2">），背景颜色为橙色，文本居中，包含版权信息。

# HTML 布局的其他注意事项

响应式设计：通过使用媒体查询和弹性布局（如 Flexbox 和 Grid）创建响应式布局，以适应不同设备和屏幕尺寸。
语义化标签：使用 HTML5 提供的语义化标签（如 <header>、<nav>、<article>、<section> 和 <footer>）来增强页面的可读性和可访问性。
外部样式表：将 CSS 样式存储在外部样式表中，以保持 HTML 文件的简洁和易于维护。
现代布局技术：学习和使用现代布局技术，如 CSS Grid 和 Flexbox，来创建更加灵活和强大的布局。

示例代码（使用 CSS Grid 创建布局）：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>现代布局示例</title>
<style>
body {
  display: grid;
  grid-template-areas: 
    'header header'
    'menu content'
    'footer footer';
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  height: 100vh;
  margin: 0;
}

#header {
  grid-area: header;
  background-color: #FFA500;
}

#menu {
  grid-area: menu;
  background-color: #FFD700;
}

#content {
  grid-area: content;
  background-color: #EEEEEE;
}

#footer {
  grid-area: footer;
  background-color: #FFA500;
  text-align: center;
}
</style>
</head>
<body>

<div id="header"><h1>主要的网页标题</h1></div>
<div id="menu">
  <b>菜单</b><br>
  HTML<br>
  CSS<br>
  JavaScript
</div>
<div id="content">内容在这里</div>
<div id="footer">版权 © runoob.com</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

编辑此页

上次更新: 2025/01/25, 22:32:05

← HTML 区块 HTML 表单→

HTML 布局

# HTML 布局

# 1. HTML 布局 - 使用 <div> 元素

# 2. HTML 布局 - 使用表格

# HTML 布局的其他注意事项

# 1. HTML 布局 - 使用 `<div>` 元素