HTML的<div>及<span>標籤

         <div>及<span>這兩個標籤在網頁設計中很常用到，在我的論文研究中剛好有需要對這兩個標籤做一些處理，因此是時候要來好好了解一下這兩個標籤了。

        在HTML中有許許多多的標籤，每個標籤這個標籤都有其特殊意義以及用法，但是HTML中的標籤不可能表達這世界上所有的資料及意義，所以兩個特殊的標籤就出現了。這兩個標籤沒有像其他的標籤具有特殊的意義，例如：<table>這個標籤，我們一看到他就知道這是一個表格的資料，但是<div>及<span>雖不具有特殊的意義，但是可以透過id以及class這兩個屬性來讓這兩個標籤適時的描述我們想表達的資料。

        <div>標籤，這個標籤是一個"區塊級"(Block-level)的元素，而<span>則是一個"行內級"(Inline-level)，其實這兩個標籤差不多，其差別在文章的最下方會說明，透過這兩個標籤我們可以拿來表達一筆叫做學生的資料。(在HTML中應該沒有特別為學生這種資料訂一個標籤吧!?)那我們就可以這樣寫：

<div id="student-John" class="student">

<table class="student-data">

    <tr><th>Name：<td>Jonh</tr>

    <tr><th>Phone：<td>0912-345678</tr>

    <tr><th>E-mail：<td>John@gmail.com</tr>

</table>

</div>

<div id="student-Mary" class="student">

<table class="student-data">

    <tr><th>Name：<td>Mary</tr>

    <tr><th>Phone：<td>0987-654321</tr>

    <tr><th>E-mail：<td>Mary@gmail.com</tr>

</table>

</div>

        上面的描述就是說，我有一組"學生"(class="student")的資料，但光用一個class來描述學生資料並不夠，因為可能有很多個學生，例如：John及Marry，所以如果我們想要描述這筆資料是屬於John這名學生的話，就要使用id這個屬性來把他變得獨一無二(id="student-John")。這樣大家應該對這兩個標籤清楚一點了吧!

        而這兩個標籤差在哪裡呢?看一下程式碼的執行方式就知道了!首先是用<div>標籤寫的原始碼：

大家好，我是<div>Ryan</div>歡迎光臨。

在網頁上的顯示結果是...

大家好，我是

Ryan
歡迎光臨。

接下來是用<span>寫的原始碼：

大家好，我是<span>Ryan</span>歡迎光臨。

在網頁上的顯示結果是...

大家好，我是Ryan歡迎光臨。

看出差異了嗎?沒錯~<div>標籤就是會幫我們獨立出一個區塊來放我們的物件，而<span>標籤會把物件跟前面的描述連在一起，就是這樣而已~