HTML div 標籤 - HTML 網頁設計筆記

HTML div 標籤是 HTML 排版的重要元素，一般稱為 DIV 區塊，因為 DIV 元素是以區塊的型式呈現，預設值是每個 DIV 區塊會占用掉一整行的空間，不過 div 依然可以用來排版，因為透過 CSS 的樣式設定可以讓 div 有固定的寬度或浮動效果，另外，每一組 div 都可以有自己的樣式，例如不同的背景顏色、有背景圖片、特色邊框，甚至連 DIV 內的文字樣式都可以修改，應用範圍相當廣泛。

HTML div 標籤語法

範例程式碼：在新視窗開啟程式碼文字檔

標準的 DIV 區塊會有一個開頭 DIV 標籤與結尾 DIV 標籤，在開頭的 DIV 標籤內可以設定 style、id 或 Class，其中 style 是用來宣告一段 CSS 樣式，而 id 與 class 則是用來讓 CSS 選擇器做選擇用。

HTML div 標籤應用範例一、製作一個有背景顏色的區塊

範例程式碼：在新視窗開啟程式碼文字檔

範例的輸出結果

這個區塊的背景顏色是橘色

在範例一中，我們利用了 CSS 的背景顏色屬性 background-color 來替 DIV 區塊增加橘色的背景，這是個基礎的設計技巧，只要修改 background-color 的屬性質就能變成其他的背景顏色，關於此屬性的詳細用法請參閱友站 CSS 學習筆記的：css background-color 背景顏色。

HTML div 標籤應用範例二、在 DIV 區塊內再放一個 DIV

範例程式碼：在新視窗開啟程式碼文字檔

範例的輸出結果

範例二

範例二中總共有兩個 HTML DIV 標籤組，也就是有兩個 DIV 區塊的意思，由灰色邊框的區塊包住了綠色邊框的區塊，這就是 HTML div 標籤的特性，可以一層套住一層，變成非常多層的效果，範例中的 border 是 CSS 用來設計元素邊框的屬性，詳細用法請參閱友站 CSS 學習筆記的：CSS border 元素邊框設計。

與 HTML div 標籤相對應的是 span 標籤，請參閱：HTML span 標籤。

用 CSS 設計 HTML DIV 區塊元素