<br> 标签：强制换行<br>（break）标签很简单，它就是告诉浏览器“在这里给我换一行”。它不像<p></p>标签那样会创建一个新的段落，只是单纯地插入一个行中断。

<p>第一行文本。<br>第二行文本。<br><br>这里有两行空行。</p>

渲染效果会是：

第一行文本。
第二行文本。

这里有两行空行。

这种方式可以有效地实现多行空行，但如果只是为了增加元素之间的垂直间距，CSS的margin或padding会是更优的选择。

CSS white-space 属性：更灵活的控制 这是我个人最推荐的方式，因为它将样式控制权完全交给了CSS，让HTML保持内容的纯粹。white-space属性有几个值可以模拟甚至超越<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt;和&lt;code&gt; &lt;/code&gt;的效果：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;code&gt;white-space: pre;&lt;/code&gt;：行为与&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签完全一致，保留所有空格和换行，不自动换行。&lt;/li&gt;&lt;li&gt;&lt;code&gt;white-space: pre-wrap;&lt;/code&gt;：保留所有空格和换行，但会在需要时自动换行（word-wrap）。这是&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;的一个很好的替代品，因为它在保留格式的同时，避免了文本溢出容器。&lt;/li&gt;&lt;li&gt;&lt;code&gt;white-space: pre-line;&lt;/code&gt;：折叠多个空格，但保留换行符。如果你只想保留文本中的换行，而不在乎多个空格，这个就很合适。&lt;/li&gt;&lt;li&gt;&lt;code&gt;white-space: normal;&lt;/code&gt;：默认值，折叠所有多余的空格和换行。&lt;/li&gt;&lt;/ul&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;div style=&quot;white-space: pre-wrap; border: 1px solid #ccc; padding: 10px;&quot;&gt; 这是一个 带有 多重 空格和换行 的文本，并且会自动换行。 &lt;/div&gt;</pre></div><p>这种方式的优点是，你可以将这种样式应用到任何块级元素上，而不仅仅是<code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt;，从而获得更大的灵活性和语义化优势。&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h3&gt;为什么HTML默认会“吃掉”我的多余空格和换行符？&lt;/h3&gt;&lt;p&gt;这其实是HTML设计哲学的一个体现，也是许多初学者会感到困惑的地方。简单来说，HTML被设计为一种结构化文档语言，它的核心任务是定义内容的语义和结构，而不是精确地控制内容的视觉呈现。浏览器在解析HTML时，会遵循一套关于空白字符处理的规则，这套规则被称为“空白折叠”（whitespace collapsing）。&lt;/p&gt; &lt;div class=&quot;aritcle_card&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1728&quot;&gt; &lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/969/633/68b6d28da274e764.png&quot; alt=&quot;Visla&quot;&gt; &lt;/a&gt; &lt;div class=&quot;aritcle_card_info&quot;&gt; &lt;a href=&quot;/ai/1728&quot;&gt;Visla&lt;/a&gt; &lt;p&gt;AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。&lt;/p&gt; &lt;div class=&quot;&quot;&gt; &lt;img src=&quot;/static/images/card_xiazai.png&quot; alt=&quot;Visla&quot;&gt; &lt;span&gt;100&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1728&quot; class=&quot;aritcle_card_btn&quot;&gt; &lt;span&gt;查看详情&lt;/span&gt; &lt;img src=&quot;/static/images/cardxiayige-3.png&quot; alt=&quot;Visla&quot;&gt; &lt;/a&gt; &lt;/div&gt; &lt;p&gt;想象一下，如果HTML严格按照你敲击键盘的每一个空格和回车来渲染，那么网页的布局将变得异常脆弱。一个不小心多敲了一个空格，或者换行符的位置稍微变动，都可能导致页面错乱。为了让内容在不同的设备、不同的屏幕尺寸下都能保持良好的可读性和流动性，HTML和浏览器选择了一种更“宽容”的空白处理方式。&lt;/p&gt;&lt;p&gt;具体来说，浏览器在渲染文本时，会将连续的空格、制表符、换行符（包括&lt;code&gt;\n&lt;/code&gt;和&lt;code&gt;\r&lt;/code&gt;）合并成一个单一的空格。这意味着：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;code&gt;Hello World&lt;/code&gt; 会被渲染成 &lt;code&gt;Hello World&lt;/code&gt;。&lt;/li&gt;&lt;li&gt;&lt;code&gt;Hello\n\n\nWorld&lt;/code&gt; （在HTML源代码中输入多个回车）也会被渲染成 &lt;code&gt;Hello World&lt;/code&gt;。&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;这种行为是为了让内容能够“流式”布局，适应不同的视口宽度。开发者应该通过CSS来精确控制元素的间距、文本的对齐和换行规则，而不是依赖HTML源代码中的空白字符。这种“内容与表现分离”的原则，是现代Web开发的基础。我们用HTML定义“是什么”，用CSS定义“长什么样”，这让我们的代码更清晰、更易于维护，也更有利于网页的无障碍访问。&lt;/p&gt;&lt;h3&gt;除了&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;和&lt;code&gt; &lt;/code&gt;，还有哪些更现代或语义化的方式来控制文本的空白区域？&lt;/h3&gt;&lt;p&gt;确实，虽然&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;和&lt;code&gt; &lt;/code&gt;能解决问题，但在很多情况下，它们并不是最佳实践，尤其是在追求语义化和可维护性的时候。现代Web开发更倾向于使用CSS来控制视觉呈现，包括空白区域。&lt;/p&gt;&lt;p&gt;最核心的，无疑是前面提到的 &lt;strong&gt;CSS &lt;code&gt;white-space&lt;/code&gt; 属性&lt;/strong&gt;。它提供了对文本内部空白处理的精细控制，远比简单地插入&lt;code&gt; &lt;/code&gt;或使用&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签来得灵活：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;&lt;code&gt;white-space: pre-wrap;&lt;/code&gt;&lt;/strong&gt;: 我个人非常喜欢这个。它既能保留源代码中的所有空格和换行符（像&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;一样），又能让文本在达到容器边缘时自动换行。这意味着你可以在后端生成格式化的文本（比如用户输入的带换行符的评论），然后直接显示在前端，而不用担心内容溢出或者丢失格式。这比纯粹的&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;更具适应性。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;&lt;code&gt;white-space: pre-line;&lt;/code&gt;&lt;/strong&gt;: 如果你只想保留文本中的换行符，而对多个空格不感兴趣（让它们折叠成一个），这个属性就非常适合。例如，用户在文本框中输入的内容，你可能希望保留其段落结构，但不需要精确到每个空格。&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;除了&lt;code&gt;white-space&lt;/code&gt;，还有一些CSS属性可以间接或直接地控制文本和元素之间的“空白”：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;&lt;code&gt;margin&lt;/code&gt; 和 &lt;code&gt;padding&lt;/code&gt;&lt;/strong&gt;: 这两个是控制元素外部和内部空间最常用的属性。如果你需要增加段落之间、图片与文字之间、或者任何块级元素之间的“多行空格”，用&lt;code&gt;margin-top&lt;/code&gt;、&lt;code&gt;margin-bottom&lt;/code&gt;、&lt;code&gt;padding-top&lt;/code&gt;、&lt;code&gt;padding-bottom&lt;/code&gt;远比插入多个&lt;code&gt;&lt;br&gt;&lt;/code&gt;标签来得语义化和精准。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;&lt;code&gt;line-height&lt;/code&gt;&lt;/strong&gt;: 这个属性控制文本行之间的垂直距离。通过调整&lt;code&gt;line-height&lt;/code&gt;，你可以增加或减少文本的“行间距”，从而在视觉上模拟多行空格的效果，让段落看起来更疏松或紧凑。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;&lt;code&gt;text-indent&lt;/code&gt;&lt;/strong&gt;: 用于设置文本块第一行的缩进。这是一种常见的段落开头“空白”处理方式，比使用多个&lt;code&gt; &lt;/code&gt;来模拟缩进要好得多。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;&lt;code&gt;word-spacing&lt;/code&gt; 和 &lt;code&gt;letter-spacing&lt;/code&gt;&lt;/strong&gt;: 这两个属性分别控制单词之间和字母之间的间距。虽然不是直接处理多行空格，但它们可以调整文本的整体密度和视觉效果，有时也能达到类似“增加空白”的感觉。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Flexbox 和 Grid&lt;/strong&gt;: 对于更复杂的布局，Flexbox和Grid布局系统提供了强大的工具来控制元素之间的空间。你可以使用&lt;code&gt;gap&lt;/code&gt;属性（在Flexbox和Grid中）或者&lt;code&gt;justify-content&lt;/code&gt;、&lt;code&gt;align-items&lt;/code&gt;等属性来分布子元素，从而自然地创建出各种空白区域，而无需依赖HTML中的空白字符。&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;举个例子，如果你想让一段文本在视觉上看起来有“多行空格”，但又不想用&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;或&lt;code&gt; &lt;/code&gt;破坏语义，你可以这样做：&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;p class=&quot;spaced-text&quot;&gt; 这是第一行内容。 这是第二行内容。 这是第三行内容。 &lt;/p&gt;</pre></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>.spaced-text { white-space: pre-line; /* 保留换行，折叠空格 */ line-height: 2.0; /* 增加行高，模拟更多垂直空间 */ margin-bottom: 1em; /* 段落下方增加间距 */ }</pre></div><p>这样，你在HTML中只需要输入自然的换行，而所有的视觉效果都由CSS来控制，既保持了代码的清晰，又提供了丰富的表现力。这是我个人在实际项目中更偏爱的做法。</p> <h3>使用<code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt;和&lt;code&gt; &lt;/code&gt;时，有哪些常见的陷阱或需要注意的最佳实践？&lt;/h3&gt;&lt;p&gt;虽然&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;和&lt;code&gt; &lt;/code&gt;在特定场景下是有效的解决方案，但如果不加区分地滥用，可能会带来一些意想不到的问题。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;关于 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 标签：&lt;/strong&gt;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;语义优先原则：&lt;/strong&gt; &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签的语义是“预格式化文本”，意味着它的内容必须严格按照源代码的格式显示。最佳实践是，只在内容本身就需要这种精确格式时使用它，比如代码示例、ASCII艺术、日志输出或者其他需要保留原始空白和换行的纯文本数据。如果只是为了获得多行空格或换行效果，而内容本身并非预格式化的，那么使用CSS的&lt;code&gt;white-space&lt;/code&gt;属性会更语义化。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;默认样式问题：&lt;/strong&gt; 浏览器通常会给&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签应用等宽字体（&lt;code&gt;font-family: monospace;&lt;/code&gt;）。如果你不希望是这种字体，或者想调整字号、颜色、行高，都需要通过CSS来覆盖默认样式。&lt;/li&gt;&lt;li&gt;&lt;strong&gt;内容溢出风险：&lt;/strong&gt; &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;默认不会自动换行。这意味着如果你的预格式化文本行太长，它可能会溢出父容器，导致水平滚动条出现，或者在没有滚动条时直接被截断，影响用户体验。为了解决这个问题，通常需要配合CSS：&lt;pre class='brush:css;toolbar:false;'&gt;pre { white-space: pre-wrap; /* 既保留格式又自动换行 */ word-wrap: break-word; /* 强制长单词断开 */ overflow-x: auto; /* 如果还是溢出，显示水平滚动条 */ }</pre></div><p>这里使用<code>pre-wrap实际上是改变了<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre></div>的默认行为，让它在保留格式的同时也能自动换行，这在很多场景下比纯粹的pre更实用。