HTML 的文字除了可以使用段落元素 <p> 來表示，也可以使用「行內容器」來處理，通常使用 <span> 元素會搭配 <div> 或 <p> 一起使用，主要會作為 CSS 或 JavaScript 進行互動操作，這篇教學會介紹 <span> 行內容器元素。

原文參考：行內容器 span

認識 <span>

HTML 的行內容器元素是 <span> 標籤所構成的元素，主要用來包裹部份文字，方便使用 CSS 或 JavaScript 控制樣式或進行互動。

• <span> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <span> 的顯示類型為「inline 行內元素」，預設不會自動換行。

例如下方的 HTML 開啟後，會以 <span> 將文字分隔成三組內容 ( 外觀上看不出來 )。

<p>
  <span>床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。</span>
  <span>春眠不覺曉，處處聞啼鳥，夜來風雨聲，花落知多少。</span>
  <span>千山鳥飛絕，萬徑人蹤滅，孤舟蓑笠翁，獨釣寒江雪。</span>
</p>

<span> 支援屬性

<span> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會分別將三個 <span> 加入不同的 style 屬性，讓三組文字呈現不同顏色。

<p>
  <span style="color:#f00;">床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。</span>
  <span style="color:#f90;">春眠不覺曉，處處聞啼鳥，夜來風雨聲，花落知多少。</span>
  <span style="color:#00f;">千山鳥飛絕，萬徑人蹤滅，孤舟蓑笠翁，獨釣寒江雪。</span>
</p>

<span> 預設樣式

<span> 沒有預設樣式，內容文字的樣式沿用父元素的樣式，或可透過 CSS 進行設定。

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學