DIV 標籤

 

【打包網頁元件】

被<DIV>或<SPAN>標籤包起來的文字、圖片...任何東西,瀏覽器都會將之視作一個物件。就如同我們在打包物品一樣,您可以一個包裹只包一件衣服,也可以一個包裹包衣服、鞋子、帽子等。<DIV>和<SPAN>標籤就是這種功能!您可以用<SPAN>標籤包住一段文字,該段文字就成了一個物件(您要想成包裹也無可厚非...),您也可以用<SPAN>標籤包住一段文字,一張圖、一個表格,那麼這三個東西也會被視作一個物件。

這兩個標籤在DHTML(動態HTML)中,是相當重要的東西,因為,動態HTML顧名思義,有些東西是動態的,可能是一張圖、一段文字要動來動去。要一張圖動來動去還好,因為,一張圖本身就是一個「物件」。但是,要怎樣讓瀏覽器知道某一句話,或是某一個字是一個物件?或是要讓圖片和表格同時動來動去,那麼此時,您就需要用到 <DIV>、<SPAN>標籤。

【有什麼不同?】

<DIV>、<SPAN>標籤究竟有什麼不同?有!不過只有一個地方比較不一樣,您可以比較看看:

原始碼 我是一個被DIV標籤包住的「<DIV>物件</DIV>」<br>。
第二個「<SPAN>物件</SPAN>」則是被SPAN包住了!
結果 我是一個被DIV標籤包住的「
物件
」。
第二個「物件」則是被SPAN包住了!

發現了嗎?被<DIV>包住的網頁元件會變成一個「區塊物件」,也就是會「自成一塊」,旁邊的東西的會被擠到上一行或下一行去,自己獨立成一行。而被<SPAN>包住的物件則可以和大夥和樂融融的擺在一起,不會斷行,也不會自成一塊。您可以視不同的狀況,使用不同的標籤。

【這標籤怎麼用?】

要明白的告訴您 <DIV>、<SPAN> 標籤要怎麼用是有點困難的,因為,網頁設計會面對的情況千變萬化,不過,工友還是舉個實例好了!免得您還是一頭霧水。

現在工友想要設計一個機制,就是讓使用者按下「按我」兩個字時,會出現一個警告對話框(不是使用連結喔!),我們這就來玩玩看吧!

原始碼 快來<span onClick=alert('您那麼聽話幹嘛!')>按我</span>吧!
結果 快來按我吧!

別懷疑,按下下邊的「按我」兩個字看看!(此時游標不會變成手指狀!)

工友來解釋一下,我們先用<SPAN>標籤將「按我」兩個字變成一個物件,然後,我們指定:當滑鼠按到這個物件時(onClick)則立即執行alert('***')(出現警告對話框)這樣明白嗎?


Established since: March 28, 2003
All the design R 2003 by Admin