HTML div 標籤
HTML div 標籤是網頁中的重要基礎元素,透過 DIV 標籤可以在網頁中創造各個不同的區塊,每個區塊內還可以增加更小的區塊,設計師也可以利用 HTML div 區塊來進行排版,對網路瀏覽器來說,每組 HTML div 標籤都是一個區塊級元素,基本會占用掉一整行的空間,當然設計師也可以透過 div 的屬性設定來調整這個部份,現在的 div 屬性設定都是採用 CSS 來設計。
HTML div 標籤區塊的基礎語法
HTML div 標籤應用範例一、設計一個有邊框的 div 標籤區塊
HTML div 標籤應用範例二、設計一個有背景顏色的 div 標籤區塊
HTML div 標籤應用範例三、兩個包在一起的區塊
範例三等於是結合了範例一與範例二的結果,我們把範例二的粉紅色 HTML div 標籤組整個放在範例一的橘色邊框 div 區塊內,為了讓範例呈現更清楚,我們在外圍的橘色大 div 區塊內增加了內距屬性,也就是 padding,讓兩個 div 區塊不要黏在一起,從範例的輸出結果可以看到這漂亮的兩個區塊。
除了以上的三個範例之外,其實 HTML div 標籤還有很多的應用方式,第一段也提到了可以用來排版,絕大多數的應用都會搭配 CSS語法設計,這也是 div 區塊在未來應用的主流。
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 位元的色碼來調整顏色。- 找更多美麗的顏色 → 色碼表。
- 背景顏色屬性用法 → CSS background-color 背景顏色
HTML div 標籤應用範例三、兩個包在一起的區塊
<div style="border:2px orange solid;padding:15px;">
<div style="background-color:pink;">這是個有粉紅色背景色的 HTML div</div>
</div>
範例的輸出效果
<div style="background-color:pink;">這是個有粉紅色背景色的 HTML div</div>
</div>
這是個有粉紅色背景色的 HTML div
除了以上的三個範例之外,其實 HTML div 標籤還有很多的應用方式,第一段也提到了可以用來排版,絕大多數的應用都會搭配 CSS語法設計,這也是 div 區塊在未來應用的主流。