编辑“︁HTML段落”︁（章节）

= HTML段落 =

'''HTML段落'''是网页中用于组织和呈现文本内容的基本结构元素，由<code>&lt;p&gt;</code>标签定义。段落是块级元素，浏览器会自动在其前后添加空白边距，使内容在视觉上形成独立的文本块。本条目将详细介绍段落的使用方法、相关属性和实际应用场景。

== 基本语法 ==
段落通过<code>&lt;p&gt;</code>标签定义，语法结构如下：

<syntaxhighlight lang="html">
<p>这是一个段落文本。</p>
<p>这是另一个独立段落。</p>
</syntaxhighlight>

'''输出效果：'''
<div style="border:1px solid #ddd; padding:10px; margin:10px 0;">
<p style="margin:1em 0;">这是一个段落文本。</p>
<p style="margin:1em 0;">这是另一个独立段落。</p>
</div>

== 技术细节 ==

=== 默认样式 ===
浏览器对段落应用默认样式：
* 上下边距：通常为1em（约16px）
* 显示方式：块级元素（独占一行）

可通过CSS修改这些默认样式：
<syntaxhighlight lang="css">
p {
  margin: 10px 0;
  line-height: 1.5;
}
</syntaxhighlight>

=== 嵌套规则 ===
段落元素'''不可嵌套'''其他块级元素，但可包含：
* 行内元素（<code>&lt;strong&gt;</code>, <code>&lt;a&gt;</code>等）
* 文本内容
* 短语元素

'''错误示例：'''
<syntaxhighlight lang="html">
<p>这是段落 <div>非法嵌套</div> 内容</p> <!-- 无效HTML -->
</syntaxhighlight>

== 进阶应用 ==

=== 语义化使用 ===
HTML5强调语义化，段落应用于：
* 文章正文内容
* 产品描述
* 用户评论等文本块

=== 结合其他元素 ===
段落常与以下元素配合使用：
* 标题（<code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>）
* 列表（<code>&lt;ul&gt;</code>/<code>&lt;ol&gt;</code>）
* 分割线（<code>&lt;hr&gt;</code>）

'''示例：'''
<syntaxhighlight lang="html">
<h2>章节标题</h2>
<p>本节介绍段落的使用方法。</p>
<hr>
<p>下一节将讨论文本格式化。</p>
</syntaxhighlight>

== 实际案例 ==

=== 新闻文章 ===
<syntaxhighlight lang="html">
<article>
  <h1>人工智能新突破</h1>
  <p>研究人员近日宣布在自然语言处理领域取得重大进展...</p>
  <p>该技术预计将应用于智能客服系统...</p>
</article>
</syntaxhighlight>

=== 产品页面 ===
<syntaxhighlight lang="html">
<div class="product">
  <h2>智能手表X200</h2>
  <p>全新升级的心率监测系统，精度提升30%...</p>
  <p>续航时间长达14天，支持快充技术...</p>
</div>
</syntaxhighlight>

== 视觉表现模型 ==
段落作为块级元素的盒模型：

<mermaid>
graph TD
  A[p元素] --> B[内容区域]
  A --> C[上边距]
  A --> D[下边距]
  A --> E[左边距]
  A --> F[右边距]
</mermaid>

数学表示为：
<math>
\text{总宽度} = \text{左边距} + \text{边框} + \text{内边距} + \text{内容宽度} + \text{内边距} + \text{边框} + \text{右边距}
</math>

== 注意事项 ==
1. 避免使用空段落作为间距控制（应使用CSS margin/padding）
2. 长文本建议分割为多个逻辑段落
3. 国际化的网站需考虑不同语言的段落分隔规则
4. 屏幕阅读器会识别段落作为独立语义单元

== 浏览器兼容性 ==
所有现代浏览器均完整支持<code>&lt;p&gt;</code>元素，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 7+

== 参见 ==
* [[HTML文本格式化]]
* [[HTML标题元素]]
* [[CSS盒模型]]

{{HTML基础导航}}

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]