? asked in 電腦與網際網路程式設計 · 1 decade ago

請問 HTML語法中 SPAN 與 DIV 的分別

我想請問 HTML語法中 SPAN 與 DIV 的分別與適用時機

我一直搞不大懂這兩個的用法耶

可否舉個例子一下

我也看了很多 HTML 教學網站

似乎沒有人特別提這兩個 Tag

2 Answers

Rating
  • Geoff
    Lv 6
    1 decade ago
    Favorite Answer

    哇!!樓上的好厲害喔,說的真詳細,真是佩服!!我在此簡單的介紹一下兩者的差別<div>標籤會產生一個區塊,而這個區塊若沒有指定長寬,高度就會是內容物的高度,而寬度就是會涵蓋整個網頁的寬度,且與其他標籤間會自動斷行而<span>標籤本身不會自動斷行,且他所佔的區域就是內容物的高度及長度(若沒有指定長寬)至於他使用時機喔,個人是人為沒什麼差別,想用就用雖然前面有說兩個標籤的特性,但我也是可以利用樣式表(CSS)的方式將<span>加入寬度及高度和加上block令其產生<div>的效果<div>指定高度寬度及float間接的產生<span>的效果不過要注意的是<div>一定不可以被包袱在<span>當中雖然效果上是可以執行,但這並不符合W3C所制定的標準,這點要注意喔另外,樓上還有提到id/class的觀念,這個是屬於CSS的部分若您有興趣可以至網站上找資料在此推薦一個不錯的教學網站http://www.hsiu28.net/當然,裡頭也有針對div和span標籤的介紹您可以比較看...

    Source(s): 半桶水的我 和 糖糖OEC網站 http://www.hsiu28.net/
  • 1 decade ago

    HTML的標籤都有特定意義, 例如:p表示段落文字, table表示表格性的資料, h1表示文件中最重要的標題, li可以用來表示列表/清單性質的內容...等等. 但div/span這兩個比較特殊, 因為html的標籤再多種, 也無法窮盡地表達世上所有的資料的意義, 所以它給你div/span, 它們本身不像前面所提的那些標籤那樣具有特定的意義, 但如果搭配id與class屬性, 卻可以適當地描述你的資料(的意義). 至於這兩者的差別, 在於div是區塊級(block-level)元素, span是行內級(inline-level)元素, 請自行搜尋這兩類元素的特性有什麼差異.

    用法上, 舉例來說(這是W3C HTML 4.01規格書上的例子, 我盡量把可以翻成中文的部份都翻譯成中文): 你有一些顧客的資料, 想把它作成網頁, 但HTML的標籤中並沒有專門的元素是用來表示"顧客(client)", "電話號碼", "電子郵件信箱",..這些意義的. 這時後, 你就可以使用span跟div標籤來讓你的HTML文件具有你想要的結構與意義, 在這裡我們也用上了table這個標籤(因為我們的資料裡面, 有表格性的資料):

    <DIV id="client-wang" class="client">

    <P><SPAN class="client-title">顧客資訊:</SPAN>

    <TABLE class="client-data">

    <TR><TH>姓:<TD>王</TR>

    <TR><TH>名:<TD>大同</TR>

    <TR><TH>電話:<TD>(062) 555-1212</TR>

    <TR><TH>電子郵件:<TD>sb@foo.org</TR>

    </TABLE>

    </DIV>

    <DIV id="client-chen" class="client">

    <P><SPAN class="client-title">顧客資訊:</SPAN>

    <TABLE class="client-data">

    <TR><TH>姓:<TD>陳</TR>

    <TR><TH>名:<TD>小明</TR>

    <TR><TH>電話:<TD>(617) 555-1212</TR>

    <TR><TH>電子郵件:<TD>yves@coucou.com</TR>

    </TABLE>

    </DIV>

    每一組div所包住的, 剛好就是一個客人的所有資料, 請注意在這裡使用class與id來賦予這些div"意義" --像是"陳姓顧客"(client-chen)--這樣我們才知道div裡面的東西是在幹麻的(不然你的同事可能不清楚這裡面是什麼東西, 一個月後你自己也可能也會忘記). 用span來包住那些內容也是為了同樣的目的. 其實, 不只div/span裡面用到的class/id, 你在這裡所看到的其它class的名稱也都是有意義的, 例如:我們知道在table的儲存格中放的是顧客的資料, 所以我們就給這邊的table設了一個class, 取名為client-data(顧客資料), 這樣就讓這些table變得獨特, 可以跟其它的table區隔開來(假設你的文件中還有其它類型/意義的表格性資料的話).

    請注意, 在這裡我們完全是依照文件內容的結構與意義來使用HTML標籤的, 這也是W3C/標準所建議的方式, 如果你需要設定這份文件的外觀或樣式, 你可以利用CSS. 假設你對CSS已有瞭解, 那我相信你應該知道, 我們在上面的例子中所使用到的div/span與各個class/id, 將可以替你在設定樣式/外觀時帶來什麼樣的方便, 彈性與好處.

Still have questions? Get your answers by asking now.