HTML 段落

HTML 段落

段落是网页上基本的文本内容块。

使用 <p> 定义段落

HTML <p> 元素定义一个段落。

浏览器会自动在每个 <p> 元素之前和之后添加一些垂直空间（外边距 margin），使其在视觉上分开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Paragraph Example</title>
</head>
<body>

  <p>这是第一个段落。它包含一些文本内容。</p>

  <p>这是第二个段落。请注意它与第一个段落之间的空间。</p>

</body>
</html>

HTML 显示和空白字符

HTML 的显示方式可能因屏幕尺寸、窗口大小调整和浏览器默认设置而异。您不能依赖 HTML 源代码中的额外空格或换行符来控制视觉输出。

浏览器在渲染页面时，会将 HTML 源代码中的多个空格和换行符折叠成一个单一的空格。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whitespace Example</title>
</head>
<body>

  <p>
    这个段落
    在源代码中包含很多     行
    和          额外的空格，
    但浏览器会忽略大部分。
  </p>

</body>
</html>

结果：浏览器将把上面的文本显示为一个连续的段落，词语之间只有一个空格。

闭合标签的重要性

尽管某些浏览器即使您忘记了闭合标签（如 </p>）也可能正确显示 HTML，但这并不可靠，被认为是糟糕的做法。

省略闭合标签可能导致：

• 意料之外的渲染问题。
• 调试困难。
• 无效的 HTML，这可能会给可访问性工具和其他软件带来问题。

对于非空元素（non-void elements），请始终包含闭合标签，以确保代码有效、可预测且易于维护。

<!-- 正确写法 -->
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

<!-- 避免这样写（缺少闭合标签） -->
<!--
<p>这可能渲染正常...
<p>...但可能会引起问题。
-->

HTML 换行符 <br>

HTML <br> 元素用于在现有文本块（如段落）内创建一个换行符（开始新的一行）。它不会创建一个带有外边距的新段落。

当您特别需要换行时，例如在地址或诗歌中，使用 <br>。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Line Break Example</title>
</head>
<body>

  <p>Web开发街 123 号<br>
     任意市，加州 90210<br>
     美国</p>

</body>
</html>

<br> 标签是一个空元素（void element），这意味着它没有内容，也没有闭合标签。在标准的 HTML5 中，您只需写 <br>。

预格式化文本 <pre>

HTML <pre> 元素定义预格式化文本。<pre> 标签内的文本会完全保留源代码中出现的空格和换行符。

它通常以等宽字体（monospace）显示，因此适用于显示代码片段或格式具有重要意义的文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preformatted Text Example</title>
</head>
<body>

<pre>
  function greet(name) {
    console.log(`Hello, ${name}!`);
  }

  greet('World');
</pre>

<p>请将上面的代码块与此诗歌片段进行比较，其中 `<pre>` 保留了行的结构：</p>

<pre>
  My Bonnie lies over the ocean.
  My Bonnie lies over the sea.
  My Bonnie lies over the ocean.
  Oh, bring back my Bonnie to me.
</pre>

</body>
</html>

注意：对于预格式化文本的样式设置，CSS 属性（如 white-space 和 font-family）比仅依赖 <pre> 提供了更大的灵活性。

HTML 标签参考摘要

本节讨论的关键元素：

标签	描述
<p>	定义一个文本段落。
<br>	在文本内插入一个单一的换行符。
<pre>	定义预格式化文本，保留空格和换行符。

有关这些元素以及其他 HTML 元素的更多详细信息，请查阅 MDN Web Docs HTML 元素参考。