當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML ＜div＞标签介绍

發(fā)布時(shí)間：2024/4/18 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML ＜div＞标签介绍小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

實(shí)例

文檔中的一個(gè)部分會(huì)顯示為綠色：

<div style="color:#00FF00"><h3>This is a header</h3><p>This is a paragraph.</p> </div>

親自試一試

瀏覽器支持

IEFirefoxChromeSafariOpera

所有主流瀏覽器都支持 <div> 標(biāo)簽。

定義和用法

<div> 可定義文檔中的分區(qū)或節(jié)（division/section）。

<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。

如果用 id 或 class 來(lái)標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。

用法

<div> 是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。實(shí)際上，換行是 <div> 固有的唯一格式表現(xiàn)?？梢酝ㄟ^(guò) <div> 的 class 或 id 應(yīng)用額外的樣式。

不必為每一個(gè) <div> 都加上類或 id，雖然這樣做也有一定的好處。

可以對(duì)同一個(gè) <div> 元素應(yīng)用 class 或 id 屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。

HTML 與 XHTML 之間的差異

在 HTML 4.01 中，div 元素的 "align" 屬性不被贊成使用。

在 XHTML 1.0 Strict DTD 中，div 元素的 "align" 屬性不被支持。

提示和注釋：

注釋：<div> 是一個(gè)塊級(jí)元素，也就是說(shuō)，瀏覽器通常會(huì)在 div 元素前后放置一個(gè)換行符。

提示：請(qǐng)使用 <div> 元素來(lái)組合塊級(jí)元素，這樣就可以使用樣式對(duì)它們進(jìn)行格式化。

案例分析

<body><h1>NEWS WEBSITE</h1><p>some text. some text. some text...</p>...<div class="news"><h2>News headline 1</h2><p>some text. some text. some text...</p>...</div><div class="news"><h2>News headline 2</h2><p>some text. some text. some text...</p>...</div>... </body>

例子解釋

正如您看到的，上面這段 HTML 模擬了新聞網(wǎng)站的結(jié)構(gòu)。其中的每個(gè) div 把每條新聞的標(biāo)題和摘要組合在一起，也就是說(shuō)，div 為文檔添加了額外的結(jié)構(gòu)。同時(shí)，由于這些 div 屬于同一類元素，所以可以使用 class="news" 對(duì)這些 div 進(jìn)行標(biāo)識(shí)，這么做不僅為 div 添加了合適的語(yǔ)義，而且便于進(jìn)一步使用樣式對(duì) div 進(jìn)行格式化，可謂一舉兩得。

提示：如需更深入地學(xué)習(xí) class 和 id 的用法，請(qǐng)閱《W3school 的結(jié)構(gòu)化標(biāo)記》這一章中?div、id 和其他幫手?這一節(jié)。

可選的屬性

屬性值描述

align

left
right
center
justify

不贊成使用。請(qǐng)使用樣式取而代之。

規(guī)定 div 元素中的內(nèi)容的對(duì)齊方式。

全局屬性

<div> 標(biāo)簽支持?HTML 中的全局屬性。

事件屬性

<div> 標(biāo)簽支持?HTML 中的事件屬性。

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的HTML ＜div＞标签介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。