DIV與SPAN之間有什麼區別

資料一：

DIV 和 SPAN 元素最大的特點是默認都沒有對元素內的對象進行任何格式化渲染。主要應用於樣式表（共同點）。

兩者最明顯的區別在於DIV是塊元素，而SPAN是行內元素(也譯作內嵌元素)。

詳解：1.所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行：

<html> 
<body> 
測試    <span>緊跟前面的"測試"顯示</span><div>這裏會另起一行顯示</div> 
</body> 
</html>

運行結果：

2.塊元素和行內元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉化，如：

<html> 
<!--塊元素和行內元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉化--> 
<body> 
測試<div style="display:inline">緊跟前面的"測試"顯示</div><span style="display:block">這裏會另起一行顯示</span> 
</body> 
</html>

運行結果：

下面是另一個例子：

<html> 
<body> 
<div>div1</div><div>div2</div> 
<span>span1</span><span>span2</span> 
<hr> 
<div style="display:inline">div3</div> 
<div style="display:inline">div4</div> 
<span style="display:block">span3</span> 
<span style="display:block">span4</span> 
</body> 
</html>

運行結果：

資料二：

span標記有一個重要而實用的特性，即它什麼事也不會做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以爲它們指定樣式了。

　　還有一個標識符具有類似的功能，div也被用來在HTML文件中建立邏輯部分。但與span不同，div工作於文本塊一級，它在它所包含的HTML元素的前面及後面都引入了行分隔。

技巧：有些朋友會說DIV是層標籤，其實HTML裏是沒有層這個說法的，只不過是爲了易於理解，Dreamweaver裏才這樣寫的，每個對象都可以成爲“層”，只需要給對象定義position屬性(值爲absolute或relavite)。例如，要讓圖片成爲“層”，可以這樣寫代碼：

<img src="mai.gif" style="position:absolute;left:20;top:200">

資料三：

html4規範的一大突破就是引入了空元素span和div。所謂空元素，就是說如果單獨在頁面上插入這兩個元素，不會對頁面產生影響，但是這兩個屬性專門爲樣式表定義而生，如果對span和div定義樣式表以後，其中內容會依樣式隨之變化。

span和div元素都能處理任意大小的片斷，他們之間的異同可以用一個例子來說明。

示例如下

