HTML div 標籤 - Wibibi

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

HTMLdiv標籤區塊的基礎語法 區塊內容 一組標準的HTMLdiv區塊是由一個開頭

標籤所組成，其間背包起來的部份就是區塊內容，可以是文字、圖片、影片、框架...等網頁內容，開頭的 範例的輸出結果 這是個有橘色邊框的HTMLdiv 這個範例相當簡單，就是在開頭的 範例的輸出效果 這是個有粉紅色背景色的HTMLdiv 範例二也相當簡單，只是把範例一的border改成用來設計元素背景顏色的background-color屬性而已，這是非常普遍的div背景顏色設計技巧，通常會用16位元的色碼來調整顏色。

找更多美麗的顏色→色碼表。

背景顏色屬性用法→CSSbackground-color背景顏色 繼續我們的下一個範例。

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

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

延伸閱讀 CSSDIV文字字型設計 CSSDIV文字顏色設計 CSSDIV背景圖片 CSSDIV背景顏色 CSSDIV三欄式網頁排版設計 CSSDIV兩欄式網頁排版 CSSDIV單欄式網頁排版 您可能會想看 設計HTML圖片與圖片邊框間的距離 DIV區塊內文字與邊框的距離調整 HTMLTABLE表格內的文字行高 DIV區塊內的文字行高設計 替HTMLbutton按鈕增加背景圖片 HTMLimgtitle與imgalt的差別 用CSS設計HTML表格欄位內文字靠下對齊 用CSS設計HTML表格欄位內文字靠上對齊 HTMLTablecolspan屬性 HTMLTablerowspan屬性 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012