如何在 HTML 中添加段落?

htmlweb developmentfront end technology更新于 2026/1/16 2:20:17

要在 HTML 中定义段落，我们使用 <p> 标签。一段文本代表一个段落，它总是从新行开始。浏览器会自动在段落前后添加空格。

语法

要在 HTML 中表示段落，请使用以下语法 −

<p>这是一个段落</p>

段落由开始和结束 <p> 标签组成。

示例

以下示例如何在 HTML 中添加段落 −

<!DOCTYPE html>
<html>
<body>
   <h1>How to represent paragraph tag</h1>
   <p>This is a first paragraph.</p>
   <p>This is a second paragraph.</p>
   <p>This is a third paragraph.</p>
</body>
</html>

在屏幕上显示段落

目前尚不确定 HTML 如何在屏幕上显示段落，因为根据屏幕尺寸和调整后的窗口大小，结果会有所不同。

我们无法通过在 HTML 代码中添加额外的空格来更改文本的显示。浏览器会在每次显示页面时自动删除任何多余的空格和行。

示例

请参考以下示例，了解 <p> 标签如何在屏幕上显示不同的文本排列方式。 −

<!DOCTYPE html>
<html>
<body>
   <h2>Different variations on Displaying Paragraph</h2>
   <p>The statement that i had written contains a lot of lines, but the browser ignores it. </p>
   <p>The text that i had written contains a lot of spaces but the browser ignores it. </p>
   <p>The number of lines in a statement depends on the size of window. If i resize that window, the number of lines automatically changes and fit into the screen. </p>
</body>
</html>

示例

假设，我们想在 HTML 中用水平线分隔多个段落，可以使用 <hr> 标签。该标签用于在 HTML 页面中用水平线分隔内容。以下是在段落中使用 <hr> 标签的示例。

<!DOCTYPE html>
<html>
<body>
   <h1>Heading1 HTML Tutorial</h1>
   <p>Learn basics in HTML</p>
   <hr>
   <h2>Heading 2 CSS Tutorial</h2>
   <p>Learn all Style tags in CSS</p>
   <hr>
   <h3>Heading 3 JavaScript</h3>
   <p>Learn validation techniques</p>
</body>
</html>

<p> 标签的 CSS 设置

现在让我们看看如何使用 CSS 将样式应用于 HTML 中的段落。

示例

以下示例在 HTML 中添加了一个段落，并使用 CSS 属性对其进行样式设置 –

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         display: block;
         margin-top: 1em;
         margin-bottom: 1em;
         margin-left: 0;
         margin-right: 0;
         color: navy;
         text-indent: 30px;
         text-transform: uppercase;
      }

      h1 {
         color: red;
      }

      h2 {
         color: green;
      }

      h3 {
         color: blue;
      }
   </style>
</head>
<body>
   <h1>Heading1 HTML Tutorial</h1>
   <p>Learn basics in HTML</p>
   <hr>
   <h2>Heading 2 CSS Tutorial</h2>
   <p>Learn all Style tags in CSS</p>
   <hr>
   <h3>Heading 3 JavaScript</h3>
   <p>Learn validation techniques</p>
</body>
</html>