div元素是一個最常用的通用塊元素，它用于包住一些元素和文字內容，以便進一步用CSS進行排版處理。
<div>標記簡單而言就是一個區塊容器標記，可以將網頁分割為獨立的、不同的部分，以實現網頁的規劃和布局。<div>與</div>之間相當于一個容器，可以容納段落、標題、圖像等各種網頁元素，也就是說大多數HTML標記都可以嵌套在<div>標記中，<div>中還可以嵌套多層<div>。
<div>標記非常強大，通過與id、class等屬性配合，然后使用CSS設置樣式，來替代大多數的文本標記。
下面通過案例2-10來演示其用法，效果如圖2-10所示。
例2-10 example10.html
| <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>我喜愛的李白詩</title> </head> <body> <h1>我喜愛的李白詩</h1> <div> <h2>靜夜思</h2> <hr> <pre> 窗前明月光， 疑是地上霜。 舉頭望明月， 低頭思故鄉。 </pre> </div> <div> <h2>下江陵</h2> <hr> <pre> 朝辭白帝彩云間， 千里江陵一日還。 兩岸猿聲啼不住， 輕舟已過萬重山。 </pre> </div> </body> </html> |
圖2-10 div標記示例
圖2-11 div標記示例
div元素在瀏覽器中看不出什么效果，通過CSS語句在div元素中添加樣式，可以將div元素所包含的內容由縱向排版變為橫向排版。
下面通過案例2-11來演示其用法，效果如圖2-11所示。
例2-11example11.html
| <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>我喜愛的李白詩</title> </head> <body> <h1>我喜愛的李白詩</h1> <div style="float:left;width:200px;margin-right:10px;"> <h2>靜夜思</h2> <hr> <pre> 窗前明月光， 疑是地上霜。 舉頭望明月， 低頭思故鄉。 </pre> </div> <div style="float:left;width:200px"> <h2>下江陵</h2> <hr> <pre> 朝辭白帝彩云間， 千里江陵一日還。 兩岸猿聲啼不住， 輕舟已過萬重山。 </pre> </div> </body> </html> |
2.4.4 語義塊元素
曾幾何時，前端的頁面布局一直采用div，但是div本身并沒有實際的意義，它只是定義了一個區域，而且這個區域是做什么的瀏覽器并不知道，不利于頁面的SEO優化。因此HTML5中新增的語義化標簽就很好的解決了這個問題，當然它還有其他一些好處，接下來我們就一起來看看吧。
HTML5新增了一系列語義塊元素，也就是說，這些元素的標簽名定義了應用的意義。HTML5中常用的語義塊元素，如下表2-2所示。
表2-2 語義塊元素
| 標簽名 | 描 描述 |
| <header> | 表示頁面中一個內容區塊或整個頁面的標題。 |
| <section> | 頁面中的一個內容區塊，比如章節、頁眉、頁腳或頁面的其他部分，可以和h1、 h2…等元素結合起來使用，表示文檔結構。 |
| <article> | 表示頁面中一塊與上下文不相關的獨立內容，比如一篇文章。 |
| <aside> | 表示<article>標簽素內容之外的、與<article>標簽內容相關的輔助信息?？捎米魑恼碌膫葯?/span> |
| <hgroup> | 表示對整個頁面或頁面中的一個內容區塊的標題進行組合。 |
| <figure> | 表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。 |
| <figcaption> | 定義 <figure> 標簽的標題。 |
| <nav> | 表示頁面中導航鏈接的部分。 |
| <footer> | 表示整個頁面或頁面中一個內容區塊的腳注。一般來說，它會包含創作者的姓名、創作日期以及創作者的聯系信息。 |
傳統方式布局與HTML5語義化標簽布局的對比如圖2-12所示。
圖2-12 傳統方式布局與HTML5語義化標簽布局的對比
1.header元素
HTML5中的header元素是一種具有引導和導航作用的結構元素，該元素可以包含所有通常放在頁面頭部的內容。其基本語法格式如下：
| <header> <h1>網頁主題</h1> ... </header> |
2.nav元素
nav元素用于定義導航鏈接，是HTML5新增的元素，該元素可以將具有導航性質的鏈接歸納在一個區域中，使頁面元素的語義更加明確。例如下面這段案例2-12代碼：
例2-12example12.html
| <nav> <ul> <li><a href="#">首頁</li> <li><a href="#">公司概況</li> <li><a href="#">產品展示</li> <li><a href="#">聯系我們</li> </ul> </nav> |
3.article元素
article元素代表文檔、頁面或者應用程序中與上下文不相關的獨立部分，該元素經常被用于定義一篇日志、一條新聞或用戶評論等。article元素通常使用多個section元素進行劃分，一個頁面中article元素可以出現多次。下面通過一個案例對article元素的用法進行演示，如圖2-13所示。
例2-13 example13.html
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>article元素的使用</title> </head> <body> <article> <header> <h2>第一章</h2> </header> <section> <header> <h2>第1節</h2> </header> </section> <section> <header> <h2>第2節</h2> </header> </section> </article> <article> <header> <h2>第二章</h2> </header> </article> </body> </html> |
圖2-13 article元素的使用
圖2-14 aside元素的使用
上述代碼包含了兩個article元素，其中，第1個article元素又包含了一個header元素和兩個section元素。
4.aside元素
aside元素用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等其他類似的有別于主要內容的部分。 aside元素的用法主要分為兩種：
(1)被包含在article元素內作為主要內容的附屬信息。
(2)在article元素之外使用，作為頁面或站點全局的附屬信息部分。
下面通過案例2-14對aside元素的用法進行演示，如圖2-14所示。
例2-14 example14.html
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>aside元素的使用</title> </head> <body> <article> <header> <h1>標題</h1> </header> <section>文章主要內容</section> <aside>其他相關文章</aside> </article> <aside>右側菜單</aside> </body> </html> |
在例2-14中定義了兩個aside元素，其中第1個aside元素位于article元素中，用于添加文章的其他相關信息。第2個aside元素用于存放頁面的側邊欄內容。
