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

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

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

如下代碼演示了用于分組塊級元素的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元素僅分組內(nèi)聯(lián)元素。因此，如果句子或段落的某個部分需要分組，可以使用SPAN元素。下面的代碼中添加了一個SPAN元素，以表明哪些內(nèi)容與某位發(fā)明家相關(guān)。該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>   

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

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

【編輯推薦】

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