HTML - 标签

HTML  标签用于创建段落上下文。p 标签会在 p 元素前后生成一个空行。 元素是块级元素，这意味着如果在结束标签 之前解析了另一个块级元素，它将自动关闭。

从技术上讲，关闭标签是可选的，但为了确保文档有效，最好包含结束标签。 标签也支持全局属性和事件属性。

语法

<p>…content</p>

属性

HTML p 标签支持 HTML 的全局和事件属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML p 标签示例

在这里，我们将看到 p 标签的多个示例。例如，如果要以段落形式编写任何内容的介绍或功能，则可以使用 标签。

定义段落元素

在下面的示例中，我们创建了一个 HTML 文档，演示了 标签的工作原理。

Open Compiler

<!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 属性。

Open Compiler

<!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>

在段落元素上添加背景颜色

让我们看看另一个场景，我们将向段落文本应用背景颜色。

Open Compiler

<!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 属性来对齐段落文本。

Open Compiler

<!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。

Open Compiler

<!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>