HTML - 段落

上一頁
下一頁

HTML 段落是塊級元素，用於在網頁上組織和格式化文字內容。段落基本上是一組單詞和標點符號的集合。它允許我們以連貫且易讀的方式組織和呈現文字資訊。 HTML <p> 標籤 用於建立段落元素。

使用段落的原因

段落通常會在文字的上方和下方建立空格，將其與周圍的內容隔開。它們可以使用 CSS 進行樣式設定，以控制字型大小、顏色、對齊方式和間距等方面。在 Web 開發中，段落在有效傳達資訊、實現清晰的溝通以及增強網站的整體使用者體驗方面發揮著至關重要的作用。

建立段落

要在 HTML 中建立段落，請使用 <p> 標籤。將要在網頁上顯示為段落的文字放置在 <p> 和 </p> 之間。

以下是 HTML 中建立段落的語法

<p>Text to display as a paragraph on the webpage</p>

HTML 段落示例

在以下示例中，我們建立了兩個段落

建立兩個段落

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Proin eros habitant accumsan vulputate curae eu fusce vehicula.</p>
    <p>Laoreet sociosqu taciti iaculis cras leo nec litora. Nisi vehicula massa fusce justo libero duis. Per condimentum vivamus nec elementum nullam sociosqu vel scelerisque.</p>
  </body>
</html>

使用段落進行換行

<br> 標籤 用於在段落中插入換行符以控制文字佈局。

示例
<!DOCTYPE html>
<html>
<head>
   <title>Line Breaks With Paragraphs</title>
</head>
<body>
   <p>This is a paragraph with a <br> line break. </p>
</body>
</html>

標題與段落

標題，例如 <h1>，提供分層結構，可以與段落一起使用。

<!DOCTYPE html>
<html>
<head>
   <title>Headings With Paragraphs</title>
</head>
<body>
   <h1>Main Heading</h1>
   <p> This is a paragraph beneath the main heading. </p>
</body>
</html>

列表與段落

列表 可以合併到段落中以組織內容。

<!DOCTYPE html>
<html>
<head>
   <title>Lists With Paragraphs</title>
</head>
<body>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
   </ul>
   <p> This is a paragraph following an unordered list. </p>
</body>
</html>

段落中的強調

標籤如 <em> 和 <strong> 允許您強調段落中的文字。

<!DOCTYPE html>
<html>
<head>
   <title>Emphasis Within Paragraphs</title>
</head>
<body>
   <p> This is a <em> paragraph </em> with <strong> emphasized </strong> text. </p>
</body>
</html>

段落中的連結

您可以使用 <a> 標籤 在段落中插入 連結。

<html>
<head>
   <title>Links within Paragraphs</title>
</head>
<body>
   <p>Visit our website <a href="https://tutorialspoint.tw">here </a>. </p>
</body>
</html>

段落中的內聯樣式

您可以使用 <span> 標籤 和內聯樣式應用特定的格式。

<html>
<head>
   <title>Inline Styles Within Paragraphs</title>
</head>
<body>
   <p>This is a <span style="color: blue;">blue</span> text within a paragraph. </p>
</body>
</html>

段落中的影像

您可以使用 <img> 標籤 在段落中嵌入影像。

<html>
<head>
     <title>Images Within Paragraphs</title>
</head>
<body>
   <p> Here's an image: <img src="\html\images\test.png" alt="Example Image"> </p>
</body>
</html>

段落中的上標和下標

使用 <sup> 和 <sub> 標籤建立上標和下標文字。

<html>
<head>
   <title>Superscript and Subscript Within Paragraphs</title>
</head>
<body>
   <p> H<sub>2</sub>O is the chemical formula for water. 2<sup>3</sup> equals 8.</p>
</body>
</html>

段落中的縮寫

<abbr> 標籤 有助於定義縮寫或首字母縮略詞。

<html>
<head>
   <title>Abbreviations within Paragraphs</title>
</head>
<body>
   <p> <abbr title="Hypertext Markup Language">HTML</abbr> is used for web development.</p>
</body>
</html>

段落中的引用

<cite> 標籤 指定段落中的引用和參考文獻。

<html>
<head>
   <title>Citations Within Paragraphs</title>
</head>
<body>
   <p> The book <cite>War and Peace </cite> is a classic novel. </p>
</body>
</html>

使用 CSS 樣式化段落

以下是樣式化 HTML 段落的不同方法

1. 將 CSS 直接應用於段落

您可以透過使用 'style' 屬性 和 <p> 標籤編寫內聯 CSS 來將 CSS 樣式直接應用於段落。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p style="font-size: 24px; color: #f40;">This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <p style="font-size: 24px; background-color: #f40; color: #fff;">This is the third paragraph.</p>
  </body>
</html>

2. 將 CSS 應用於 'p' 元素

您可以透過為 <p> 標籤編寫 CSS 規則，將 CSS 樣式應用於 HTML 文件中的所有段落。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 22px;
        color: #f40;
      }
    </style>
  </head>
  <body>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <p>This is the third paragraph.</p>
  </body>
</html>

3. 使用 CSS 類與不同的段落

您可以透過建立一個 CSS 類並將其與不同的段落一起使用，將 CSS 樣式應用於特定的段落。為此，請使用 'class' 屬性 和 <p> 標籤。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .special {
        font-size: 24px;
        color: #f40;
      }
    </style>
  </head>
  <body>
    <p class="special">This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <p class="special">This is the third paragraph.</p>
  </body>
</html>

CSS 提供了對段落樣式的廣泛控制，使您能夠在網頁上建立視覺上吸引人且格式良好的文字。

列印頁面
上一頁
下一頁
廣告