一、段落标签<p></p>

在HTML中,我们可以使用“p标签”来显示一段文字。

语法:

<p>段落内容</p>

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>段落标签</title> </head> <body> <h3>爱莲说</h3> <p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p> <p>予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p> </body> </html>

浏览器预览效果如下图所示。

分析:

从上面的预览效果可以看出,段落标签会自动换行,并且段落与段落之间有一定的间距。

到这里,可能有些小伙伴会问:“如果想要改变文字的颜色和大小,该怎么做呢?”大家别忘了:HTML用于控制网页的结构,CSS用于控制网页的外观。文字的颜色和大小属于网页的外观,这些都是与CSS有关的内容。在HTML学习中,只需要关心用什么标签就行了。对于外观的控制,我们在本书的CSS部分中再给大家详细介绍。

二、换行标签<br/>

从上面我们知道,段落标签是会自动换行的。那么如果想要随意地对文字进行换行处理,该怎么办呢?大家先来看一段代码。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>换行标签</title> </head> <body> <h3>静夜思</h3> <p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p> </body> </html>

浏览器预览效果如下图所示。

分析:

如果想对上面的诗句进行换行,有那么两种方法:要么使用两个p标签;要么使用br标签。

在HTML中,我们可以使用br标签来给文字换行。其中<br/>是自闭合标签,br是break(换行)的缩写。对于自闭合标签,我们在后面“4.7 自闭合标签”这一节再给大家详细介绍。

举例:使用两个p标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3>静夜思</h3> <p>床前明月光,疑是地上霜。</p> <p>举头望明月,低头思故乡。</p> </body> </html>

浏览器预览效果如下图所示:

举例:使用br标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>换行标签</title> </head> <body> <h3>静夜思</h3> <p>床前明月光,疑是地上霜。<br/>举头望明月,低头思故乡。</p> </body> </html>

浏览器预览效果如下图所示。

分析:

从上面两个例子可以明显看出:使用p标签会导致段落与段落之间有一定的间隙,而使用br标签则不会。

br标签是用来给文字换行的,而p标签是用来给文字分段的。如果你的内容是两段文字,则不需要使用br标签换行那么麻烦,而是直接用两个p标签就可以了。