HTML5 使用div元素

    ■知識(shí)點(diǎn)

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

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

    ■實(shí)例設(shè)計(jì)

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

<div>

<article>

<hl>文章標(biāo)題</h1>

<P>文章內(nèi)容</P>

<footer>

<p>注釋信息</P>

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

</footer>

</article>

</div>

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

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

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

    盡管HTML用于對(duì)內(nèi)容的含義進(jìn)行描述，但div并不是唯一沒有語(yǔ)義價(jià)值的元素。span是與div對(duì)應(yīng)的一個(gè)元素：div是塊級(jí)內(nèi)容的無(wú)語(yǔ)義容器，而span則是短語(yǔ)內(nèi)容的無(wú)語(yǔ)義容器，例如它可以放在段 落元素p之內(nèi)。