创建网站的第一步就是规划网站的布局，一般编程人员会根据样式稿拆分网站的模块，例如网站可以划分哪些部分，哪些部分在不同页面间可以复用，哪些需要单独的落地页等等。
良好的布局可以帮助你减少代码的编写量，也更容易进行维护。不管网站的最终布局样式如何，首先规划的肯定是 HTML 结构，HTML 页面最上层的结构基本上是固定不变的，首先是类型声明，然后是 html 元素，在其内部包含 head 和 body 两个元素。大致的结构如下：
网页的具体内容一般被包含在 body 元素内部。
表格布局
在早期的 web 开发中，编程人员一般会使用 HTML 提供的表格标签进行布局，因为表格是天然的轮廓结构，并且表格可以嵌套，所以满足早期的页面需求是足够的。
但是随着时间的发展，页面的元素越来越丰富，对于元素细节的把控越来越高，表格的灵活度就显得有些不够用了，现代的网站虽然仍然可以用表格的形式搭建，但是并不推荐。下面为了方便大家理解，展示一段表格布局的代码：
<!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">HTML</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 © meishizaolunzi.com</p>
</td>
</tr>
</table>
</body>
</html>
最后的效果如下：
div 布局
使用 div 布局基本上是现在网站开发的主流方法。div 是 division 的简称，说白了就是用来划分内容的标签。这个标签默认是一个块级元素，因为其对内容样式没有任何影响，所以常用来布局使用。
因为 div 自身不带有任何样式，所以想要改变网站的样式主要是使用附加的 CSS 样式进行修饰，而 div 更多的是负责网站的内容划分。
例如假设我们创建一个侧边栏，一般我们会这样写：
<div class="sidebar"></div>
然后使用 CSS 修改 sidebar 的样式效果。下面展示一个例子：
<!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>HTML</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 © meishizaolunzi.com</p>
</div>
</div>
</body>
</html>
网站的所有样式都放在 <style> 标签内部，而网站本身负责内容结构。
最后的效果和上面一样：
HTML5 元素
我们知道 HTML 的发展越来越强调标签的语义化，div 的布局方式虽然很方便，但是在语义程度上来说较弱，所以 HTML5 推出了很多强化语义的标签，用来明确标注网站的不同部分。
主流的标签有 <header>、<footer>、<nav>、<section> 等等。这些标签从文字上大家就应该理解它们的具体含义了，基本上拿来就能用，不过在使用之前最好了解一下它们的相关约束，例如以 <main> 标签为例，它在文档中必须唯一。这些没什么可说的，看过文档就知道了，用的时候多看看就好了。
下面给个例子：
<!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>HTML5</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 © meishizaolunzi.com</p>
</footer>
</div>
</body>
</html>
最终的效果和前面一样：
下面是一些常见的 HTML5 结构元素：
| 标签 | 描述 |
|---|---|
<header> | 文档的页头部分。 |
<footer> | 文档的页脚部分。 |
<nav> | 文档的导航部分。 |
<section> | 文档的一部分，可以用作网站的面包屑、页眉等部分。 |
<article> | 代表文章、博客或独立的信息单元。 |
<aside> | 主要用于一些内容的补充说明，例如文章的旁白、标注框之类的东西。 |
