位置:首頁(yè) > 軟件操作教程 > 編程開發(fā) > HTML > 問題詳情

HTML5 使用div元素

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-20

    ■知識(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)。

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部