HTML標記語言裡，能讓CSS和javaScript整合運作的關鍵，就是運用好HTML的屬性(HTML Attribute)，但是在使用屬性之前，我們要整理出需要進行美化或是添加功能的區塊，**< div >和< span >**標籤這時候就派上用場了。

在了解**< div >和< span >**之前，我們要先知道block和inline的區別。

div在網頁上的呈現，就算只有零星的文字也會占據整行的版面，而inline則會再行內，如果生動的比喻，div就像在捷運上的占位哥，span而是乖乖排隊的台灣人

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

我們舉例一下，如果我們希望forem(假文)加上橘色背景，我們可以在< p >標籤的外部包裹著
< div >標籤，這段< P >就被< div >給包覆為一個區塊，這樣我們就可以在< div >開頭標籤填入css的樣式，直接對< p >加上橘色背景，也可以在< head >裡編輯css的樣式或是外聯的方式，未來蔡蔡會寫一篇有關css的撰寫位置裡提到。

下面是< div >示範:

<p> 
    <div style=background-color:bisque>
     我是
    </div>
     蔡蔡
</p> 

顯示如下:

由上述可以知道div具有block的特性，沒有被< div >包覆的蔡蔡換行了，而< div >區塊則會有自己指定的背景顏色。

所以，如果想要在行內劃分一個區域，並且不會換行，我們可以使用< span >標籤，< span >是行內元素，可以保留原本段落的文字格式。

下面是< span >示範:

<p> 
        <span style=background-color:bisque>
         我是
        </span>
         蔡蔡
</p> 

顯示如下:

上面的例子，被**< span >**標籤包覆的文字加上底色，其他的文字並沒有被推到下一行。

我是結語

今天是鐵人賽第四天，我學習網頁設計的第11天，上個禮拜剛開始學習時，並沒有把< div >和< span >的概念搞清楚，所以今天特別把這個部分強調一下。

寫部落格的學習效果真的顯著，看完的文章或影片，雖然都會寫code練習，但是不容易形成一個知識體系，另外再搭配X-mind整合框架，是真滴好用，推薦小白入門的時候使用這一類的工具搭建自己的知識體系。