HTML div 標籤是網頁中的重要基礎元素，透過 DIV 標籤可以在網頁中創造各個不同的區塊，每個區塊內還可以增加更小的區塊，設計師也可以利用 HTML div 區塊來進行排版，對網路瀏覽器來說，每組 HTML div 標籤都是一個區塊級元素，基本會占用掉一整行的空間，當然設計師也可以透過 div 的屬性設定來調整這個部份，現在的 div 屬性設定都是採用 CSS 來設計。
HTML div 標籤區塊的基礎語法
一組標準的 HTML div 區塊是由一個開頭 <div> 標籤與一個結束 </div> 標籤所組成，其間背包起來的部份就是區塊內容，可以是文字、圖片、影片、框架 ... 等網頁內容，開頭的 <div> 區塊內可以設置 id、class 或直接開始一段樣式設計，也就是 style 的部份。
HTML div 標籤應用範例一、設計一個有邊框的 div 標籤區塊
範例的輸出結果
這個範例相當簡單，就是在開頭的 <div> 標籤內使用 style 來宣告一段 CSS 的樣式語法，border 就是用來設計元素邊框的標準語法，我們設計的是一個橘色的粗實線邊框，是不是非常簡單呢？關於邊框設計請參閱：CSS border 邊框。
HTML div 標籤應用範例二、設計一個有背景顏色的 div 標籤區塊
範例的輸出效果
範例二也相當簡單，只是把範例一的 border 改成用來設計元素背景顏色的 background-color 屬性而已，這是非常普遍的 div 背景顏色設計技巧，通常會用 16 位元的色碼來調整顏色。
- 找更多美麗的顏色 → 色碼表。
- 背景顏色屬性用法 → CSS background-color 背景顏色
繼續我們的下一個範例。
HTML div 標籤應用範例三、兩個包在一起的區塊
<div style="background-color:pink;">這是個有粉紅色背景色的 HTML div</div>
</div>
範例的輸出效果
範例三等於是結合了範例一與範例二的結果，我們把範例二的粉紅色 HTML div 標籤組整個放在範例一的橘色邊框 div 區塊內，為了讓範例呈現更清楚，我們在外圍的橘色大 div 區塊內增加了內距屬性，也就是 padding，讓兩個 div 區塊不要黏在一起，從範例的輸出結果可以看到這漂亮的兩個區塊。
除了以上的三個範例之外，其實 HTML div 標籤還有很多的應用方式，第一段也提到了可以用來排版，絕大多數的應用都會搭配 CSS 語法設計，這也是 div 區塊在未來應用的主流。
延伸閱讀