一.使用<div>元素的HTML布局

注释：<div>元素常用作布局工具，因为能够轻松地通过CSS对其进行定位。这个例子使用了四个<div>元素来创建多列布局：

实例：

运行效果：

二.使用HTML5的网站布局

HTML5提供的新语义元素定义了网页的不同部分：

HTML5语义元素

header ----- 定义文档或节的页眉

nav ----- 定义导航链接的容器

section ----- 定义文档中的节

article ----- 定义独立的自包含文章

aside ------ 定义内容之外的内容（比如侧栏）

footer----- 定义文档或节的页脚

details-----定义额外的细节

summary-----定义details元素的标题

这个例子使用<header>、<nav>、<section>,以及<footer>来创建多列布局。

三.使用表格的HTML布局

注释：<table>元素不是作为布局工具而设计的。

<table>元素的作用是显示表格化的数据。

使用<table>元素能够取得布局效果，因为能够通过CSS设置表格元素的样式。