主题
  • 默认模式
  • 浅蓝色模式
  • 淡红色模式
  • 深夜模式

什么是 HTML 段落?

HTML 段落是 HTML 页面的重要组成部分,通过将文本分割成逻辑段落,能提升页面内容的条理性与可读性。

在 HTML 里,我们使用<p>标签来定义一个段落。


HTML 段落创建

HTML 段落是由<p>开始标签,段落内容,</p> 结束标签组成。

开始标签
段落内容
结束标签
<p>
这是一个段落
<p>

注意:按照 HTML 标准,段落元素(<p>)不应该嵌套另一个段落元素。

1. 要创建一个段落,非常简单。只需依次使用<p>标签包裹文本即可。比如:

实例代码 运行代码
复制
<p>这是一个简单的段落</p>

2. 如果有多个段落,只需依次使用<p>标签包裹每个段落的文本即可。比如:

实例代码 运行代码
复制
<p>第一段内容。这一段可以描述一些基本信息。</p>
<p>第二段内容。它可以接着第一段继续阐述相关主题。</p>

HTML 段落属性

在 HTML 语言体系里,段落属性大致可归为三类:已废弃属性、全局属性以及 ARIA 属性 。

1. 已废弃的属性

这些属性在 HTML5 之前被广泛使用,但在 HTML5 标准中已被废弃,建议使用 CSS 来替代它们实现相同的效果。

align属性

  • align作用:设置段落的水平对齐方式。
  • align属性值:left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)。
实例代码 运行代码
复制
<p align="center">这是一个居中对齐的段落。</p>

dir属性

  • dir作用:设置段落中文本的书写方向。
  • dir属性值:ltr(从左到右,默认值)、rtl(从右到左)。
实例代码 运行代码
复制
<p dir="rtl">这是一个从右到左书写方向的段落。</p>

lang属性

  • lang作用:设置段落中文本的语言。这有助于屏幕阅读器等辅助设备了解文本的语言,从而提供更准确的发音等功能。
  • lang属性值:语言代码,例如 zh(中文)、en(英文)、fr(法文)等。
实例代码 运行代码
复制
<p lang="en">This is an English paragraph.</p>

2. 全局变量

<p>标签支持 HTML 的所有全局属性,这些属性可以用于任何 HTML 元素。

id为段落元素指定一个唯一的标识符,常用于通过 JavaScript 操作元素或在 CSS 中为特定元素应用样式。

实例代码 运行代码
复制
<p id="uniqueParagraph">这是一个具有唯一 ID 的段落。</p>

class为段落元素指定一个或多个类名,用于通过 CSS 为一组元素应用相同的样式,或者通过 JavaScript 选择元素。

实例代码 运行代码
复制
<p class="highlighted">这是一个应用了 'highlighted' 类的段落。</p>

style为段落元素直接添加内联样式,用于设置元素的外观,如颜色、字体大小、对齐方式等。

实例代码 运行代码
复制
<p style="color: blue; font-size: 18px;">这是一个蓝色字体、18 像素大小的段落。</p>

title为段落元素提供额外的提示信息,当鼠标悬停在元素上时,会显示该提示信息。

实例代码 运行代码
复制
<p title="这是一段额外的提示信息">悬停在我上面查看提示。</p>

3. ARIA 属性

可访问性富互联网应用(ARIA)属性用于增强网页的可访问性,帮助残障人士更好地使用网页。

aria-label为没有可见文本标签的元素提供一个文本标签,以便屏幕阅读器等辅助设备可以将其读给用户听。

实例代码 运行代码
复制
<p aria-label="重要通知段落">这是一条重要通知。</p>

aria-describedby引用另一个元素的 ID,该元素包含对当前元素的详细描述,辅助设备可以读取该描述。

实例代码 运行代码
复制
<p id="desc">这个段落包含重要信息。</p>
<p aria-describedby="desc">请仔细阅读。</p>

HTML 段落样式

在 HTML 中,段落元素可借助一些 CSS 样式,轻松改变自身外观,从而为 HTML 页面实现多样化的排版效果。比如:

实例代码 运行代码
复制
<head>
<style>
    p {
        color: red;
        font-size: 16px;
    }
</style>
</head>
<body>
    <p>这是一段应用了CSS样式的文本。</p>
</body>



评论区 0
发表评论