認(rèn)識(shí)自定義文本內(nèi)容標(biāo)簽 span 標(biāo)簽

我們?cè)谏弦徽鹿?jié)已經(jīng)學(xué)過(guò)了段落標(biāo)簽 P 標(biāo)簽，而且我們也學(xué)習(xí)了 P 標(biāo)簽是可以嵌套其他標(biāo)簽的。當(dāng)我們定義的段落里，有一些文字或者一句話有單獨(dú)的樣式時(shí)，則我們需要單獨(dú)的處理這些內(nèi)容，最好的方式則是用 span 標(biāo)簽將這些內(nèi)容包裹起來(lái)。例如：

1. SPAN 標(biāo)簽的作用

span 標(biāo)簽用來(lái)定義文本內(nèi)容，可以是單獨(dú)的一句話，一些內(nèi)容，也可以是段落里面的內(nèi)容。如果不對(duì) span 應(yīng)用樣式，那么 span 元素中的文本與其他文本不會(huì)任何視覺(jué)上的差異。盡管如此，上例中的 span 元素仍然為 p 元素增加了額外的結(jié)構(gòu)。span 標(biāo)簽是不帶任何默認(rèn)樣式的，所以它極大的提高了我們可以對(duì)文本內(nèi)容自定義樣式的需求。

2. SPAN 標(biāo)簽的用法

span 標(biāo)簽為雙標(biāo)簽，所以必須有首尾標(biāo)簽。文本的內(nèi)容既為 span 標(biāo)簽的內(nèi)容。例如：

<span>
  我是一個(gè)文本內(nèi)容
</span>

SPAN 標(biāo)簽沒(méi)有默認(rèn)樣式，所以上述內(nèi)容會(huì)在頁(yè)面上呈現(xiàn)以下效果：

3 .SPAN 標(biāo)簽的特點(diǎn)

1. span 標(biāo)簽為行內(nèi)元素，行內(nèi)元素和塊級(jí)元素（p標(biāo)簽）不同，默認(rèn)是在同一排排列，如我們寫(xiě)兩個(gè) span 標(biāo)簽，會(huì)呈現(xiàn)以下效果：

2. span 不能使用 CSS 為其設(shè)置寬高，即使設(shè)置了寬高也會(huì)無(wú)效。

3. span 標(biāo)簽里也可以嵌套其他標(biāo)簽。例如：

  <span>
    <p>
      我是span標(biāo)簽里的p標(biāo)簽    
    </p>
  </span>

4. span 標(biāo)簽的應(yīng)用場(chǎng)景多數(shù)為為某些內(nèi)容單獨(dú)設(shè)置樣式，我們可以用 span 標(biāo)簽將這些包裹起來(lái)，這樣既單獨(dú)設(shè)置了樣式，也不會(huì)影響其他內(nèi)容。當(dāng)然，如果你想內(nèi)容在同一排排列，也可以使用 span 標(biāo)簽包裹這些內(nèi)容。

4. 經(jīng)驗(yàn)分享

1. 如果我們這樣書(shū)寫(xiě)代碼，每段代碼都換行，例如：

   我是其他內(nèi)容
  <span>我是第一個(gè)span標(biāo)簽</span>
  <span>我是第一個(gè)span標(biāo)簽</span>

那么兩個(gè) span 標(biāo)簽之間左右會(huì)有間距，如下圖所示：

如何解決這個(gè)問(wèn)題呢，我們只需要講所有代碼寫(xiě)在同一行即可，如：

我是其他內(nèi)容<span>我是第一個(gè)span標(biāo)簽</span><span>我是第二個(gè)span標(biāo)簽</span>

那么問(wèn)題就解決了，如下圖所示：

2. span 標(biāo)簽為行內(nèi)元素，不能對(duì)其設(shè)置寬高屬性，如果既想保持行內(nèi)元素在同一行排列的特性，又想為其設(shè)置寬高，我們可以利用 CSS 的 display 屬性將其設(shè)置為行內(nèi)塊元素即可。

5. 真實(shí)案例分享

慕課手記技術(shù)文章。

前端開(kāi)發(fā)規(guī)范（節(jié)選）：

<p>
	<span>關(guān)注</span>
</p>
									
<div>
  <span> JAVA開(kāi)發(fā)工程師 </span>
</div>
<div>
	<a>
		<span></span> 篇手記
	</a>
	<a>
		貢獻(xiàn) <span></span> 字
	</a>
</div>

新浪新聞：

<div>
	 <span >2020年06月14日 13:00</span>
</div>
<div>
	<span> 縮小字體 </span>
	<span> 放大字體 </span>
	<span> 收藏 </span>
	<span> 微博 </span>
	<span> 微信 </span>
	<span> 分享 </span>
	<span >0 </span>
<div>
	<span> 騰訊QQ </span>
	<span> QQ空間 </span>
</div>

6. 小結(jié)

1. span 標(biāo)簽為雙標(biāo)簽，它總是成對(duì)出現(xiàn)的，需要首尾標(biāo)簽；

2. span 用于對(duì)文檔中的行內(nèi)元素進(jìn)行組合；

3. span 標(biāo)簽沒(méi)有固定的格式表現(xiàn)。當(dāng)對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺(jué)上的變化。如果不對(duì) SPAN 應(yīng)用樣式，那么 SPAN 元素中的文本與其他文本不會(huì)任何視覺(jué)上的差異；

4. span 標(biāo)簽提供了一種將文本的一部分或者文檔的一部分獨(dú)立出來(lái)的方式；

5. span 標(biāo)簽不會(huì)自動(dòng)換行，他們會(huì)在同一行顯示，但是左右會(huì)有間隙。如想解決此問(wèn)題，把代碼書(shū)寫(xiě)在一行即可。