HTML5 使用div元素

    ■知識點

    有時需要在一段內容外圍添加一個容器，從而可以為其應用CSS樣式或JavaScript效果。如果沒有這個容器，頁面就會不一樣。在評估內容的時候，考慮使用article、section、aside、nav等元素，卻發(fā) 現它們從語義上來講都不合適。

    這時，真正需要的是一個通用容器，一個完全沒有任何語義含義的容器。這個容器就是div元素，用戶可以為其添加樣式或JavaScript效果了。

    ■實例設計

    【示例1】下面的示例為頁面內容加上div以后，可以添加更多樣式的通用容器。

<div>

<article>

<hl>文章標題</h1>

<P>文章內容</P>

<footer>

<p>注釋信息</P>

<address><a href="#">W3C</a></address>

</footer>

</article>

</div>

    現在有一個div包著所有的內容，頁面的語義沒有發(fā)生改變，但現在有了一個可以用CSS添加樣式的通用容器。

    與 header、footer、main、article、section、aside、nav、hl~h6、p 等兀素一樣，在默認情況下，div 元素自身沒有任何默認樣式，只是其包含的內容從新的一行開始。不過，我們可以對div添加樣式以實現設計。

    div對使用JavaScript實現一些特定的交互行為或效果也是有幫助的。例如，在頁面中展示一張圖片或一個對話框，同時讓背景頁面覆蓋一個半透明的層（這個層通常是一個div)。

    盡管HTML用于對內容的含義進行描述，但div并不是唯一沒有語義價值的元素。span是與div對應的一個元素：div是塊級內容的無語義容器，而span則是短語內容的無語義容器，例如它可以放在段 落元素p之內。