HTML div 標籤
文章推薦指數: 80 %
一組標準的HTML div 區塊是由一個開頭
標籤與一個結束
標籤所組成,其間背包起來的部份就是區塊內容,可以是文字、圖片、影片、框架.
HTMLdiv標籤
HTMLdiv標籤是網頁中的重要基礎元素,透過DIV標籤可以在網頁中創造各個不同的區塊,每個區塊內還可以增加更小的區塊,設計師也可以利用
HTMLdiv區塊來進行排版,對網路瀏覽器來說,每組HTMLdiv標籤都是一個區塊級元素,基本會占用掉一整行的空間,當然設計師也可以透過
div的屬性設定來調整這個部份,現在的div屬性設定都是採用 CSS 來設計。HTMLdiv標籤區塊的基礎語法
標籤與一個結束
標籤所組成,其間背包起來的部份就是區塊內容,可以是文字、圖片、影片、框架...等網頁內容,開頭的區塊內可以設置id、class
或直接開始一段樣式設計,也就是style的部份。
HTMLdiv標籤應用範例一、設計一個有邊框的div 標籤區塊這是個有橘色邊框的HTMLdiv
範例的輸出結果
這是個有橘色邊框的HTMLdiv
這個範例相當簡單,就是在開頭的HTMLdiv標籤應用範例一、設計一個有邊框的div 標籤區塊
標籤內使用style來宣告一段 CSS 的樣式語法,border
就是用來設計元素邊框的標準語法,我們設計的是一個橘色的粗實線邊框,是不是非常簡單呢?關於邊框設計請參閱:CSS
border邊框。
HTMLdiv標籤應用範例二、設計一個有背景顏色的div 標籤區塊這是個有粉紅色背景色的HTMLdiv
範例的輸出效果
這是個有粉紅色背景色的HTMLdiv
範例二也相當簡單,只是把範例一的border改成用來設計元素背景顏色的background-color屬性而已,這是非常普遍的div
背景顏色設計技巧,通常會用16位元的色碼來調整顏色。HTMLdiv標籤應用範例二、設計一個有背景顏色的div 標籤區塊
找更多美麗的顏色→ 色碼表。
背景顏色屬性用法→ CSS background-color背景顏色 繼續我們的下一個範例。
HTMLdiv標籤應用範例三、兩個包在一起的區塊
除了以上的三個範例之外,其實HTMLdiv標籤還有很多的應用方式,第一段也提到了可以用來排版,絕大多數的應用都會搭配 CSS語法設計,這也是 div區塊在未來應用的主流。
延伸文章資訊
- 1HTML <div> 标签 - 菜鸟教程
HTML <div> 标签实例文档中的一个区域将显示为蓝色: [mycode3 type='html'] 这是一个在div 元素中的标题。 这是一个在div 元素中的文本。 [/mycode3]...
- 2HTML div 標籤
一組標準的HTML div 區塊是由一個開頭<div> 標籤與一個結束</div> 標籤所組成,其間背包起來的部份就是區塊內容,可以是文字、圖片、影片、框架.
- 3HTML div 標籤 - Wibibi
HTML div 標籤是網頁中的重要基礎元素,透過DIV 標籤可以在網頁中創造各個不同的區塊,每個區塊內還可以增加更小的區塊,設計師也可以利用HTML div 區塊來進行排.
- 4HTML <div> 區塊容器元素 - Fooish 程式技術
<div> 標籤(tag) 是用來當作容器(container),用來包裹其他HTML,將HTML 文件的內容整理出不同獨立區塊(block),用途是方便給CSS 做樣式排版或方便 ...
- 515個常用的HTML標籤與屬性基本介紹 - 自學成功道
HTML標籤一大堆,還有各種屬性要學習,常用的HTML標籤與屬性基本介紹給你,讓你先學會常用 ... 區塊元素<div>; 行內元素<span>; 常見的6個語意標籤.