DIV 與 SPAN 標籤的比較與應用
一、<DIV> 與 <SPAN> 簡述
這兩個標籤，其應用上並不像其他一般的 HTML 標籤一樣，有著某種特殊的功能，它們是利用其 STYLE 的屬性，靠著 CSS 來定義更多的屬性及規則，再來套用到所屬的文字區塊上。所以，它們擁有更大的彈性及更廣的應用範圍，依照的屬性的配合，可以營造出一個完全依照個人喜好所架構的網站。
一、<DIV> & <SPAN> 的屬性
屬性 說明
HREF 指向一個網路資源，用來提供更多的資訊給 DIV 及 SPAN 內容有關的訊息。
ID 詳見大一課程，CSS 的特性，ID 挑選者。
CLASS 詳見大一課程，CSS 的特性，類別挑選者。
LANG 訂定標籤內的語言資訊。
DIR 設定文字的方向。
TITLE 設定文件的標題。
STYLE 同軸設定的樣式資訊。
ALIGN 文件對齊。
二、<DIV> & <SPAN> 的事件
事件 說明
onClick 當使用者用滑鼠點元件時，事件便發生。
onDblclick 當使用者雙擊元件時，事件便發生。
onMousedown 當使用者按下滑鼠按鈕時，事件便發生。
onMouseover 當使用者將滑鼠指標移上元件時，事件便發生。
onMousemove 當使用者移動滑鼠時，事件便發生。
onMouseout 當使用者滑鼠離開元件時，事件便發生。
onKeypress 當使用者按下任何按鍵時，事件便發生，且會取得使用者按下按鍵的值。
onKeydown 當使用者按下任何按鍵時，事件便發生。
onKeyup 當使用者放開任何按鍵時，事件便發生。
二、<DIV> & <SPAN> 的比較
<DIV> 與 <SPAN> 這兩個標籤，在大體上是沒有什麼差異的。不過細分的話，<SPAN> 標籤是將所包括的內容定義為 on-line(同軸) ，而 <DIV> 則將內容定義為(block-level)區塊層。這就有點像是 <SPAN> 為另一種形式的斷行標籤(<BR>)，而 <DIV> 就像是段落標籤(<P>)。
其實，我們在應用這兩個標籤的時候，大多都是將 <DIV> 定義為一個區段或是片段，換句話說，就是一個較大較完整的段落。而 <SPAN> 則是應用在較小的範圍裡面。如下例：
<DIV id="base" style="background-color: #336699; color: #ffffff; font-size: 12pt; font-family: 新細明體;">
<SPAN style="font-size: 200%; float: left;">其</SPAN>實，我們在應用這兩個標籤的時候，大多都是將 <DIV> 定義為一個區段或是片段，換句話說，就是一個較大較完整的段落。而 <SPAN>則是應用在較小的範圍裡面。
</DIV>
其結果如下：
其實，我們在應用這兩個標籤的時候，大多都是將 <DIV> 定義為一個區段或是片段，換句話說，就是一個較大較完整的段落。而 <SPAN> 則是應用在較小的範圍裡面。
留言
張貼留言