區塊元素(div)

HTML是網頁的骨架，架構出來，再用CSS來對網頁進行美化，如果希望某段落的一兩個字可以變為紅色，又或者某幾個段落文字想要有背景顏色或邊框，這時就需要框選出一個範圍，而div和span標籤便可以明確的劃定位置。

在介紹div和span這兩個標籤前，有需要提一個小觀念，區塊(block)與行內(inline)。

• 區塊(block)：呈現在網頁上是會換行的內容
• 行內(inline)：會在同一行。這邊我用p標籤的例子來舉個說明。
  如果想要為文字加上紅色背景，你可以在p標籤外部包覆div標籤，讓div所包覆的內容形成一個區塊，可以想像div是在他包起來的範圍畫了一個框框。接著在div開頭標籤內，填入CSS的樣式。

div是division這個單字取前面三個字母來表示，division是區分的意思，div標籤主要的功能就是在形成一個個的區塊，方便網頁排版美化。

<div style="background-color:red;">
    <p>今天是第7天的介紹，div範例程式</p>
    <p>今天是第7天的介紹，div範例程式</p>
</div>

程式執行後的網頁內容將會是：

div標籤應用範例：有邊框的div標籤區塊

<div style="border:2px orange solid;">橘色邊框的HTML div範例</div>

程式執行後的網頁內容將會是：

div標籤應用範例：有背景色的div標籤區塊

<div style="background-color:pink;">粉紅色背景色的HTML div範例</div>

程式執行後的網頁內容將會是：

標籤應用範例：有邊框也有背景顏色的div標籤區塊

<div style="border:2px orange solid;padding:15px;">
<div style="background-color:pink;">橘色邊框和粉紅色背景色的HTML div範例</div>
</div>

程式執行後的網頁內容將會是：

行內元素 (span)

延續前面的例子，如果只想在「div範例程式」這些字上加紅底色，而使用div包覆，那麼那幾個字就會被換行，因為它是區塊，會自己有換行顯示的功能，並且在div的區塊內顯示的指定的底色。讓我們來示範看看:

<p>今天是第7天的介紹<div style='background-color:red'>div範例程式</div></p>

程式執行後的網頁內容將會是：

如果想在行內劃分出一個小區域，且不換行，可以使用span標籤。他是行內元素，不會換行，可保持想維持的段落文字格式。以下範例是把被span標籤包覆的文字加上底色，而其他的文字維持現狀。

<p>今天是第7天的介紹，<span style="background-color:red">span範例程式</span></p>
<p>今天是第7天的介紹，span範例程式</p>

程式執行後的網頁內容將會是：