前端三剑客
HTML

HTML 段落

# HTML 段落

# 1. HTML 段落

定义：段落是通过  标签定义的。段落标签用于包含文本内容，并将其分隔成独立的块。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

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

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果图：

注意事项：浏览器会自动在段落的前后添加空行。这意味着  标签是块级元素，它会占据其所在容器的整个宽度，并在其前后自动添加一定的间距。

# 2. 不要忘记结束标签

定义：每个段落都应该有一个开始标签  和一个结束标签 。虽然大多数浏览器在缺少结束标签时仍能正确显示内容，但这是不推荐的做法。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

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

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

效果图：

注意事项：上面的例子在大多数浏览器中都能正常显示，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。在未来的 HTML 版本中，不允许省略结束标签。

# 3. HTML 折行

定义：如果希望在不产生新段落的情况下进行换行，可以使用   标签。  标签是一个空元素，不需要结束标签。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这个<br>段落<br>演示了分行的效果</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

效果图：

注意事项：  标签用于在段落或其他块级元素内部创建换行，不会创建新的段落或添加额外的间距。合理使用   标签可以提高文本的可读性和布局的灵活性。

# 4. HTML 段落中的其他元素

嵌套元素：段落中可以包含其他行内元素，如 、、<a> 等，以丰富文本的表达方式。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个包含 <strong>加粗</strong> 和 <em>斜体</em> 文字的段落。</p>
<p>这是一个包含 <a href="https://www.runoob.com">链接</a> 的段落。</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

效果：通过嵌套不同的元素，可以增强段落内容的可读性和可访问性。

# 5. 段落与样式

CSS 样式：可以使用 CSS 对段落进行样式化，调整段落的字体、颜色、对齐方式、间距等。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p {
  color: blue;
  font-family: Arial, sans-serif;
  text-align: justify;
  line-height: 1.5;
}
</style>
</head>
<body>

<p>这是一个带有样式的段落。</p>
<p>这个段落将显示为蓝色，使用 Arial 字体，并且文本对齐为两端对齐。</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果：通过 CSS，可以使段落内容更具视觉效果和可读性。

# 6. HTML 提示与最佳实践

使用语义化标签：尽量使用适当的 HTML 标签（如 、 ）而不是滥用 <div> 标签，以提高网页的语义化和可访问性。
保持代码简洁：写清晰、结构良好的代码，注重代码的可读性和维护性。
测试兼容性：在多个浏览器和设备上测试网页，以确保一致的用户体验。

编辑此页

← HTML 标题 HTML 文本格式化→