HTML基礎教學(20)--區塊標籤

這次要說的, 是 DIV 與 SPAN 標籤, 這兩個標籤在單純的 HTML 上其實作用不大, 通常它們都會搭配 CSS 來設定該範圍的樣式, 或是搭配 Script 來做一些 DHTML 的運用, 不過這裡還是稍微介紹一下, 並說明兩者的不同

DIV 標籤

<DIV align="水平對齊"></DIV>

這個標籤主要是用來定義一個區塊範圍, 這裡的區塊範圍一定是一個矩形(正方或長方形), 裡面可包含其他標籤及一般文字, 下面的範例先借用一下還沒講到的 CSS 語法來將它的底色設定成灰色, 藉此展現它的區塊範圍

一些文字
<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>

而當它設定成 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 標籤前後的文字都不會有額外的換行效果, 它只是單純的定義出它所包住的範圍而已, 因此, 隨著它所包住內容的排列, 它也呈現出了多邊形的範圍

在 HTML 中, SPAN 標籤幾乎沒有屬性可用

--gs--
{HTML基礎教學}{排版語法}{區塊標籤}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。