HTML - 標籤

HTML  標籤用於建立段落上下文。p 標籤會在 p 元素前後生成一個空行。 元素是塊級元素，這意味著如果在結束標籤 之前解析了另一個塊級元素，它將自動關閉。

從技術上講，關閉標籤是可選的，但為了確保文件有效，最好包含結束標籤。 標籤也支援全域性屬性和事件屬性。

語法

<p>…content</p>

屬性

HTML p 標籤支援 HTML 的全域性和事件屬性。

HTML p 標籤示例

在這裡，我們將看到 p 標籤的多個示例。例如，如果要以段落形式編寫任何內容的介紹或功能，則可以使用 標籤。

定義段落元素

在下面的示例中，我們建立了一個 HTML 文件，演示了 標籤的工作原理。

<!DOCTYPE html>
<html>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards.
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

在段落元素上應用樣式

考慮下面的示例，我們將向段落文字新增 CSS 屬性。

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: red;
         Border: 1px solid red;
      }
   </style>
</head>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards.
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

在段落元素上新增背景顏色

讓我們看看另一個場景，我們將向段落文字應用背景顏色。

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: green;
         Border: 1px solid red;
         background-color: gray;
      }
   </style>
</head>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards.
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

對齊段落元素

在這裡，我們將使用 align 屬性來對齊段落文字。

<!DOCTYPE html>
<html>
<body>
   <p align="center">
      Geckos are a group of usually small, usually nocturnal lizards. 
      They are found on every continent except Antarctica. 
   </p>
   <p align="right">
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
   <p align="left">
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

瀏覽器對段落元素的預設 CSS

所有元素都帶有一些內建樣式，在這個例子中，您將看到 p 標籤的預設 CSS。

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
          display: block;
          margin-block-start: 1em;
          margin-block-end: 1em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
      }
   <style>
</head>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards. 
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>