14. 段落 p 与换行 br

本节目标：掌握 p 标签定义段落、br 标签强制换行，理解块级元素和空元素的区别。

p 标签：定义段落

 是最常用的文本标签，表示一个段落。它是块级元素，前后会自动产生间距。

<p>这是第一个段落。HTML 会自动在它前后留出空白。</p>
<p>这是第二个段落。两个段落之间不会挤在一起。</p>

在浏览器里看，两个段落之间有明显间距。不需要你手动加空行。

HTML 有一个特别的行为：代码里的多个空格和回车，在浏览器里只显示为一个空格。

<p>这
  段
  文
  字
  在
  代
  码
  里
  换
  行</p>

上面这段在浏览器里会显示成一行：“这段文字在代码里换行”。所有换行和多余空格都被合并了。

如果你确实需要在文字中间换行，用  。

<p>第一行文字<br>
第二行文字<br>
第三行文字</p>

  是一个空标签，没有结束标签。它只表示”在这里断开”。

  不是用来排版的，它适合语义上需要换行的场景。

写地址：

<p>北京市海淀区<br>
中关村大街 1 号<br>
100080</p>

写诗词：

<p>床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。</p>

不要用 br 制造段落间距

两个段落之间应该用两个  标签，而不是在一个  里加多个  。间距是视觉问题，交给 CSS 处理。

（Word Break Opportunity）告诉浏览器：如果空间不够，可以在这里换行。

<p>这个词特别长：supercalifragilisticexpialidocious</p>

如果希望浏览器在长单词内部可以断行，加上 ：

<p>super<wbr>cali<wbr>fragilistic<wbr>expialidocious</p>

当容器宽度不够时，浏览器会在  标记的位置断开。空间够的时候，它不会强制换行。

 是段落标签，里面只能放文本和行内元素。不能放 <div>、<h1> 这类块级元素。

<!-- 错误：p 里面不能放 div -->
<p>一段文字
  <div>这是不行的</div>
</p>

<!-- 正确：用 span 或 br -->
<p>一段文字<br>
<span>行内内容</span></p>