當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML ＜div＞标签介绍

發布時間：2024/4/18 HTML 50 豆豆

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

實例

文檔中的一個部分會顯示為綠色：

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

親自試一試

瀏覽器支持

IEFirefoxChromeSafariOpera

所有主流瀏覽器都支持 <div> 標簽。

定義和用法

<div> 可定義文檔中的分區或節（division/section）。

<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。

用法

<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現?？梢酝ㄟ^ <div> 的 class 或 id 應用額外的樣式。

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

可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。

HTML 與 XHTML 之間的差異

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

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

提示和注釋：

注釋：<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前后放置一個換行符。

提示：請使用 <div> 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。

案例分析

<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 模擬了新聞網站的結構。其中的每個 div 把每條新聞的標題和摘要組合在一起，也就是說，div 為文檔添加了額外的結構。同時，由于這些 div 屬于同一類元素，所以可以使用 class="news" 對這些 div 進行標識，這么做不僅為 div 添加了合適的語義，而且便于進一步使用樣式對 div 進行格式化，可謂一舉兩得。

提示：如需更深入地學習 class 和 id 的用法，請閱《W3school 的結構化標記》這一章中?div、id 和其他幫手?這一節。

可選的屬性

屬性值描述

align

left
right
center
justify

不贊成使用。請使用樣式取而代之。

規定 div 元素中的內容的對齊方式。

全局屬性

<div> 標簽支持?HTML 中的全局屬性。

事件屬性

<div> 標簽支持?HTML 中的事件屬性。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。