這次要說的, 是 DIV 與 SPAN 標籤, 這兩個標籤在單純的 HTML 上其實作用不大, 通常它們都會搭配 CSS 來設定該範圍的樣式, 或是搭配 Script 來做一些 DHTML 的運用, 不過這裡還是稍微介紹一下, 並說明兩者的不同
DIV 標籤
這個標籤主要是用來定義一個區塊範圍, 這裡的區塊範圍一定是一個矩形(正方或長方形), 裡面可包含其他標籤及一般文字, 下面的範例先借用一下還沒講到的 CSS 語法來將它的底色設定成灰色, 藉此展現它的區塊範圍
(上面範例中 style="background:#DDDDDD;" 的語法即是 CSS 相關的語法, 現在不了解沒關係, 這不是這裡的重點, 之後會再說明)
在 HTML 中大概只有 align 這個屬性比較有用, 它的使用方式跟 TD 的 align 屬性一樣, 可以設定下面三種屬性
left:靠左對齊
center:置中對齊
right:靠右對齊
例如
而當它設定成 center 時, 其實它就跟在「基本排版語法」一篇中提過的 CENTER 標籤作用一樣
在上面的範例中, 我們也可以發現到, DIV 標籤它本身會有換行的效果, 也就是在 DIV 前後的文字, 都不會跟 DIV 內的文字呈現在同一行, 這跟下面要說的 SPAN 是最大的差別
SPAN 標籤
這個標籤主要在定義一個行內的範圍, 標籤裡也可包含其他標籤及一般文字, 它的範圍沒有一個特定的形狀, 而是隨它所包住的內容而改變, 下面的範例同樣先借用一下還沒講到的 CSS 語法來將它的底色設定成灰色, 藉此展現它的區塊範圍
我們可以看到, SPAN 標籤前後的文字都不會有額外的換行效果, 它只是單純的定義出它所包住的範圍而已, 因此, 隨著它所包住內容的排列, 它也呈現出了多邊形的範圍
在 HTML 中, SPAN 標籤幾乎沒有屬性可用
--gs--
{HTML基礎教學}{排版語法}{區塊標籤}
DIV 標籤
<DIV align="水平對齊"></DIV>
這個標籤主要是用來定義一個區塊範圍, 這裡的區塊範圍一定是一個矩形(正方或長方形), 裡面可包含其他標籤及一般文字, 下面的範例先借用一下還沒講到的 CSS 語法來將它的底色設定成灰色, 藉此展現它的區塊範圍
一些文字
<DIV style="background:#DDDDDD;">
這裡在 DIV 標籤中(第一行)
<BR>
這裡也在 DIV 標籤中(第二行)
</DIV>
一些文字
<DIV style="background:#DDDDDD;">
這裡在 DIV 標籤中(第一行)
<BR>
這裡也在 DIV 標籤中(第二行)
</DIV>
一些文字
(上面範例中 style="background:#DDDDDD;" 的語法即是 CSS 相關的語法, 現在不了解沒關係, 這不是這裡的重點, 之後會再說明)
在 HTML 中大概只有 align 這個屬性比較有用, 它的使用方式跟 TD 的 align 屬性一樣, 可以設定下面三種屬性
left:靠左對齊
center:置中對齊
right:靠右對齊
例如
<DIV align="left">這裡會靠左</DIV>
<DIV align="center">這裡會置中</DIV>
<DIV align="right">這裡會靠右</DIV>
<DIV align="center">這裡會置中</DIV>
<DIV align="right">這裡會靠右</DIV>
而當它設定成 center 時, 其實它就跟在「基本排版語法」一篇中提過的 CENTER 標籤作用一樣
一些文字
<DIV align="center">這裡在 DIV 標籤中</DIV>
一些文字
<CENTER>這裡在 CENTER 標籤中</CENTER>
一些文字
<DIV align="center">這裡在 DIV 標籤中</DIV>
一些文字
<CENTER>這裡在 CENTER 標籤中</CENTER>
一些文字
在上面的範例中, 我們也可以發現到, DIV 標籤它本身會有換行的效果, 也就是在 DIV 前後的文字, 都不會跟 DIV 內的文字呈現在同一行, 這跟下面要說的 SPAN 是最大的差別
SPAN 標籤
<SPAN></SPAN>
這個標籤主要在定義一個行內的範圍, 標籤裡也可包含其他標籤及一般文字, 它的範圍沒有一個特定的形狀, 而是隨它所包住的內容而改變, 下面的範例同樣先借用一下還沒講到的 CSS 語法來將它的底色設定成灰色, 藉此展現它的區塊範圍
一些文字
<SPAN style="background:#DDDDDD;">
這裡在 SPAN 標籤中(第一行)
<BR>
這裡也在 SPAN 標籤中(第二行)
</SPAN>
一些文字
<SPAN style="background:#DDDDDD;">
這裡在 SPAN 標籤中(第一行)
<BR>
這裡也在 SPAN 標籤中(第二行)
</SPAN>
一些文字
我們可以看到, SPAN 標籤前後的文字都不會有額外的換行效果, 它只是單純的定義出它所包住的範圍而已, 因此, 隨著它所包住內容的排列, 它也呈現出了多邊形的範圍
在 HTML 中, SPAN 標籤幾乎沒有屬性可用
--gs--
{HTML基礎教學}{排版語法}{區塊標籤}
沒找到你要的東西嗎?歡迎留下你的問題!若是我知道的,我會盡力的回答。
0 意見:
張貼留言
廣告訊息會被我刪除