这篇文章，我们来讲解一下HTML标签中的段落标签和换行标签

1.段落标签

1.1介绍

1.2实际案例

1.3小拓展

2.换行标签

2.1介绍

2.2实际案例

3.小结

1.段落标签

我们首先来讲解一下段落标签

1.1介绍

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，标签用于定义段落，它可以将整个网页分为若干个段落。

代码格式：

    <p>这是一个段落标签</p>

注意：字母p是单词paragraph（段落）的缩写

标签语义：可以把HTML文档分为若干个段落

特点：

文本在一个段落中会根据浏览器的窗口大小自动换行
段落与段落直接保有空隙

1.2实际案例

下面用实际代码样例来说明一下。

如下图所示，我们在HTML文档中粘贴一些文字，并且在HTML文档中，这些文字是按段落显示的，但是，当我们运行时，就会发现，实际效果并不和HTML文档中显示的一样，它是连片出现的

下面，我们加上段落标签，再来看一下：

代码如下：

<!DOCTYPE html>
<html lang="ch-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p> 推出两个月就斩获了超过 1 亿用户，堪称史上发展速度最快的公共应用程序。虽然许多人认为 ChatGPT 是技术上的飞跃，但其真正活力并非来自巨大的技术进步（ChatGPT 的基础模型是GPT3，已经存在近 3 年了），而是因为：它是一款真正能够与人类交互的 AI 应用程序。</p><p>作为一个 AI 系统，ChatGPT 高调地向世人展示了自己的价值，让公众产生了畏惧。实际上，人工智能已经渗透现代生活的方方面面，但它们大多隐藏在幕后，例如谷歌搜索、Youtube 推荐、垃圾邮件过滤器、身份识别等等。ChatGPT 是为数不多的人造智能工具之一。人工智能已成为众人瞩目的焦点，并因此而催生了大量文章、视频、博客以及播客。</p><P>在此次热潮中，人们对于人工智能的进步、人工智能的意识进步、人工通用智能以及技术奇点等的影响产生了新的问题和担忧——然而，我们认为 ChatGPT 不是终结者：这些技术仍在快速发展，我们无法预测其将来的发展方向，更无法预期其广泛的影响。但我们可以通过一些小问题，知微见著，加深对 AI 的理解。</P>
</body>
</html>

1.3小拓展

如下图所示，我在代码上的某一段中敲上许多空格，请问浏览器会如何显示？

答：只显示一个空格

结论：不管HTML文档中的内容是什么样的，没有标签，在浏览器中只是连片显示；要想在浏览器中按一定格式来显示，必须使用标签！

2.换行标签

下面，我们来讲一下换行标签

2.1介绍

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行，就需要使用换行标签 。

    <br />

注意：br 是单词 break 的缩写，意为打断、换行

标签语义：强制换行

特点：

是个单标签
标签只是简单开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

2.2实际案例

就以上图的内容来看一下换行标签的作用吧

三处 ，三处皆换行。

3.小结

本篇文章主要将了段落标签和换行标签，都是十分简单的标签，不多赘述

前端——5.HTML标签_段落标签和换行标签相关推荐

使用p标签显示段落时保留换行
今天在写前端的时候,遇到了一个问题,通过textarea标签传入的段落,用p标签显示出来时,p标签会自动把空白和换行给去除,影响显示效果. 尝试了几种方法,发现了一个简单的. <p style= ...
数据中台画像标签_如何通过数据中台标签平台，圈出产品高价值用户？
编辑导语:对于不少公司来说,自身拥有的资源是有限的,因此需要进行差异化运营,将资源着重倾斜给高价值的用户,首先满足他们的需求,缩减分给低价值用户的资源.那么,应该如何去做呢?本文作者通过数据中台标签平 ...
dw常用标签_一个新人对于DW标签的理解
标签呢分为一.一般标签一般标签内又分为 ① 格式控制标签格式控制标签的书写格式是: 以font为开头以/font为结尾 font的后面可以包含有color=""(颜色)si ...
python消找出img中的src标签_使用beautifulsoup从img标签获取src
这是我最后一次求救帮助我正在尝试使用我的不和机器人进行一些很酷的嵌入,唯一的问题是我无法从网站获取img到任何人都可以帮忙吗?大部分情况下,这是其他人告诉我使用的代码,这里找到的代码不起作用.使用be ...
js正则匹配闭合标签_正则匹配闭合HTML标签（支持嵌套）
OK,先确定我们要解决的问题--从一段Html文本中找出特定id的标签的innerHTML. 这里面最大的难点就是,Html标签是支持嵌套的,怎么能够找到指定标签相对应的闭合标签呢? 我们可以这样想, ...
js正则匹配闭合标签_正则表达式匹配封闭html标签
统计代码行数 , 只需一个正则就搞定.嵌套 Html 标签的匹配是正则表达式应用中一个比较难的话题,因为它涉及到的正则语法比较多,也比较难.因此也就更有研究的价值. 思路任何复杂的正则表达式都是 ...
把ueditor的 p 标签改成a标签_每周一签·35 | 云标签使用常见问题（QA）
关键词:打印偏差.数据导不进.打印脱机.纸张排版- 相信大家在各自场景使用云标签时, 都会有一些疑惑和问题, 在此,小编选取了提及率较高的几个问题, 为小伙伴们进行解答, 当然,需要进一步交流, 可咨 ...
可编辑列表标签_好用的音频标签管理工具Music Tag Editor Pro Mac4.0.1 中文版
Music Tag Editor Pro Mac版是Mac os系统上一款音频标签管理工具,支持UNICODE,软件带有PLS/M3U列表生成器,还可以生成XML/TXT/CSV格式的播放列表,通过它 ...
NFC+超高频抗金属rfid标签_双频抗金属标签_防水资产管理电子标签
超高频抗金属rfid标签厂家专久智能提供的136x43x10.3mm资产管理电子标签,除了是一款防碰撞的防水标签外,还是同时拥有NFC标签和超高频Impinj Monza R6P芯片的双频抗金属标签. ...

前端——5.HTML标签_段落标签和换行标签

1.段落标签

1.1介绍

1.2实际案例

1.3小拓展

2.换行标签

2.1介绍

2.2实际案例

3.小结

前端——5.HTML标签_段落标签和换行标签相关推荐

最新文章

热门文章