1. 引言
在 HTML 中，<p> 元素是最基础、最常用的块级元素之一，用于定义网页中的文本段落。无论是写博客、做官网还是开发 Web 应用，几乎每个页面都离不开它。本文将带你全面了解 <p> 元素的语法、属性、样式以及常见的使用技巧。
2. <p> 元素的基本语法
<p> 元素是一个成对标签，由开始标签 <p> 和结束标签 </p> 组成，中间包裹段落文本。
html
<p>这是一个段落。</p>
<p>这是另一个段落。</p>浏览器在渲染时，会自动在段落前后添加垂直间距（默认外边距），使段落之间清晰分隔。
3. 核心特性
3.1 块级元素
<p> 是块级元素，默认占满父容器的整行宽度，多个段落会垂直堆叠排列。
3.2 自动换行与空白折叠
- 段落内的连续空格、换行会被浏览器折叠为一个空格。
- 文本到达容器边界时自动换行。
html
<p>这是 一段
包含多余空格
和换行的文本。</p>渲染效果为：这是 一段 包含多余空格 和换行的文本。
3.3 不能嵌套块级元素
按照 HTML 规范，<p> 内部不能嵌套其他块级元素（如 <div>、<p>、<h1> 等），但可以包含行内元素（如 <span>、<a>、<strong>）。
html
<!-- 错误示例 -->
<p>
<div>不能这样嵌套</div>
</p>
<!-- 正确示例 -->
<p>这是一个 <strong>加粗</strong> 的 <a href="#">链接</a>。</p>4. 常用属性
<p> 元素支持全局属性（如 id、class、style、title 等），也支持部分事件属性。
html
<p id="intro" class="text-muted" style="color: gray;" title="提示文字">
带属性的段落
</p>5. 使用 CSS 美化段落
通过 CSS 可以灵活控制段落的字体、行高、间距、对齐方式等。
css
p {
font-size: 16px;
line-height: 1.8;
color: #333;
margin-bottom: 20px;
text-align: justify;
}5.1 首行缩进
css
p {
text-indent: 2em;
}5.2 首字下沉
css
p::first-letter {
font-size: 3em;
float: left;
margin-right: 5px;
}6. 实战示例：一篇简单的文章页面
下面是一个综合运用 <p> 元素的完整示例：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>段落示例</title>
<style>
body {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
}
p {
line-height: 1.8;
margin-bottom: 16px;
}
.highlight {
background-color: #fff3cd;
padding: 10px;
border-left: 4px solid #ffc107;
}
</style>
</head>
<body>
<h1>我的博客</h1>
<p>欢迎来到我的博客，这里记录我的学习与生活。</p>
<p class="highlight">提示：段落标签是 HTML 中最常用的元素之一。</p>
<p>感谢阅读，我们下期再见！</p>
</body>
</html>7. 常见问题与注意事项
- 不要用
<p>包裹块级元素，否则浏览器会自动闭合标签，导致结构错乱。 - 空段落
<p></p>会占用空间，如需间距建议使用 CSSmargin控制。 - 语义化 ：段落应承载文本内容，不要用它做布局容器，布局请使用
<div>或语义化标签。 - 可访问性：合理使用段落有助于屏幕阅读器正确朗读内容结构。
8. 总结
<p> 元素虽然简单，却是构建网页文本内容的基础。掌握它的语法、嵌套规则和 CSS 配合技巧，能让你写出结构清晰、样式美观的页面。希望本文对你有所帮助，快去动手实践吧！