HTML段落＜p＞

HTML段落学习手记

认识HTML段落

在HTML世界里，段落可是个重要的角色呢！它们像是一块块展示文字的舞台，每一段都从新的一行闪亮登场。用<p>这个小标签，就能轻松定义一个段落。浏览器超贴心的，会自动打理段落前后的空白，让我们读起来更舒服。

看个小例子吧：

<p>这是第一段文字。</p>
<p>这是另一段不同的文字。</p>

HTML的显示效果

HTML在浏览器里变魔术，显示效果会因浏览器和设备的不同而有所差异哦。要注意，HTML代码里多余的空格和换行，在浏览器的大眼睛里通常都是被忽略的小透明。

简化一下之前的例子：

<p>这段文字在源代码里
分了好几行，但浏览器
其实并不太在意。</p>

<p>这段文字故意加了   很多空格   但结果还是一样</p>

整理后更清爽：

<p>这段文字在源代码里分了好几行，但浏览器其实并不太在意。</p>
<p>这段文字故意加了很多空格，但结果还是一样。</p>

HTML的刘海线<hr>

<hr>这个小标签好神奇，它能在页面上变出一条水平线，像发型师的分割线一样，把不同的内容分得清清楚楚。它可是个自给自足的标签，不需要再找结束标签哦。

剪发看看：

<h1>大标题先来</h1>
<p>这里是重要的文字。</p>
<hr>
<h2>小标题跟上</h2>
<p>这里还有些额外的信息。</p>
<hr>

HTML的换行小技巧<br>

有时候，我们不想开始新的一段，只是想在文字里换个行，怎么办呢？这时候就轮到<br>出场啦！它就像个乖巧的换行符，默默地在文字间创建新的一行。对啦，它也是个自给自足的小家伙哦。

举个例子吧：

<p>这里用到了<br>换行小技巧<br>来分隔文字。</p>

诗歌的格式小挑战

直接在HTML里写诗歌，可能会遇到格式上的小挑战。因为浏览器默认是忽略源代码里的换行的，所以诗歌的每一行可能会像脱缰的野马一样连续显示。

不过，我们可以这样解决：

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

其实这样已经很好啦，每行都清清楚楚。

保留格式的秘诀<pre>

如果我们想保留文字里的空格和换行，就像个原汁原味的格式小天地，那就可以用<pre>这个小房子。它会把文字严严实实地按照源代码里的格式包裹起来。

看看效果吧：

<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>

HTML小标签总结

学了这么多，来总结一下常用的HTML小标签吧：

标签	描述
<p>	定义一个段落
<hr>	变出一条水平线
<br>	乖巧地换个行
<pre>	保留原始格式

这些只是HTML小标签里的一部分哦，学无止境，继续探索吧！