欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

伴隨著 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 一樣。