HTML DIV 標籤用法

HTML DIV 標籤用法從以前僅用來標示一個網頁區塊到現在直接用來做網頁排版，這都是因為 CSS 技術的進步與普即所至，如果要靈活運用 HTML DIV 標籤就要從最基本的語法開始學習，這樣才知道如何在 DIV 標籤內加入樣式設計，熟悉 DIV 區塊的用法之後，幾乎可以大幅度的取代傳統 Table 的排版方式，本篇就從基本語法以及幾個常見的 DIV 應用範例實際操作給各位看。

HTML DIV 標籤語法
<div id="" class="" style="">把區塊內容放在這裡</div>
標準的一組 HTML DIV 區塊會有一個開始的 <div> 標籤以及一個結束的 </div> 標籤，通常要設定各種 DIV 區塊的樣式都在開頭的 <div> 內，例如設定 id、class 或 style 樣式，開頭 <div> 與結束 </div> 之間的位置就是區塊內容。

HTML DIV 標籤的應用範例一、設計出有邊框效果的 DIV 區塊
<div style="border:2px blue solid;">
HTML DIV 標籤範例
</div>
範例看起來會像這樣
HTML DIV 標籤範例
範例一是一個簡單的 HTML DIV 標籤，特別的地方在於我們用了 style 屬性宣告一段 CSS 樣式，樣式的內容就是要有一個 2px 粗的藍色邊框，其中 border 是 CSS 的元素邊框設計屬性，這樣就可以替 DIV 增加藍色邊框囉！

HTML DIV 標籤的應用範例二、嘗試修改 DIV 區塊內的文字大小
<div style="border:2px blue solid;font-size:13px;">
HTML DIV 標籤範例
</div>
範例看起來會像這樣
HTML DIV 標籤範例
延續範例一的程式碼，我們這次增加了 font-size 屬性，這是 CSS 用來設計文字大小用的屬性，我們將 font-size 設為 13px，這是一種小型可閱讀文字的概念。

HTML DIV 標籤的應用範例三、嘗試增加 DIV 區塊內背景顏色
<div style="border:2px blue solid;font-size:13px;background-color:orange;">
HTML DIV 標籤範例
</div>
範例看起來會像這樣
HTML DIV 標籤範例
範例三再替 HTML DIV 區塊增加一個 background-color 屬性，並將屬性值設定為 orange，意思是橘色的背景顏色。

從範例一到範例三，各位應該已經發現 DIV 區塊的各種樣式改變都是用 CSS 的屬性來調整，這也是未來的網頁設計趨勢，傳統的 HTML DIV 區塊因為有了 CSS 而有了更多的應用機會。

與 DIV 標籤對應的是 span 區域標籤，請參閱：HTML span 標籤用法。

更多 DIV 區塊
© Copyright webtech.tw Since 2010