一、段落标签<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标签就可以了。