Day7 HTML 区块标签：div、span

区块元素(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>

程序执行後的网页内容将会是：