• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

4.3 段落标签<p>

一、段落标签<p>

在HTML中,使用p标签来标记一段文字。

语法:

<p>段落内容</p>

举例:

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

在浏览器预览效果如下:

HTML中p标签

说明:

段落标签会自动换行,并且段落与段落之间有一定的空隙,大家看上图就很清楚了。

有人现在就会问,怎么改变文字的颜色和大小呀?同学,要记住,这个问题的内容是在CSS入门教程中,我们会详细给你介绍。在HTML入门阶段,现在你只管什么情况下用什么标签就行了。

二、换行标签<br/>

我们知道,段落标签可以自动换行,那如果我们想随意地进行换行,那怎么办呢?大家先看一段代码:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>换行标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
</body>
</html>

这段代码在浏览器预览效果如下:

HTML中br标签

如果我们想对上面的诗句换行,有2种办法:一是采用两个<p>标签;二是采用换行标签<br/>

方法一:采用两个<p>标签

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>换行标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光,疑是地上霜。</p>
    <p>举头望明月,低头思故乡。</p>
</body>
</html>

这段代码在浏览器预览效果如下:

HTML中p标签

方法二:采用换行标签<br/>

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>换行标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光,疑是地上霜。<br/>举头望明月,低头思故乡。</p>
</body>
</html>

这段代码在浏览器预览效果如下:

HTML换行标签

大家很明显得看到,用<p>标签会导致两文字段落之间有一定空隙,而换行标签<br/>则不会。

说明:

<br>用来给文字换行,而<p>标签用来给文字分段。如果你的内容是两段内容,你别那么无聊使用<br/>换行那么麻烦,使用两个<p>标签即可。

换行标签是自闭合标签 ,其中br指的是“break(换行)”。

总结

1、段落标签:<p></p>

2、换行标签:<br/>

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部