你對利用DIV元素和SPAN元素分組元素方法是否熟悉，這里和大家分享一下，利用DIV元素或SPAN元素可以分組多個元素，以創建頁面的某些部分或者子部分，相信本文介紹一定會讓你有所收獲。

利用DIV元素和SPAN元素分組元素

利用DIV元素或SPAN元素可以分組多個元素，以創建頁面的某些部分或者子部分。這些元素自身不會影響頁面的外觀，但是它們通常與CSS一起使用，以允許用戶添加樣式到頁面的某個部分(詳情參考第7章)。例如，可以將頁面中的所有腳注放置到一個DIV元素中，以表明DIV元素中的所有元素與該腳注相關。然后可以附加一個樣式到這個DIV元素，從而使用一組特殊的樣式規則來顯示腳法。

如下代碼演示了用于分組塊級元素的DIV元素：

<div class="footnotes"> 
 <h2>Footnotes</h2>   
<p><b>1</b> The World Wide Web was   
inventedby Tim Berners-Lee</p>   
<p><b>2</b> The W3C is the World Wide Web   
Consortium who maintain many Web    
standards</p> </div>   
 

另一方面，可以使用SPAN元素僅分組內聯元素。因此，如果句子或段落的某個部分需要分組，可以使用SPAN元素。下面的代碼中添加了一個SPAN元素，以表明哪些內容與某位發明家相關。該SPAN元素中包含了一個粗體元素和一些文本：

<div class="footnotes">   
<h2>Footnotes</h2>   
<p><span class="inventor"><b>1</b>   
The World Wide Web was invented  
 by Tim  Berners Lee</span></p>   
<p><b>2</b> The W3C is the World Wide  
 WebConsortium who maintain many Web  standards</p> 
</div>   

該元素自身對文檔在瀏覽器中的顯示外觀沒有任何影響，但是它對標記添加了額外的意義，即將相關元素分組在一起。這種分組也可以供其他處理應用程序使用，或者用于使用CSS規則將特殊的樣式賦給組中的元素(參見第7章)。

DIV元素和SPAN元素可以附帶所有的通用屬性和UI事件屬性，甚至是逐漸淘汰的align屬性(StrictXHTML1.0中已經移除該屬性)。

【編輯推薦】

1. 解析DIV元素與SPAN元素的區別
2. JavaScript代碼輕松實現DIV圓角
3. 網頁排版中IE6，IE7，Firefox瀏覽器兼容性寫法
4. CSS屬性display:inline-block使用揭秘
5. Firefox、IE7、IE6瀏覽器兼容問題概念解析