認識自定義文本內容標簽 span 標簽

我們在上一章節已經學過了段落標簽 P 標簽，而且我們也學習了 P 標簽是可以嵌套其他標簽的。當我們定義的段落里，有一些文字或者一句話有單獨的樣式時，則我們需要單獨的處理這些內容，最好的方式則是用 span 標簽將這些內容包裹起來。例如：

1. SPAN 標簽的作用

span 標簽用來定義文本內容，可以是單獨的一句話，一些內容，也可以是段落里面的內容。如果不對 span 應用樣式，那么 span 元素中的文本與其他文本不會任何視覺上的差異。盡管如此，上例中的 span 元素仍然為 p 元素增加了額外的結構。span 標簽是不帶任何默認樣式的，所以它極大的提高了我們可以對文本內容自定義樣式的需求。

2. SPAN 標簽的用法

span 標簽為雙標簽，所以必須有首尾標簽。文本的內容既為 span 標簽的內容。例如：

<span>
  我是一個文本內容
</span>

SPAN 標簽沒有默認樣式，所以上述內容會在頁面上呈現以下效果：

3 .SPAN 標簽的特點

1. span 標簽為行內元素，行內元素和塊級元素（p標簽）不同，默認是在同一排排列，如我們寫兩個 span 標簽，會呈現以下效果：

2. span 不能使用 CSS 為其設置寬高，即使設置了寬高也會無效。

3. span 標簽里也可以嵌套其他標簽。例如：

  <span>
    <p>
      我是span標簽里的p標簽    
    </p>
  </span>

4. span 標簽的應用場景多數為為某些內容單獨設置樣式，我們可以用 span 標簽將這些包裹起來，這樣既單獨設置了樣式，也不會影響其他內容。當然，如果你想內容在同一排排列，也可以使用 span 標簽包裹這些內容。

4. 經驗分享

1. 如果我們這樣書寫代碼，每段代碼都換行，例如：

   我是其他內容
  <span>我是第一個span標簽</span>
  <span>我是第一個span標簽</span>

那么兩個 span 標簽之間左右會有間距，如下圖所示：

如何解決這個問題呢，我們只需要講所有代碼寫在同一行即可，如：

我是其他內容<span>我是第一個span標簽</span><span>我是第二個span標簽</span>

那么問題就解決了，如下圖所示：

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

5. 真實案例分享

慕課手記技術文章。

前端開發規范（節選）：

<p>
	<span>關注</span>
</p>
									
<div>
  <span> JAVA開發工程師 </span>
</div>
<div>
	<a>
		<span></span> 篇手記
	</a>
	<a>
		貢獻 <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. 小結

1. span 標簽為雙標簽，它總是成對出現的，需要首尾標簽；

2. span 用于對文檔中的行內元素進行組合；

3. span 標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 SPAN 應用樣式，那么 SPAN 元素中的文本與其他文本不會任何視覺上的差異；

4. span 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式；

5. span 標簽不會自動換行，他們會在同一行顯示，但是左右會有間隙。如想解決此問題，把代碼書寫在一行即可。