標籤：
div和span區別
相對與其他XHTML標籤，div和span對於它們包含的元素是沒有意義的。例如當你看到<h1></h1>標籤，你知道裡面是標題，當你看到<p></p>標籤的時候你知道裡面是一個新的自然段。可是div和span標籤並沒有這樣意義。div只是一個分塊的標籤，他可以將網頁分成幾個區塊。div裡面可能包含一個標題，一個段落，也可能包含圖片在內的很多元素，甚至div也可以再包含div。而span是行級元素(行內標籤)，通常情況下它都用來定義一小段文字的樣式。它們的另一個區別就是div會造成換行，而span則不會。
當然了，div和span的具體意義和區別脫離開實踐是很難說清楚的。下面我們就來看看div和span的應用執行個體。
塊級標籤<div>
原始碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真慘!被用來示範CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div內，類為boxhead</div>
<p>我在div內，屬性為box。</p>
<p>我在div內，屬性為box。</p>
<p>我在div內，屬性為box。</p>
<p>我在div內，屬性為box。</p>
</div>
</body>
</html>
在上面的例子中，我們首先在頁面內放了一個class為box的div，而在它的內部又放了一個class為boxhead的div。為了便與觀察，我們為div添加了背景顏色。下面我們來看看對這兩個div定義的前面教程中沒有的屬性：
對box的屬性：width: 30%;表示這個box div占頁面寬度的30%，而浮動屬性float: left; 則表示box div浮動在頁面的左側。
對boxhead的屬性：width: 100%;由於boxhead div在box div之內，那麼這裡的100%是指box的寬度。
行級標籤<span>(行內標籤)
。本執行個體在上面執行個體的基礎之上，只修改一段文本的顏色。修改如下代碼：
將第一個“<p>我在div內，屬性為box。</p>”修改為
<p><span style="color:red">我在div內，也在span內，</span>屬性為box。</p>
以上只是關於div和span的簡單介紹，而實際應用中div和span的用法是非常靈活的。
-------------------------------------------------
如何理解div和span
先還是說說div和span的區別，從大的方面來說，div被歸類到Structural Module（結構模組），而span被歸類到Text Module（文本模組）。小的方面，div是block-elements（區塊層級元素），span是inline-elements（行內元素）。在所有Structural Module中，div是唯一一個語義模糊的，在所有Text Module中，span也是唯一一個語義模糊的，呵呵，兩個Tag唯一的共性：語義模糊。
回到span的語義：跨度、範圍。這個這個……比division（分割）更為抽象，難以理解。在一陣瘋狂google後還是沒找到我想要的那種解釋，接近的都沒有，也許根本就沒有，所有的結果都指向表現，無論中英文都是指為字型添加樣式，可是可是W3中明文寫著The span element, in conjunction with the id, class and role attributes, offers a generic mechanism for adding structure to documents. 這裡的for adding structure to documents做何解釋？百思不得其解，後來氣不過，甚至開啟W3的源碼查看他是如何使用span的，雖說獲得了一些提示，但依舊不足以領悟到structure的真諦，我想應該是我的XML功力還不夠。唉，既然語義上，結構上行不通，那麼只好換個角度，從實際應用中試著去理解。span是行內元素，主要應用於文本，這點沒什麼異議，關鍵在於如何運用？為什麼我始終不認為span是個樣式容器，對，又是容器，google的時候發現清一色的容器解釋，div是大容器，span是小容器，我鬱悶。如果span因為文本的樣式而存在，它憑什麼存在？一段文本為什麼要添加樣式？如果你想強調應該使用em，如果想特彆強調應該使用strong，Text Module裡還有很多語義明確的標籤可以使用。所以span應該不是作為樣式容器而存在，就像div不是作為版面配置容器而存在一樣。但是我領悟不到span的真諦，哭啊！不過我可以拋磚引玉，在有一個地方，我一定會使用span的。那就是表單中。還是以登陸為例，如果登陸的資料需要展現出來，比如很多edit頁面和view頁面，結構應該完全相同，不同的是在edit頁面中是輸入框，而view頁面中則用span展現資料。類似如下：
<div>
<h3>使用者登陸</h3>
<div>
<label for="name">使用者名稱</label>
<span>MyName</span>
</div>
<div>
<label for="pw">密碼</label>
<span>MyPassword</span>
</div>
<p><button /></p>
</div>這樣的好處有兩點：1、和label區分開來，便於應用樣式，如下定義：div div span{}。2、可以通過節點提取所有錄入的資料。這是我目前唯一非常明確的使用span的地方，這裡除了span好像沒有更合適的了，也有點符合它的語義：範圍和結構化。這是我拋出的一塊磚頭，誰能引出玉來，或者知道玉，求之。其他span的運用仍在摸索中，包括從W3原始碼中獲得的提示。
差不多要說完了，這時我對關於容器的說法又耿耿於懷了，於是再次以容器為關鍵詞瘋狂google，憑什麼上上下下都說是容器，我要找出根源來，終於在最後，皇天不負有心人，在我執迷不悟的，懷著容器是錯誤理解的信念下，挖出來了根源。W3在這裡對div和span進行了這樣的解釋 ：generic language/style container。兩者都一樣。哦，原來如此，怪說不得所有的中文翻譯都是容器，我想很少人去看英文追根到底吧。確實style container應當翻譯為樣式容器。這一點都沒錯，錯的是請注意，這是html中的div和span！！！而不是xhtml中的div和span，隨即我再查到W3在對http://www.w3.org/TR/2004/WD-xhtml2-20040722/elements.html]xhtml中的div和span的解釋]，已經不一樣了：對於div是Define the characteristics of a block，而對於span是Define characteristics of text。對！這才是我的理解，也是我想要的正確解釋！！因為這個是xhtml 2.0中的解釋，由於2.0中section的存在，所以在對div的解釋中，節點的含義被取消了，xhtml1.x的解釋我懶得去找了。現在回頭看我剛才試著寫下的xhtml 2.0登陸結構中的div和最後一句話。嗯，div即便不做節點也不做行，可能還是有用的。
說到這裡，問一句，html和xhtml最大的不同在哪裡？是文法嗎？是名稱嗎？是嚴格了，xml化了嗎？不不不，本質區別是：html是面向表現的語言，而xhtml是面向結構的語言！所以我們應當從結構的角度去審視和理解與運用xhtml中的每一個Tag。比如容器的理解，在面向表現的html中，是正確的，但是在面向結構的xhtml中則錯了，應該理解為節點。理解直接影響運用，以表現的理解顯然無法寫出結構化的代碼。否則什麼合什麼離，哈哈哈，忍不住又敲出來了。
好了，span現在總結不出來，只好先對div做個總結收尾：在當前xhtml1.x環境下，我們需要產生節點（section）和行（line）的時候選用div。
div和span的區別
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