<html> 
<head> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>HTML示例</title> 
<style type="text/css"> 
.myspan1 { color: #FFFFFF; background-color: #800000; } 
.myspan2 { color: #000000; background-color: #CCFFCC; } 
.myspan3 { color: #FFFFFF; background-color: #000080; } 
.myspan4 { color: #000000; background-color: #FFCCCC; } 
.mydiv1 { color: #FFFFFF; background-color: #008000; } 
.mydiv2 { color: #000000; background-color: #CCCCFF; } 
.mydiv3 { color: #FFFFFF; background-color: #000000; } 
.mydiv4 { color: #000000; background-color: #FFFFAA; } 
</style> 
</head> 
<body> 
<h2>生命必須元素</h2> 
        <span class="myspan1">水</span> 
        <span class="myspan2">維生素</span> 
        <span class="myspan3">蛋白質</span> 
        <span class="myspan4">礦物質</span> 
        <hr> 
        <div class="mydiv1">水</div> 
        <div class="mydiv2">維生素</div> 
        <div class="mydiv3">蛋白質</div> 
        <div class="mydiv4">礦物質</div>  
</body> 
</html>

運行結果如下：

文件說明

設計者在代碼中輸入了4個單詞，單詞之間沒有換行，也沒有空格。然後爲每一個單詞嵌套上<span></span>和<div></div>元素，兩種元素產生了不同的顯示效果。

<span>元素包含的內容，在顯示格式上沒有任何變化，沒有因爲插入<span>元素而產生換行或者其他排版效果。這樣的顯示效果稱爲“行內元素”，設計者可以在一段文本中插入任意多對<span>元素，然後添加字體、顏色、背景、邊框和邊距等各種格式。

<div>元素所包含的內容，在格式上有所變化，每一個<div>元素所包含的內容都另起一行，瀏覽器爲他們分配了一個獨立區域，形成一個一個“塊”，因此<div>也被稱作“塊級元素”。不過除了這個區別，在其他方面<span> 和<div>基本相同，它們都可以爲其中內容添加各種樣式。

正是有了<span>和<div>兩個元素的出現，使得HTML4的樣式定義變得更爲靈活和規範。

1、行內樣式定義<span>元素

<span>屬於行內樣式定義元素，它的插入不會使原有結構產生任何變化，直到設計者爲它提供了屬性爲止。

基本語法

<span>元素的首尾標記必須同時成對出現，且<span>元素允許多重嵌套，也就是說，一個<span>元素中可以嵌套任意多個<span>元素。

文件範例

<html> 
<head> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>HTML示例</title> 
<style type="text/css"> 
p { line-height: 1.5em; 
font-family: Tahoma; } 
.toolname { color: #FFFFFF; 
background-color: #AA0000; 
cursor: hand; } 
.helpfile { cursor: help; 
text-decoration: underline; } 
</style> 
</head> 
<body> 
<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>。 
</body> 
</html>

運行結果如下：

文件說明

設計者對“HTML”和“CSS”兩個單詞使用了<span>元素，其中style元素用前景色、背景色和鼠標樣式定義，同時還對於語言編碼、鼠標跟蹤文字提醒進行了lang和title屬性定義。對於“幫助文件”4個字，設計者利用<span>元素的style屬性對它定義了下劃線和鼠標樣式，同時也對語言解碼、鼠標跟蹤文字提醒進行了lang和title屬性定義，onclick屬性可以插入腳本，設置用戶鼠標單擊後的瀏覽器動作。

<span>除了進行文本行內定義，還可以對HTML元素和屬性無法定義的地方進行樣式設置。

文件範例

<html> 
<head> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>HTMLê?ày</title> 
<style type="text/css"> 
li {  
    line-height: 3em; 
    font-family: courier new; 
    font-size: 18pt;  
    } 
.bordered_text {  
    border: solid 1px black; 
    padding: .5em; 
    font-weight: bold;  
} 
</style> 
</head> 
<body> 
    <ul> 
    <li>13<span class="bordered_text">5</span>79 
    <li>02<span class="bordered_text">4</span>68 
    </ul> 
</body> 
</html>

運行結果：

文件說明

利用<span>，可以在任意位置對特定字符進行樣式格式化，即使字符包含在<li>中也一樣。這些功能都是僅靠HTML元素本身屬性無法達到的，而行內樣式元素<span>可以達到這樣的效果。

2、塊級樣式定義<div>元素

<div>屬於塊級樣式定義元素，它的插入會使原有結構產生變化，所有<div>元素都會在新的一行產生一個文檔模型定義容器，等待設計者爲它提供屬性。

基本語法

<div>元素的首尾標記必須同時成對出現，且<div>元素允許多重嵌套，也就是說，一個<div>元素中可以嵌套任意多個<div>元素。

文件範例

由於<div>元素是塊級元素，因此可以用CSS的position屬性對其進行相對或者絕對定位，一旦進行了絕對定位，一個<div>矩形區域就可以出現在一個HTML文檔的任何地方。

<html> 
<head> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>HTMLê?ày</title> 
<style type="text/css"> 
body { background-color: black; } 
.dig1,.dig2,.dig4,.dig6,.dig7 { background-color: lime; } 
.dig3,.dig5 { background-color: #003300; } 
</style> 
</head> 
<body> 
    <div class="dig1" style="position:absolute; left:10; top:10; width:20; height:100;">1</div> 
    <div class="dig2" style="position:absolute; left:35; top:10; width:70; height:20;">2</div> 
    <div class="dig3" style="position:absolute; left:110; top:10; width:20; height:100;">3</div> 
    <div class="dig4" style="position:absolute; left:35; top:102; width:70; height:20;">4</div> 
    <div class="dig5" style="position:absolute; left:10; top:115; width:20; height:100;">5</div> 
    <div class="dig6" style="position:absolute; left:35; top:195; width:70; height:20;">6</div> 
    <div class="dig7" style="position:absolute; left:110; top:115; width:20; height:100;">7</div> 
</body> 
</html>

運行結果：

文件說明

該文檔沒有使用任何的表格和圖片，但是卻能模擬一個屏幕數字“5”，依靠的就是<div>元素的定位屬性和樣式屬性。一個數字中包含7個矩形塊，利用絕對定位放置在相應位置，然後用背景色屬性模擬發光和變暗的效果。設計者可以修改<style>元素中的類編組，定義哪些塊處於“發光”狀態，哪些塊處於“暗淡”狀態。

如果將這些類編組防入一個腳本中，就可以在頁面上模擬動態計數效果。它的優點非常明顯，設計者在變化數字的時候，無需修改<body>中的具體內容，只要用樣式表歸類不同背景色的<div>塊即可。

1111111111

DIV與SPAN之間有什麼區別

mybatis xml使用不存在的類

DIV與SPAN之間有什麼區別

我的友情鏈接

[05]EXTJS4.0的讀寫器reader,writer

End-to-End Binary SOAP Attachment 2: Creating the Web Service

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結