HTML 布局
在本教程中，您将了解创建网页布局的不同方法。
创建网站布局
创建网站布局是定位各种元素的活动，这些元素以结构良好的方式制作网页并赋予网站吸引人的外观。
您已经看到互联网上的大多数网站通常以多行多列的形式显示其内容，其格式类似于杂志或报纸，以便为用户提供更好的阅读和写作环境。 这可以通过使用 HTML 标记（例如 <table>, <div>, <header>, <footer>, <section> 等）并在其中添加一些 CSS styles 来轻松实现。
基于 HTML 表格的布局
Table 提供了在 HTML 中创建布局的最简单方法。 通常，这涉及将文本、图像等内容放入行和列的过程。
以下布局是使用具有 3 行和 2 列的 HTML 表格创建的 — 第一行和最后一行使用表的 colspan 属性跨越两列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
<table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
<h1 style="font-size:24px;">Tutorial Republic</h1>
</td>
</tr>
<tr style="height:170px;">
<td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
<ul style="list-style:none; padding:0px; line-height:24px;">
<li><a href="#" style="color:#333;">Home</a></li>
<li><a href="#" style="color:#333;">About</a></li>
<li><a href="#" style="color:#333;">Contact</a></li>
</ul>
</td>
<td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites...</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
<p>copyright © qyoo.cn</p>
</td>
</tr>
</table>
</body>
</html>— 上面的 HTML 代码将产生以下输出：
基于 HTML div 的布局
使用 <div> 元素是在 HTML 中创建布局的最常用方法。 <div>（代表除法）元素用于标记内容块或 HTML 文档中的一组其他元素。 如果需要，它可以包含更多其他 div 元素。
以下示例使用 div 元素创建多列布局。 它将产生与前面使用 table 元素的示例相同的结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
.header {
padding: 10px 20px;
background: #acb3b9;
}
.header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
.nav, .section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
.nav {
width: 20%;
background: #d4d7dc;
}
.section {
width: 80%;
}
.nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
.nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Tutorial Republic</h1>
</div>
<div class="wrapper clearfix">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="section">
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites...</p>
</div>
</div>
<div class="footer">
<p>copyright © qyoo.cn</p>
</div>
</div>
</body>
</html>— 上面的 HTML 代码将产生与上一个示例相同的输出：
我们使用 CSS 浮动 技术创建了这个布局，因为大多数 Web 浏览器都支持它。 或者，您也可以使用 CSS3 flexbox 创建现代且更灵活的布局。 请参阅 CSS3 flexbox 布局 上的教程以详细了解 flexbox 弹性盒子。
提示： 使用 DIV 元素和 CSS 可以创建更好的网页布局。 您只需编辑一个 CSS 文件即可更改网站所有页面的布局。 要详细了解 CSS，请查看我们的 CSS 教程 部分。
使用 HTML5 结构元素
HTML5 引入了新的结构元素，如 <header>, <footer>, <nav>, <section> 等，以更语义化的方式定义网页的不同部分。
您可以将这些元素视为常用类（如 .header, .footer, .nav, .section 等）的替代品。以下示例使用新的 HTML5 结构元素来创建与我们在前面示例中创建的相同的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Web Page Layout</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
header {
padding: 10px 20px;
background: #acb3b9;
}
header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
nav, section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
section {
width: 80%;
}
nav {
width: 20%;
background: #d4d7dc;
}
nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Tutorial Republic</h1>
</header>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites...</p>
</section>
</div>
<footer>
<p>copyright © qyoo.cn</p>
</footer>
</div>
</body>
</html>— 上面的 HTML 代码也将产生与上一个示例相同的输出：
下表简要概述了新的 HTML5 结构元素。
| 标签 | 说明 |
|---|---|
<header> |
表示文档或节的标题。 |
<footer> |
表示文档或部分的页脚。 |
<nav> |
表示导航链接的一部分。 |
<section> |
表示文档的一部分，例如页眉、页脚等。 |
<article> |
表示文章、文章内容或其他独立的信息单元。 |
<aside> |
表示与页面内容松散相关的一些内容。 |
请查看 HTML5 标签 上的参考以了解新引入的标签。