首页 前端知识 前端——5.HTML标签_段落标签和换行标签

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

2024-02-05 11:02:20 前端知识 前端哥 360 279 我要收藏

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

目录

1.段落标签

1.1介绍

1.2实际案例

1.3小拓展

2.换行标签

2.1介绍

2.2实际案例

3.小结


1.段落标签

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

1.1介绍

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

代码格式:

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

注意:字母p是单词paragraph(段落)的缩写

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

特点:

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

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 />

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

标签语义:强制换行

特点:

  1. <br /> 是个单标签
  2. <br />标签只是简单开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距

2.2实际案例

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

三处<br />,三处皆换行。 

3.小结

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1334.html
标签
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!