伴随着 HTML 的发展，页面布局大体上经历了 table 布局，div 布局，HTML5 语义元素布局三个阶段，

如今使用 table 布局很少，table 的使用更多回到了它本身代表的意义，呈现数据。

而且布局通常要深度使用 CSS，这里只是介绍典型的 div 布局，以及目前用来布局的元素。

使用 div 的基本布局

先来看个示例。

<div   id="container"   style="width:600px; margin:20px; text-align: center; margin: 0 auto; " >   <div id="header" style="background-color:lightcoral;">     <h2>IT从业指北</h2>     <div id="nav">       <a href="#">首页</a> | <a href="#">产品介绍</a> |       <a href="#">产品展示</a> |       <a href="#">关于我们</a>     </div>   </div>    <div     id="menu"     style="background-color:lightblue;height:600px;width:150px;float:left;"   >     这里是信息分类内容   </div>    <div     id="content"     style="background-color:lightgreen;height:600px;width:450px;float:left;"   >     这里是网页正文内容   </div>    <div     id="footer"     style="background-color:lightgray;clear:both;text-align:center; height: 50px; line-height: 50px;"   >     &copy; 2024 IT从业指北 All right reserved.   </div> </div> 

为了方便展现网站常排版，在 CSS 里指定了所有元素的 margin 为 0。

<style>   * {     margin: 0;   } </style> 

效果如下：

这里用到了比较多的 CSS，如果从未接触过，可能看着会有些不能理解。

不过我们重点讲布局的结构，至于这种结构是如何通过 CSS 实现的，在这一章节里暂时不涉及。代码也只是简单的实现，不供实际使用的参考。实际的 CSS 代码，会有一种更方便管理的书写方式。

去掉呈现内容，可以看到使用的 div 布局结构如下：

<div id="container">   <div id="header">     <div id="nav"></div>   </div>    <div id="menu"></div>    <div id="content"></div>    <div id="footer"></div> </div> 

通过所有 div 的 id 属性，我们能看到它在排版中的用途。

通过在最外层，使用 id 为 container 的 div 作为容器，整个网页内容包含在了这个容器里。

接着网页的标题处理于 header 区域，有 nav 表示导航栏菜单。

接下来是左边的菜单 menu 和右侧的内容 content。

最下面是 footer 区域，用于显示站点的版权信息。

div 是没有语义的元素，如果不看 id，根本不清楚它在布局里的用途。

而后来的 html5，引用了一些新的语义元素，这些语义元素在本质上和 div 没有区别，只是有了一个更清晰的意义。

HTML5 的语义元素

HTML5 里新增的语义元素如下：

• <header>

• <nav>

• <section>

• <article>

• <aside>

• <figcaption>

• <figure>

• <footer>

建议这些语义元素在布局里的使用如下图：

如果根据这些语义元素的使用，对前一个例子做个修改的话，可以是这样：

<header>   <nav></nav> </header> <aside></aside> <article></article> <footer></footer> 

可以看到，即使不指定名称，也能比较清楚地明白这些元素在布局中的用途。

根据这些用途，把上述例子里的 div 元素换成这些语义元素，在保留 CSS 的前提下，效果一样。

现代布局里，还能见到 div 的身影，并不是完全被 HTML5 的语义元素取代。

总结

• 🍑 布局在经历过去的发展至今，基本上不再使用 table。

• 🍑 div 是布局里最常使用的元素，它本身无意义。

• 🍑 HTML5 引用了一系列有语义的元素，在布局里，可以理解为用处和 div 一样。