首页 » 编程语言 » html » 正文

html段落:P标签及格式用法详解

段落语法

html代码中,标签<p>是来定义给文章分段落的

<p>段落内容</p>

P是paragraph(段落)的缩写,段落标签会自动换行,并且段落与段落之间有一定的空隙;

如果我们忘记了结束标签</p>,大多数的浏览器也会正常显示出来,但不要依赖这种不规范的写法,毕竟,在某些不知名的情况下,会产生始料未及的的结果和错误。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>p段落标签演示案例</title>
</head>
<body>
<p>刘代码博客就是一个p段落</p>
<p>刘代码博客就是一个p段落</p>
<p>刘代码博客就是一个p段落</p>
</body>
</html>

每个P标签段落在浏览器中默认都会自动换行,且段落与段落之间也会有距离。

我们还可以通过P标签的样式属性来自由配置段落的对齐方式和行间距、也可以配置文字颜色、大小等信息!

设置段落对齐方式

语法:<p align="属性值">元素内容</p>

属性名:align

属性值:center(居中对齐),left(左对齐),right(右对齐),justify(两端对齐,也叫分散对齐)

2019-07-31_200512.png

设置段落文本颜色

使用样式style来设置color的颜色值,比如red,green,blue,#9F6108等颜色值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段落文字颜色样式</title>
</head>
<body>
<p style="color:red;">这个p段落文字是红色</p>
<p style="color:green;">这个p段落文字是绿色</p>
<p style="color:blue;">这个p段落文字是蓝色</p>
<p style="color:#9F6108;">这个p段落文字是#9F6108</p>
</body>
</html>

在浏览器中的效果显示如下:

2019-08-01_001438.png

设置段落文本大小

使用样式style来设置font-size的字号大小,就能调整P段落文本字体的大小!

字号一般用数字表示,然后带上字号单位,单位可以是px、em、pt等单位!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段落文字颜色样式</title>
</head>
<body>
<p style="font-size:15px;">这个p段落文字大小是15像素</p>
<p style="font-size:20px;">这个p段落文字大小是20像素</p>
<p style="font-size:25px;">这个p段落文字大小是25像素</p>
<p style="font-size:30px;">这个p段落文字大小是30像素</p>
</body>
</html>

在浏览器中显示的效果如下

2019-08-01_003317.png

设置段落行高

使用样式style来设置line-height的大小,就可以实现段落行高的调整;

我们在设置段落行高时,同时也设置一下段落文字的颜色,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段落文字颜色样式</title>
</head>
<body>
<p style="line-height:15px;color:red;">这个是行高为15像素的段落,文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<p style="line-height:20px;color:green;">这个是行高为20像素的段落,文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<p style="line-height:25px;color:blue;">这个是行高为25像素的段落,文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<p style="line-height:30px;color:#9F6108;">这个是行高为30像素的段落,文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>
</html>

在浏览器中显示的效果如下

2019-08-01_011253.png

由上图可知,设置段落行高,可以调整一个段落中行与行之间的距离,同时,行距增加的同时,段落与段落之间的上下距离也在增大!

设置段落首行缩进

使用样式style来设置text-indent的大小,就可以调整段落首行缩进的距离

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段落文字颜色样式</title>
</head>
<body leftmargin="0">
<p style="text-indent:15px;">这个段落首行缩进15像素</p>
<p style="text-indent:25px;">这个段落首行缩进20像素</p>
<p style="text-indent:35px;">这个段落首行缩进25像素</p>
<p style="text-indent:45px;">这个段落首行缩进30像素</p>
</body>
</html>

在浏览器中显示的效果如下

2019-08-01_012042.png



欢迎您发表评论或留言