HTML 段落

什么是 HTML 段落？

HTML 段落是通过 <p> 标签定义的。

HTML 段落示例

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

HTML 空白处理

HTML 会自动忽略多余的空白和换行。无论您在 HTML 代码中添加多少空格或换行，浏览器都会将其显示为单个空格。

<p>这是一个    有很多空格的    段落。</p> 


<p>这是一个
有很多换行的
段落。</p>

HTML 换行标签

如果您需要在段落中添加换行，可以使用 <br> 标签。

<p>这是第一行<br>这是第二行</p>

HTML 水平线标签

您可以使用 <hr> 标签在页面中添加水平线，用于分隔内容。

<p>这是第一段内容。</p> 
<hr> 



<p>这是第二段内容。</p>

HTML 段落的样式

您可以使用 CSS 来自定义段落的样式，如字体大小、颜色、行高、边距等。

<style> /* 内部样式表，定义段落的自定义样式 */
p { /* 为所有 p 元素设置样式 */
    font-size: 16px; /* 设置字体大小为 16 像素 */
    line-height: 1.6; /* 设置行高为 1.6 倍字体大小，提高可读性 */
    color: #333; /* 设置文本颜色为深灰色 */
    margin-bottom: 15px; /* 设置底部外边距为 15 像素，与下一个元素保持距离 */
}
</style> /* 结束内部样式表 */

<p>这是一个自定义样式的段落。</p> 
<p>这是另一个自定义样式的段落。</p>

HTML 段落的对齐方式

您可以使用 CSS 的 text-align 属性来设置段落的对齐方式。

<style> /* 内部样式表，定义不同对齐方式的样式类 */
.align-left { /* 左对齐样式类 */
    text-align: left; /* 设置文本对齐方式为左对齐 */
}

.align-center { /* 居中对齐样式类 */
    text-align: center; /* 设置文本对齐方式为居中对齐 */
}

.align-right { /* 右对齐样式类 */
    text-align: right; /* 设置文本对齐方式为右对齐 */
}

.align-justify { /* 两端对齐样式类 */
    text-align: justify; /* 设置文本对齐方式为两端对齐 */
}
</style> /* 结束内部样式表 */

<p class="align-left">左对齐的段落。</p> 
<p class="align-center">居中对齐的段落。</p> 
<p class="align-right">右对齐的段落。</p> 
<p class="align-justify">两端对齐的段落。两端对齐的段落会自动调整单词间距，使每行的左右边缘都对齐。</p>