HTML div 標籤

HTML div 標籤是網頁中的重要基礎元素,透過 DIV 標籤可以在網頁中創造各個不同的區塊,每個區塊內還可以增加更小的區塊,設計師也可以利用 HTML div 區塊來進行排版,對網路瀏覽器來說,每組 HTML div 標籤都是一個區塊級元素,基本會占用掉一整行的空間,當然設計師也可以透過 div 的屬性設定來調整這個部份,現在的 div 屬性設定都是採用 CSS 來設計。

HTML div 標籤區塊的基礎語法

<div id="自訂" class="自訂" style="自訂">區塊內容</div>

一組標準的 HTML div 區塊是由一個開頭 <div> 標籤與一個結束 </div> 標籤所組成,其間背包起來的部份就是區塊內容,可以是文字、圖片、影片、框架 ... 等網頁內容,開頭的 <div> 區塊內可以設置 id、class 或直接開始一段樣式設計,也就是 style 的部份。

HTML div 標籤應用範例一、設計一個有邊框的 div 標籤區塊

<div style="border:2px orange solid;">這是個有橘色邊框的 HTML div</div>

範例的輸出結果

這是個有橘色邊框的 HTML div

這個範例相當簡單,就是在開頭的 <div> 標籤內使用 style 來宣告一段 CSS 的樣式語法,border 就是用來設計元素邊框的標準語法,我們設計的是一個橘色的粗實線邊框,是不是非常簡單呢?關於邊框設計請參閱:CSS border 邊框

HTML div 標籤應用範例二、設計一個有背景顏色的 div 標籤區塊

<div style="background-color:pink;">這是個有粉紅色背景色的 HTML div</div>

範例的輸出效果

這是個有粉紅色背景色的 HTML div

範例二也相當簡單,只是把範例一的 border 改成用來設計元素背景顏色的 background-color 屬性而已,這是非常普遍的 div 背景顏色設計技巧,通常會用 16 位元的色碼來調整顏色。

繼續我們的下一個範例。

HTML div 標籤應用範例三、兩個包在一起的區塊

<div style="border:2px orange solid;padding:15px;">
<div style="background-color:pink;">這是個有粉紅色背景色的 HTML div</div>
</div>

範例的輸出效果

這是個有粉紅色背景色的 HTML div

範例三等於是結合了範例一與範例二的結果,我們把範例二的粉紅色 HTML div 標籤組整個放在範例一的橘色邊框 div 區塊內,為了讓範例呈現更清楚,我們在外圍的橘色大 div 區塊內增加了內距屬性,也就是 padding,讓兩個 div 區塊不要黏在一起,從範例的輸出結果可以看到這漂亮的兩個區塊。

除了以上的三個範例之外,其實 HTML div 標籤還有很多的應用方式,第一段也提到了可以用來排版,絕大多數的應用都會搭配 CSS 語法設計,這也是 div 區塊在未來應用的主流。

延伸閱讀

© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012