2個都是用來划分區間但是沒有實際語義的標簽,差別就在於div是塊級元素,不會其他元素在同一行;span是內聯元素，可以與其他元素位於同一行。
DIV 和 SPAN 元素最大的特點是默認都沒有對元素內的對象進行任何格式化渲染。主要用於應用樣式表（共同點）。
兩者最明顯的區別在於DIV是塊元素，而SPAN是行內元素(也譯作內嵌元素)。
詳解：1.所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行，測試一下下面的代碼你會有更形象的理解：
測試<span>緊跟前面的"測試"顯示</span><div>這里會另起一行顯示</div>
2.塊元素和行內元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉化，如：
測試<div style="display:inline">緊跟前面的"測試"顯示</div><span style="display:block">這里會另起一行顯示</span> 
轉載：
＜span＞SPAN標記有一個重要而實用的特性，即它什么事也不會做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，＜span＞標識符允許你將一個段落分成不同的部分。
還有一個標識符具有類似的功能，＜div＞DIV也被用來在HTML文件中建立邏輯部分。但與＜div＞SPAN不同，＜div＞工作於文本塊一級，它在它所包含的HTML元素的前面及后面都引入了行分隔。
技巧：有些朋友會說DIV是層標簽，其實HTML里是沒有層這個說法的，只不過是為了易於理解，Dreamweaver里才這樣寫的，每個對象都可以成為“層”，只需要給對象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
<img src="demo.gif" style="posibion:absolute;left:20;top:20">
- 來源：互聯網
html4規范的一大突破就是引入了一大空元素<span>和<div>。所謂空元素，就是說如果單獨在頁面上插入這兩個元素，不會對頁面產生影響，但是這兩個屬性專門為樣式表定義而生，如果對<span>和<div>定義樣式表以后，其中內容的樣式舊會隨之變化。
<span>和<div>元素都能處理任意大小的片斷，他們之間的異同可以用一個例子來說明。
示例如下
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 .myspan1 { color: #FFFFFF; }
07 .myspan2 { color: #000000; background-color: #CCFFCC; }
08 .myspan3 { color: #FFFFFF; background-color: #000080; }
09 .myspan4 { color: #000000; background-color: #FFCCCC; }
10 .mydiv1 { color: #FFFFFF; background-color: #008000; }
11 .mydiv2 { color: #000000; background-color: #CCCCFF; }
12 .mydiv3 { color: #FFFFFF; background-color: #000000; }
13 .mydiv4 { color: #000000; background-color: #FFFFAA; }
14 </style>
15 </head>
16 <body>
17 <h2>生命必須元素</h2>
18 <span class="myspan1">水</span>
19 <span class="myspan2">維生素</span>
20 <span class="myspan3">蛋白質</span>
21 <span class="myspan4">礦物質</span>
22 <hr>
23 <div class="mydiv1">水</div>
24 <div class="mydiv2">維生素</div>
25 <div class="mydiv3">蛋白質</div>
26 <div class="mydiv4">礦物質</div>
27 </body>
28 </html>
文件說明
設計者在代碼中輸入了4個單詞，單詞之間沒有換行，也沒有空格。然后為每一個單詞嵌套上<span></span>和<div></div>元素，兩種元素產生了不同的顯示效果。
<span>元素包含的內容，在顯示格式上沒有任何變化，沒有因為插入<span>元素而產生換行或者其他排版效果。這樣的顯示效果稱為“行內元素”，設計者可以在一段文本中插入任意多對<span>元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。
<div>元素所包含的內容，在格式上有所變化，每一個<div>元素所包含的內容都另起一行，瀏覽器為他們分配了一個獨立區域，形成一個一個“塊”，因此<div>也被稱作“塊級元素”。不過除了這個區別，在其他方面<span>和<div>基本相同，它們都可以為其中內容添加各種樣式。
正是有了<span>和<div>兩個元素的出現，使得HTML4的樣式定義變得更為靈活和規范。
1、行內樣式定義<span>元素
<span>屬於行內樣式定義元素，它的插入不會使原有結構產生任何變化，直到設計者為它提供了屬性為止。
基本語法
<span 屬性=“屬性值></span>
<span>元素的首尾標記必須同時成對出現，且<span>元素允許多重嵌套，也就是說，一個<span>元素中可以嵌套任意多個<span>元素。
文件范例
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 p { line-height: 1.5em;
07 font-family: Tahoma; }
08 .toolname { color: #FFFFFF;
09 background-color: #AA0000;
10 cursor: hand; }
11 .helpfile { cursor: help;
12 text-decoration: underline; }
13 </style>
14 </head>
15 <body>
16 <p><span class="toolname" title="HyperText Markup Language 超文本標記語言" lang="en">HTML</span> 和 <span class="toolname" title="Cascading Style Sheet 層疊樣式表" lang="en">CSS</span>都是網頁制作必不可少的工具，詳情請參閱<span class="helpfile" title="點擊查看幫助文件" lang="zh-cn" onclick='javascript:window.open("helpfile.html");'>幫助文件</span>。
17 </body>
18 </html>
文件說明
設計者對“HTML”和“CSS”兩個單詞使用了<span>元素，其中style元素用前景色、背景色和鼠標樣式定義，同時還對於語言編碼、鼠標跟蹤文字提醒進行了lang和title屬性定義。對於“幫助文件”4個字，設計者利用<span>元素的style屬性對它定義了下划線和鼠標樣式，同時也對語言解碼、鼠標跟蹤文字提醒進行了lang和title屬性定義，onclick屬性可以插入腳本，設置用戶鼠標單擊后的瀏覽器動作。
<span>除了進行文本行內定義，還可以對HTML元素和屬性無法定義的地方進行樣式設置。
文件范例
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTMLê?ày</title>
05 <style type="text/css">
06 li { line-height: 3em;
07 font-family: courier new;
08 font-size: 18pt; }
09 .bordered_text { border: solid 1px black;
10 padding: .5em;
11 font-weight: bold; }
12 </style>
13 </head>
14 <body>
15 <ul>
16 <li>13<span class="bordered_text">5</span>79
17 <li>02<span class="bordered_text">4</span>68
18 </ul>
19 </body>
20 </html>
文件說明
利用<span>，可以在任意位置對特定字符進行樣式格式化，即使字符包含在<li>中也一樣。這些功能都是僅靠HTML元素本身屬性無法達到的，而行內樣式元素<span>可以達到這樣的效果。
2、塊級樣式定義<div>元素
<div>屬於塊級樣式定義元素，它的插入會使原有結構產生變化，所有<div>元素都會在新的一行產生一個文檔模型定義容器，等待設計者為它 提供屬性。
基本語法
<div 屬性=“屬性值”></div>
<div>元素的首尾標記必須同時成對出現，且<div>元素允許多重嵌套，也就是說，一個<div>元素中可以嵌套任意多個<div>元素。
文件范例
由於<div>元素是塊級元素，因此可以用CSS的position屬性對其進行相對或者絕對定位，一旦進行了絕對定位，一個<div>矩形區域就可以出現在一個HTML文檔的任何地方。
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTMLê?ày</title>
05 <style type="text/css">
06 body { background-color: black; }
.dig1,.dig2,.dig4,.dig6,.dig7 { background-color: lime; }
.dig3,.dig5 { background-color: #003300; }
07 </style>
08 </head>
09 <body>
10 <div class="dig1" style="position:absolute; left:10; top:10; width:20; height:100;"></div>
11 <div class="dig2" style="position:absolute; left:35; top:10; width:70; height:20;"></div>
12 <div class="dig3" style="position:absolute; left:110; top:10; width:20; height:100;"></div>
14 <div class="dig4" style="position:absolute; left:35; top:102; width:70; height:20;"></div>
15 <div class="dig5" style="position:absolute; left:10; top:115; width:20; height:100;"></div>
16 <div class="dig6" style="position:absolute; left:35; top:195; width:70; height:20;"></div>
17 <div class="dig7" style="position:absolute; left:110; top:115; width:20; height:100;"></div>
18 </body>
19 </html>
文件說明
該文檔沒有使用任何的表格和圖片，但是卻能模擬一個屏幕數字“5”，依靠的就是<div>元素的定位屬性和樣式屬性。一個數字中包含7個矩形塊，利用絕對定位放置在相應位置，然后用背景色屬性模擬發光和變暗的效果。設計者可以修改<style>元素中的類編組，定義哪些塊處於“發光”狀態，哪些塊處於“暗淡”狀態。
如果將這些類編組防入一個腳本中，就可以在頁面上模擬動態計數效果。它的優點非常明顯，設計者在變化數字的時候，無需修改<body>中的具體內容，只要用樣式表歸類不同背景色的<div>塊即可