鱼子酱

HTML 段落格式设置大全

1. 基本段落标签

在 HTML 中，段落使用 <p> 标签定义。例如：

<p>这是一个普通的段落。</p>

2. 文本对齐方式

使用 text-align 属性可以设置文本的对齐方式：

<p style="text-align: left;">左对齐</p>
<p style="text-align: center;">居中对齐</p>
<p style="text-align: right;">右对齐</p>
<p style="text-align: justify;">两端对齐</p>

3. 段落间距调整

使用 margin 和 padding 控制段落间距：

<p style="margin-bottom: 20px;">段落之间的外边距（底部 20px）</p>
<p style="padding: 10px;">段落的内边距（四周 10px）</p>

4. 首行缩进

使用 text-indent 设置首行缩进：

<p style="text-indent: 2em;">这个段落的首行缩进 2 个字符。</p>

5. 文本样式调整

可以通过 CSS 修改字体大小、加粗、斜体等效果：

<p style="font-size: 18px; font-weight: bold; font-style: italic;">
    加粗、斜体、调整字体大小
</p>

6. 改变文本颜色和背景颜色

<p style="color: red;">红色文本</p>
<p style="background-color: yellow;">黄色背景的文本</p>

7. 添加边框

<p style="border: 1px solid black; padding: 10px;">
    这个段落有黑色边框和 10px 的内边距。
</p>

8. 超链接与文本强调

<p>访问 <a href="https://www.example.com">示例网站</a> 获取更多信息。</p>
<p><strong>加粗文本（表示重要性）</strong> 和 <em>斜体文本（表示强调）</em></p>

9. 换行符

使用 <br> 强制换行：

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

10. 多列布局的段落

<p style="column-count: 2; column-gap: 20px;">
    这个段落会被自动分为两列，并且两列之间的间距为 20px。
</p>

11. 组合使用样式

<p>
  <strong style="color: blue; background-color: lightgray; font-size: 20px;">
    这是蓝色、加粗、20px 字体大小，并带有灰色背景的文本
  </strong>
</p>

12. <b> 与 <strong> 的区别

• <strong> 表示强调内容，具有语义化作用（SEO 友好）。
• <b> 仅用于加粗文本，没有强调作用。

示例：

<p><strong>这个内容很重要！</strong></p>
<p><b>这个只是加粗文本。</b></p>

13. <i> 与 <em> 的区别

• <em> 表示强调，语义化更强。
• <i> 只是单纯斜体，不强调语义。

示例：

<p><em>这个内容需要强调</em></p>
<p><i>这个只是斜体</i></p>

14. 设置行高（line-height）

调整段落的行间距：

<p style="line-height: 1.5;">这个段落的行高是 1.5 倍。</p>
<p style="line-height: 2;">这个段落的行高是 2 倍。</p>

15. 文本阴影（text-shadow）

<p style="text-shadow: 2px 2px 5px gray;">带有阴影的文本</p>

16. 删除线（text-decoration）

<p style="text-decoration: line-through;">带有删除线的文本</p>

17. 首字母放大（::first-letter 伪元素）

<style>
p::first-letter {
    font-size: 30px;
    font-weight: bold;
    color: red;
}
</style>
<p>这是一个示例段落，首字母会被放大加粗。</p>

---

以上是 HTML 段落格式的常见设置，结合 CSS 可以灵活调整文本样式，使页面更加美观和易读。