HTML <div> 標簽 · W3School HTML 參考手冊

# HTML <div> 標簽 ## 實例文檔中的一個部分會顯示為綠色： ``` <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div> ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流瀏覽器都支持 <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 和其他幫手](/xhtml/xhtml_structural_02.asp#div-class-id "div、id 和其他幫手") 這一節。 ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | [align](/tags/att_div_align.asp "HTML <div> 標簽的 align 屬性") | `left` `right` `center` `justify` | 不贊成使用。請使用樣式取而代之。規定 div 元素中的內容的對齊方式。 | ## 全局屬性 <div> 標簽支持 [HTML 中的全局屬性](/tags/html_ref_standardattributes.asp)。 ## 事件屬性 <div> 標簽支持 [HTML 中的事件屬性](/tags/html_ref_eventattributes.asp)。