首页 > 其他分享 >6. HTML-- 段落标签<p>

6. HTML-- 段落标签<p>

时间:2022-09-29 14:47:12浏览次数:78  
标签:段落 -- 标签 C语言 换行 HTML 空白符

1. 前言

HTML 中可以使用段落标签 <p>来将文档中的内容分割为若干个段落,语法格式如下:

<p>段落中的内容。</p>

段落标签由开始标签<p>和结束标签</p>组成,开始和结束标签之间的内容会被视为一个段落。段落标签是一个非常基本的标签,我们在网页上发布文章时就会用到它,如下例所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML段落标签演示</title>
</head>
<body>
    <p>C语言中文网,一个在线学习编程的网站,网址:<a href="http://www.biancheng.net/" target="_blank">http://www.biancheng.net/</a></p>
    <p>C语言中文网目前已经发布了将近 <b>50</b> 套教程,包括 HTML、CSS、JavaScript 等,您可以<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。</p>
    <p>我们的 Slogan:千锤百炼,只为大作;精益求精,句句斟酌;这种教程,看一眼就倾心。</p>
</body>
</html>

运行结果如下图所示:

HTML段落标签演示
图1:HTML 段落标签演示

注意:浏览器内置的样式会在段落的上下自动添加一定的空白区域(外边距),您可以使用 CSS margin 属性来设置空白区域的大小。

在 HTML4 以及更早的版本中,可以省略段落标签的结束标签,浏览器会自动补全缺失的结束标签,如下所示:

<p>C语言中文网
<p>HTML教程
<p>http://www.biancheng.net/html/

2. 段落中的空白符

默认情况下,段落标签会对文本中的空白符进行合并,将多个连续的空白符显示为一个空格的效果,具体表现为:

  • 如果段落中出现多个连续的空格,浏览器会忽略这些空格只保留一个;
  • 如果段落中出现多个连续的换行,浏览器会将这些换行转换成一个空格。


下面通过一个示例来演示段落中的空白符:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML段落中的空白符</title>
</head>
<body>
    <p>C语言中文网</p>
    <p>http:            //c.biancheng.net/html/</p>
    <p>
        HTML      教
    程</p>
</body>
</html>

运行结果如下图所示:

HTML段落中的空白符演示
图2:演示 HTML 段落中的空白符


如果想要在段落中换行,需要使用专门的换行标签<br /><br />标签属于自闭和标签,因此不需要对应的结束标签</br>,如下例所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用<br>标签换行</title>
</head>
<body>
    <p>C语言中文网<br />http://c.biancheng.net/html/<br />HTML教程</p>
</body>
</html>

运行结果如下图所示:

换行标签
图3:换行标签的使用

标签:段落,--,标签,C语言,换行,HTML,空白符
From: https://www.cnblogs.com/jiajunling/p/16741482.html

相关文章

  • react 代码编辑器react-ace
    github:https://github.com/securingsincity/react-acestar:3.6knpm:weeklydownloads280,045DEMOofReactAce:https://securingsincity.github.io/react-ace/i......
  • leetcode -- tree 2
    最大二叉树递归构造classSolution:defconstructMaximumBinaryTree(self,nums:List[int])->Optional[TreeNode]:ifnotnums:retur......
  • 7. HTML-- 文本格式化
    1.前言一些HTML标签除了具有一定的语义(含义)外,还有默认的样式,例如<b>(加粗)、<em>(倾斜)等,通过这些标签我们无需借助CSS就可以为网页中的内容定义样式。在这些具有语义和......
  • 13 刘欣晨 2022.9.22
    实验一 项目名称:     输出每日一贴                       importdatetimemot=["今天星期一:\n坚持下去不是因为我很坚强,而是因为我别......
  • minio通过docker方式部署
    MinIO是在GNUAffero通用公共许可证v3.0下发布的高性能对象存储。它是与AmazonS3云存储服务兼容的API官方文档http://docs.minio.org.cn/docs/master/minio-adm......
  • 马踏棋盘算法
    应用实例马踏棋盘算法也被称为骑士周游问题将马随机放在国际象棋的8×8棋盘Board[0~7][0~7]的某个方格中,马按走棋规则(马走日字)进行移动。要求每个方格只进入一次,走遍棋......
  • Vscode中点击自动eslint格式化和prettier搭配
    eslint规则只是限制我们在写代码时候的标准化,尤其是在团队开发中成员的代码一致性,如果大家都是自己的标准,那么写出的项目将没有办法进行阅读,不利于后期的二次开发vscode自......
  • SVN、Git、Github、Gitee、Gitlab 之间的关系
    SVN是一个集中式版本控制系统。仓库:中央服务器(远程仓库)。Git是一个分布式版本控制系统。仓库:中央服务器(远程仓库),个人电脑(本地仓库)。GithubGithub是基于git的代......
  • docker 使用
      dockerpull下来的镜像都存到了哪里dockerpull下来的命令都默认存在/var/lib/docker/文件夹下。查看/var/lib/docker/image/overlay2/repositories.json文件:正......
  • CH573F蓝牙从机(peripheral)例程讲解(二)
    在上一篇外设例程讲解中讲述了蓝牙从机的收发接口,这样可以快速的上手,那么接下来就讲解另一个重要设置,从机的广播。在peripheral例程中,一直是以50ms的周期进行广播,使用手机......