HTML 段落

2025年6月18日 | 阅读 5 分钟

HTML 段落标签对于网页上文本的组织和呈现是必需的，并且使用 标签定义。它们使开发人员能够将内容分解为有意义的、可读的块，从而增强清晰度和组织性。作为块级元素，段落会自动开始新的一行，并且默认情况下，段落的上方和下方会添加间距。

语法

标签之间的内容，即应视为段落的内容，被包含在 元素中。它是一个成对的标签，意味着它有开始标签 和结束标签 。

注意：如果我们在一个 HTML 文件中使用多个 标签，浏览器会自动在两个段落之间添加一个空白行。

示例

<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>

执行代码

输出

这是第一个段落。

这是第二个段落。

这是第三个段落。

说明

每个段落都从新的一行开始。浏览器会自动在它们之间添加垂直间距，使它们在视觉上有所不同。

HTML 段落内的空格

如果您在 HTML p 标签内输入大量空格，浏览器在显示页面时会删除额外的空格和空行。浏览器将空格和空行的数量算作一个。

示例

<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces                    but            I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>

执行代码

输出

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.
			Look, I put here a lot of spaces but I know, Browser will ignore it.
			You cannot determine the display of HTML
			because resized windows may create different result.

正如您所见，所有额外的空行和不必要的空格都被浏览器删除了。

如何与段落一起使用 和 <hr> 标签？

HTML 标签用于换行，它可以与段落元素一起使用。以下是展示如何与 元素一起使用 的示例。

 标签使用示例

示例

<!DOCTYPE html>
<html>
     <head>
	</head>
  <body>
      <h2> Use of line break with paragraph tag</h2>
          <p><br>Papa and mama, and baby and Dot,
	 <br>Willie and me?the whole of the lot
               <br>Of us all went over in Bimberlie's sleigh,
                 <br>To grandmama's house on Christmas day.
          </p>
   </body>
</html>

执行代码

输出

Use of line breaks with a paragraph tag

Papa and mama, and baby and Dot,  
     Willie and me?the whole of the lot  
               Of us all went over in Bimberlie's sleigh,  
                 To grandmama's house on Christmas day.

HTML <hr> 标签用于在两个语句或两个段落之间应用一条水平线。以下示例展示了如何与段落一起使用 <hr> 标签。

<hr> 标签使用示例

示例

<!DOCTYPE html>
<html>
 <head>
	</head>
 <body>
   <h2> Example to show a horizontal line with paragraphs</h2>
     <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line <hr> it will start a new paragraph.
     </p>
  </body>
</html>

执行代码

输出

Example to show a horizontal line with paragraphs
An HTML hr tag draw a horizontal line and separate two paragraphs with that line.
________________________________________
It will start a new paragraph.

<pre> 预格式化文本标签

我们使用 <pre> 元素来编码多个空格、换行符和其他格式化元素。

示例

<pre>
My TPoint lies over the ocean.
My TPoint lies over the sea.
Oh, bring back my TPoint to me.
</pre>

输出

My TPoint lies over the ocean.
My TPoint lies over the sea.
Oh, bring back my TPoint to me.

说明

<pre> 标签保留文本、空格和换行符的原始布局。它最适合诗歌、代码块或任何需要保持特定格式的内容。

段落对齐（推荐使用 CSS）

文本对齐定义了段落中内容的水平位置。在早期版本的 HTML 中，使用 align 属性，但在现代 HTML 中，它已被 CSS 取代，以提供更大的灵活性并生成更干净的代码。

已弃用的 HTML 方法

早期版本的 HTML 使用 align 属性来指定文本对齐。但在 HTML5 中，它已被弃用。

示例

首选 CSS 方法

段落中文本对齐的现代且推荐的方法是使用内联 CSS。您可以使用 left、right、center 或 justify 值。

示例

在段落中嵌入元素

可以在 HTML 段落中使用内联元素来添加内容。您可以添加格式标签、链接、图片，甚至突出显示某些单词，而不会破坏段落结构。

强调标签

使文本斜体，而 使文本加粗。这些标签以语义方式提供重点或重要性。

示例

链接

段落中的锚点标签 <a> 包含一个可点击的链接。

示例

图像

<img> 标签可用于在段落中内联插入图像。

示例

上标和下标

渲染下标文本（例如，化学式），而 渲染上标文本（例如，指数）。

示例

缩写

<abbr> 标签在悬停时显示完整文本，使缩略语对读者更清晰。

示例

<p><abbr title="HyperText Markup Language">HTML</abbr> is used for web development.</p>

引用

<cite> 标签指示创意作品的标题，通常为斜体。

示例

使用 CSS 样式化段落

CSS（级联样式表）用于管理 HTML 组件的表示。段落可以通过内联样式、内部样式表或外部样式表进行格式化，以获得更具吸引力的外观并确保一致性。

内联样式

将样式直接应用于段落，改变段落的颜色和字体大小。

示例

内部 CSS

在 <head> 中的 <style> 块中使用相同的样式来样式化文档中的所有段落。

示例

<style>
  p {
    font-size: 18px;
    color: navy;
  }
</style>

使用 CSS 类

class 属性使用 CSS 类为特定段落应用自定义样式。

示例

<style>
  .highlight {
    background-color: yellow;
  }
</style>
<p class="highlight">This paragraph is highlighted.</p>

最佳实践

不应将段落嵌套在其他段落中，因为 HTML 不允许一个 标签包含在另一个标签内。段落可以包含文本或内联元素，如 、<a> 或 ，但不能包含块级元素，如 <div> 或 <table>。此外，避免在 标签中包含非文本内容，如图像或表单。而是应使用更合适的语义标签。为了定位和排列，请使用 CSS 而不是已弃用的属性，如 align。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<p>	是的	是的	是的	是的	是的

结论

HTML 标签是用于构建网页文本信息的关键工具。无论是在输入纯文本、插入多媒体还是使用样式时，了解 HTML 中的段落行为都可以使您的内容更有条理、易于阅读且赏心悦目。当与 和 <hr> 等其他标签以及 CSS 样式结合使用时，段落会更强大，可以创建干净专业的网页布局。

下一主题HTML 短语标签

HTML 段落

注意：如果我们在一个 HTML 文件中使用多个 <p> 标签，浏览器会自动在两个段落之间添加一个空白行。

示例

HTML 段落内的空格

示例

如何与段落一起使用 <br> 和 <hr> 标签？

示例

示例

<pre> 预格式化文本标签

段落对齐（推荐使用 CSS）

已弃用的 HTML 方法

首选 CSS 方法

在段落中嵌入元素

强调标签

链接

图像

上标和下标

缩写

使用 CSS 样式化段落

内联样式

内部 CSS

使用 CSS 类

最佳实践

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 段落

注意：如果我们在一个 HTML 文件中使用多个 <p> 标签，浏览器会自动在两个段落之间添加一个空白行。

示例

HTML 段落内的空格

示例

如何与段落一起使用 <br> 和 <hr> 标签？

示例

示例

<pre> 预格式化文本标签

段落对齐（推荐使用 CSS）

已弃用的 HTML 方法

首选 CSS 方法

在段落中嵌入元素

强调标签

链接

图像

上标和下标

缩写

使用 CSS 样式化段落

内联样式

内部 CSS

使用 CSS 类

最佳实践

支持的浏览器

结论

相关帖子

HTML 无序列表

HTML 短语标签

HTML 字符集

HTML 表格

HTML 标题

HTML JavaScript

HTML 文本编辑器

HTML 锚点

HTML 构建块

HTML ID

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器