雖然在 HTML 的裡直接輸入文字，文字也會正常顯示，但通常會使用 <p> 包覆需要分段的文字內容，如此一來不僅能讓 HTML 的架構更為明確，調整樣式時也不會與其他元素互相影響，這篇文章將會介紹 <p> 段落元素的用法。

原文參考：段落 p

認識 <p>

HTML 的段落元素是 <p> 標籤所構成的元素，主要用來裝載文字段落 ( paragraph )，雖然 <div> 或 <span> 等元素也常拿來放入文字，但如果是針對以「文章內容」為主的網頁，仍然建議以 <p> 標籤來作為段落使用。

• <p> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <p> 的顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，會以 <p> 分隔三段文字。

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

<p> 支援屬性

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

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

<p> 預設樣式

下方是 <p> 的預設樣式：

p {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
}

更多教學

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

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