伴隨著 HTML 的發(fā)展，頁面布局大體上經(jīng)歷了 table 布局，div 布局，HTML5 語義元素布局三個階段，

如今使用 table 布局很少，table 的使用更多回到了它本身代表的意義，呈現(xiàn)數(shù)據(jù)。

而且布局通常要深度使用 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從業(yè)指北</h2>     <div id="nav">       <a href="#">首頁</a> | <a href="#">產(chǎn)品介紹</a> |       <a href="#">產(chǎn)品展示</a> |       <a href="#">關(guān)于我們</a>     </div>   </div>    <div     id="menu"     style="background-color:lightblue;height:600px;width:150px;float:left;"   >     這里是信息分類內(nèi)容   </div>    <div     id="content"     style="background-color:lightgreen;height:600px;width:450px;float:left;"   >     這里是網(wǎng)頁正文內(nèi)容   </div>    <div     id="footer"     style="background-color:lightgray;clear:both;text-align:center; height: 50px; line-height: 50px;"   >     &copy; 2024 IT從業(yè)指北 All right reserved.   </div> </div> 

為了方便展現(xiàn)網(wǎng)站常排版，在 CSS 里指定了所有元素的 margin 為 0。

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

效果如下：

這里用到了比較多的 CSS，如果從未接觸過，可能看著會有些不能理解。

不過我們重點講布局的結(jié)構(gòu)，至于這種結(jié)構(gòu)是如何通過 CSS 實現(xiàn)的，在這一章節(jié)里暫時不涉及。代碼也只是簡單的實現(xiàn)，不供實際使用的參考。實際的 CSS 代碼，會有一種更方便管理的書寫方式。

去掉呈現(xiàn)內(nèi)容，可以看到使用的 div 布局結(jié)構(gòu)如下：

<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 作為容器，整個網(wǎng)頁內(nèi)容包含在了這個容器里。

接著網(wǎng)頁的標(biāo)題處理于 header 區(qū)域，有 nav 表示導(dǎo)航欄菜單。

接下來是左邊的菜單 menu 和右側(cè)的內(nèi)容 content。

最下面是 footer 區(qū)域，用于顯示站點的版權(quán)信息。

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

而后來的 html5，引用了一些新的語義元素，這些語義元素在本質(zhì)上和 div 沒有區(qū)別，只是有了一個更清晰的意義。

HTML5 的語義元素

HTML5 里新增的語義元素如下：

• <header>

• <nav>

• <section>

• <article>

• <aside>

• <figcaption>

• <figure>

• <footer>

建議這些語義元素在布局里的使用如下圖：

如果根據(jù)這些語義元素的使用，對前一個例子做個修改的話，可以是這樣：

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

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

根據(jù)這些用途，把上述例子里的 div 元素?fù)Q成這些語義元素，在保留 CSS 的前提下，效果一樣。

現(xiàn)代布局里，還能見到 div 的身影，并不是完全被 HTML5 的語義元素取代。

總結(jié)

• ?? 布局在經(jīng)歷過去的發(fā)展至今，基本上不再使用 table。

• ?? div 是布局里最常使用的元素，它本身無意義。

• ?? HTML5 引用了一系列有語義的元素，在布局里，可以理解為用處和 div 一樣。