7.3日音訊,div與span關(guān)聯(lián)和應(yīng)用。在網(wǎng)頁制作中我們經(jīng)常會(huì)用到span與div，雖然用的很多，但是它們之間也有很多小的知識(shí)需要我們來了解，在這里和大家分享一下，在做網(wǎng)站制作div+css開發(fā)的時(shí)候，特別是標(biāo)簽運(yùn)用中DIV和span的區(qū)別及用法都是非常重要的內(nèi)容。
一般來說，它們都是容器，這一點(diǎn)是共同的，但是新手在使用web標(biāo)準(zhǔn)（DIVCSS）開發(fā)網(wǎng)頁的時(shí)候，遇到第一個(gè)問題是DIV與span有什么區(qū)別，什么時(shí)候用DIV，什么時(shí)候用span標(biāo)簽。
以下是在沒有對(duì)開發(fā)網(wǎng)頁頁面設(shè)置CSS樣式時(shí)候情況下，系統(tǒng)默認(rèn)情況下的介紹
DIV與span區(qū)別
DIV占用的位置是一行.
span占用的是內(nèi)容有多寬就占用多寬的空間距離，說明如下圖
分析：從上很容易知道“我是內(nèi)容一；用的DIV”和“我是內(nèi)容二；用的DIV”兩個(gè)內(nèi)容外部用的是<DIV>標(biāo)簽，他們得到樣式是占用了一排空間（相當(dāng)于換行一樣）；而“我是內(nèi)容三；用的span”和“我是內(nèi)容四；用的span”則，文字內(nèi)容有多寬，就占用多寬距離，使用<span>標(biāo)簽和不使用一樣效果。
在網(wǎng)頁開發(fā)的時(shí)候使用DIV和span都可以，通?？梢岳斫鉃闆]有什么區(qū)別。但注意的是DIV占用一行，span不會(huì)占用一行，內(nèi)容占多大寬度，span就有多寬。
DIV內(nèi)的span無需命名CSS選擇器偽類，例子如下
如果DIV的class為yangshi，則對(duì)內(nèi)的span設(shè)置CSS屬性則，代碼如下
.yanshispan{屬性及屬性值}
可以得出span無需再命名偽類名，直接使用CSS繼承屬性來對(duì)span設(shè)置CSS樣式。這里本來DIV內(nèi)的樣式為對(duì)文字設(shè)置藍(lán)色字，但是又通過繼承方式設(shè)置了span的樣式為文字為紅色。
兩者最明顯的區(qū)別在于DIV是塊元素，而SPAN是行內(nèi)元素(也譯作內(nèi)嵌元素)。
詳解：1.所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行，測(cè)試一下下面的代碼你會(huì)有更形象的理解：
測(cè)試<span>緊跟前面的"測(cè)試"顯示</span><div>這里會(huì)另起一行顯示</div>
2.塊元素和行內(nèi)元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉(zhuǎn)化，如：
測(cè)試<divstyle="display:inline">緊跟前面的"測(cè)試"顯示</div><spanstyle="display:block">這里會(huì)另起一行顯示</span>＜span＞SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，＜span＞標(biāo)識(shí)符允許你將一個(gè)段落分成不同的部分。
還有一個(gè)標(biāo)識(shí)符具有類似的功能，＜div＞DIV也被用來在HTML文件中建立邏輯部分。但與＜div＞SPAN不同，＜div＞工作于文本塊一級(jí)，它在它所包含的HTML元素的前面及后面都引入了行分隔。
技巧：有些朋友會(huì)說DIV是層標(biāo)簽，其實(shí)HTML里是沒有層這個(gè)說法的，只不過是為了易于理解，Dreamweaver里才這樣寫的，每個(gè)對(duì)象都可以成為“層”，只需要給對(duì)象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
<imgsrc="demo.gif"style="posibion:absolute;left:20;top:20">
html4規(guī)范的一大突破就是引入了一大空元素<span>和<div>。所謂空元素，就是說如果單獨(dú)在頁面上插入這兩個(gè)元素，不會(huì)對(duì)頁面產(chǎn)生影響，但是這兩個(gè)屬性專門為樣式表定義而生，如果對(duì)<span>和<div>定義樣式表以后，其中內(nèi)容的樣式舊會(huì)隨之變化。
<span>和<div>元素都能處理任意大小的片斷，他們之間的異同可以用一個(gè)例子來說明。
示例如下
01<html>
02<head>
03<metahttp-equiv="Content-Style-Type"content="text/css">
04<title>HTML示例</title>
05<styletype="text/css">
06.myspan1{color:#FFFFFF;background-color:#800000;}
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<spanclass="myspan1">水</span>
19<spanclass="myspan2">維生素</span>
20<spanclass="myspan3">蛋白質(zhì)</span>
21<spanclass="myspan4">礦物質(zhì)</span>
22<hr>
23<divclass="mydiv1">水</div>
24<divclass="mydiv2">維生素</div>
25<divclass="mydiv3">蛋白質(zhì)</div>
26<divclass="mydiv4">礦物質(zhì)</div>
27</body>
28</html>
文件說明
設(shè)計(jì)者在代碼中輸入了4個(gè)單詞，單詞之間沒有換行，也沒有空格。然后為每一個(gè)單詞嵌套上<span></span>和<div></div>元素，兩種元素產(chǎn)生了不同的顯示效果。
<span>元素包含的內(nèi)容，在顯示格式上沒有任何變化，沒有因?yàn)椴迦?lt;span>元素而產(chǎn)生換行或者其他排版效果。這樣的顯示效果稱為“行內(nèi)元素”，設(shè)計(jì)者可以在一段文本中插入任意多對(duì)<span>元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。
<div>元素所包含的內(nèi)容，在格式上有所變化，每一個(gè)<div>元素所包含的內(nèi)容都另起一行，瀏覽器為他們分配了一個(gè)獨(dú)立區(qū)域，形成一個(gè)一個(gè)“塊”，因此<div>也被稱作“塊級(jí)元素”。不過除了這個(gè)區(qū)別，在其他方面<span>和<div>基本相同，它們都可以為其中內(nèi)容添加各種樣式。
正是有了<span>和<div>兩個(gè)元素的出現(xiàn)，使得HTML4的樣式定義變得更為靈活和規(guī)范。
1、行內(nèi)樣式定義<span>元素
<span>屬于行內(nèi)樣式定義元素，它的插入不會(huì)使原有結(jié)構(gòu)產(chǎn)生任何變化，直到設(shè)計(jì)者為它提供了屬性為止。
基本語法
<span屬性=“屬性值></span>
<span>元素的首尾標(biāo)記必須同時(shí)成對(duì)出現(xiàn)，且<span>元素允許多重嵌套，也就是說，一個(gè)<span>元素中可以嵌套任意多個(gè)<span>元素。
文件范例
01<html>
02<head>
03<metahttp-equiv="Content-Style-Type"content="text/css">
04<title>HTML示例</title>
05<styletype="text/css">
06p{line-height:1.5em;
07font-family:Tahoma;}
08.toolname{color:#FFFFFF;
09background-color:#AA0000;
10cursor:hand;}
11.helpfile{cursor:help;
12text-decoration:underline;}
13</style>
14</head>
15<body>
16<p><spanclass="toolname"title="HyperTextMarkupLanguage超文本標(biāo)記語言"lang="en">HTML</span>和<spanclass="toolname"title="CascadingStyleSheet層疊樣式表"lang="en">CSS</span>都是網(wǎng)頁制作必不可少的工具，詳情請(qǐng)參閱<spanclass="helpfile"title="點(diǎn)擊查看幫助文件"lang="zh-cn"onclick='javascript:window.open("helpfile.html");'>幫助文件</span>。
17</body>
18</html>
文件說明
設(shè)計(jì)者對(duì)“HTML”和“CSS”兩個(gè)單詞使用了<span>元素，其中style元素用前景色、背景色和鼠標(biāo)樣式定義，同時(shí)還對(duì)于語言編碼、鼠標(biāo)跟蹤文字提醒進(jìn)行了lang和title屬性定義。對(duì)于“幫助文件”4個(gè)字，設(shè)計(jì)者利用<span>元素的style屬性對(duì)它定義了下劃線和鼠標(biāo)樣式，同時(shí)也對(duì)語言解碼、鼠標(biāo)跟蹤文字提醒進(jìn)行了lang和title屬性定義，onclick屬性可以插入腳本，設(shè)置用戶鼠標(biāo)單擊后的瀏覽器動(dòng)作。
<span>除了進(jìn)行文本行內(nèi)定義，還可以對(duì)HTML元素和屬性無法定義的地方進(jìn)行樣式設(shè)置。
文件范例
01<html>
02<head>
03<metahttp-equiv="Content-Style-Type"content="text/css">
04<title>HTML</title>
05<styletype="text/css">
06li{line-height:3em;
07font-family:couriernew;
08font-size:18pt;}
09.bordered_text{border:solid1pxblack;
10padding:.5em;
11font-weight:bold;}
12</style>
13</head>
14<body>
15<ul>
16<li>13<spanclass="bordered_text">5</span>79
17<li>02<spanclass="bordered_text">4</span>68
18</ul>
19</body>
20</html>
文件說明
利用<span>，可以在任意位置對(duì)特定字符進(jìn)行樣式格式化，即使字符包含在<li>中也一樣。這些功能都是僅靠HTML元素本身屬性無法達(dá)到的，而行內(nèi)樣式元素<span>可以達(dá)到這樣的效果。
2、塊級(jí)樣式定義<div>元素
<div>屬于塊級(jí)樣式定義元素，它的插入會(huì)使原有結(jié)構(gòu)產(chǎn)生變化，所有<div>元素都會(huì)在新的一行產(chǎn)生一個(gè)文檔模型定義容器，等待設(shè)計(jì)者為它提供屬性。
基本語法
<div屬性=“屬性值”></div>
<div>元素的首尾標(biāo)記必須同時(shí)成對(duì)出現(xiàn)，且<div>元素允許多重嵌套，也就是說，一個(gè)<div>元素中可以嵌套任意多個(gè)<div>元素。
文件范例
由于<div>元素是塊級(jí)元素，因此可以用CSS的position屬性對(duì)其進(jìn)行相對(duì)或者絕對(duì)定位，一旦進(jìn)行了絕對(duì)定位，一個(gè)<div>矩形區(qū)域就可以出現(xiàn)在一個(gè)HTML文檔的任何地方。
01<html>
02<head>
03<metahttp-equiv="Content-Style-Type"content="text/css">
04<title>HTML</title>
05<styletype="text/css">
06body{background-color:black;}
.dig1,.dig2,.dig4,.dig6,.dig7{background-color:lime;}
.dig3,.dig5{background-color:#003300;}
07</style>
08</head>
09<body>
10<divclass="dig1"style="position:absolute;left:10;top:10;width:20;height:100;"></div>
11<divclass="dig2"style="position:absolute;left:35;top:10;width:70;height:20;"></div>
12<divclass="dig3"style="position:absolute;left:110;top:10;width:20;height:100;"></div>
14<divclass="dig4"style="position:absolute;left:35;top:102;width:70;height:20;"></div>
15<divclass="dig5"style="position:absolute;left:10;top:115;width:20;height:100;"></div>
16<divclass="dig6"style="position:absolute;left:35;top:195;width:70;height:20;"></div>
17<divclass="dig7"style="position:absolute;left:110;top:115;width:20;height:100;"></div>
18</body>
19</html>
該文檔沒有使用任何的表格和圖片，但是卻能模擬一個(gè)屏幕數(shù)字“5”，依靠的就是<div>元素的定位屬性和樣式屬性。一個(gè)數(shù)字中包含7個(gè)矩形塊，利用絕對(duì)定位放置在相應(yīng)位置，然后用背景色屬性模擬發(fā)光和變暗的效果。設(shè)計(jì)者可以修改<style>元素中的類編組，定義哪些塊處于“發(fā)光”狀態(tài)，哪些塊處于“暗淡”狀態(tài)。
如果將這些類編組防入一個(gè)腳本中，就可以在頁面上模擬動(dòng)態(tài)計(jì)數(shù)效果。它的優(yōu)點(diǎn)非常明顯，設(shè)計(jì)者在變化數(shù)字的時(shí)候，無需修改<body>中的具體內(nèi)容，只要用樣式表歸類不同背景色的<div>塊即可。
