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

news2024/11/15 13:46:40

这篇文章,我们来讲解一下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.小结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/399647.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图像主题颜色提取(Median cut)

前言 之前想对图片素材进行分类管理&#xff0c;除了打标签&#xff0c;还有一样是通过主题色进行分类。于是开始寻找能提取主主题色的工具&#xff0c;最后找到了大名鼎鼎的 Leptonica 库&#xff0c;其中就有中位切割算法的实现。下面附上中位切割算法的其它语言版本的实现。…

keras图片数字识别入门AI机器学习

通过使用mnist&#xff08;AI界的helloworld&#xff09;手写数字模型训练集&#xff0c;了解下AI工作的基本流程。 本例子&#xff0c;要基于mnist数据集&#xff08;该数据集包含了【0-9】的模型训练数据集和测试数据集&#xff09;来完成一个手写数字识别的小demo。 mnist…

Linux内核之内存管理知识以及伙伴系统

内存管理知识以及伙伴系统一、Linux 内核架构图二、虚拟内存地址空间布局2.1、用户空间2.2、内核空间2.3、硬件层面2.4、虚拟地址空间划分2.5、用户虚拟地址空间布局2.6、进程的进程描述和内存描述符关系2.7、内核地址空间布局三、SMP/NUMA 架构3.1、SMP3.2、NUMA四、伙伴系统及…

传输线的物理基础(四):传输线的特性阻抗

特性阻抗和控制阻抗对于一条均匀的线&#xff0c;无论我们选择看哪里&#xff0c;我们都会看到沿线传播时相同的瞬时阻抗。有一个表征传输线的瞬时阻抗&#xff0c;我们给它起了一个特殊的名字&#xff1a;特性阻抗。有一个瞬时阻抗是均匀传输线的特征。我们将这种恒定的瞬时阻…

RZ/G2L工业核心板U盘读写速率测试

1. 测试对象HD-G2L-IOT基于HD-G2L-CORE工业级核心板设计&#xff0c;双路千兆网口、双路CAN-bus、2路RS-232、2路RS-485、DSI、LCD、4G/5G、WiFi、CSI摄像头接口等&#xff0c;接口丰富&#xff0c;适用于工业现场应用需求&#xff0c;亦方便用户评估核心板及CPU的性能。HD-G2L…

idm如何下载种子文件和磁力链接 idm如何下载torrent

采用分段式下载技术并支持断点续传的idm下载加速器&#xff0c;几乎可以胜任所有的下载任务。由于该软件强大的下载能力和仅为10MB的小巧体积&#xff0c;idm被来自全球的用户亲切地称为天花板级的下载软件。那么有关idm如何下载种子文件和磁力链接&#xff0c;idm如何下载torr…

基于vivado(语言Verilog)的FPGA学习(1)——了解viviado面板和编译过程

基于vivado&#xff08;语言Verilog&#xff09;的FPGA学习&#xff08;1&#xff09;——了解程序面板和编译过程 每日废话&#xff1a;最近找实习略微一些焦虑&#xff0c;不想找软件开发&#xff0c;虽然有些C和python基础&#xff08;之前上课学的&#xff09;&#xff0c;…

编码技巧——Redis Pipeline

本文介绍Redis pipeline相关的知识点及代码示例&#xff0c;包括Redis客户端-服务端的一次完整的网络请求、pipeline与client执行多命令的区别、pipeline与Redis"事务"、pipeline的使用代码示例&#xff1b; pipeline与client执行多命令的区别 Redis是一种基于客户…

如何挖掘专利创新点?

“无意中发现了一个巨牛的人工智能教程&#xff0c;忍不住分享一下给大家。教程不仅是零基础&#xff0c;通俗易懂&#xff0c;而且非常风趣幽默&#xff0c;像看小说一样&#xff01;觉得太牛了&#xff0c;所以分享给大家。点这里可以跳转到教程。” 对于广大的软件工程师来说…

W806|CKLINK LITE|ICE调试|HardPoint|elf模板|CSDK|Debug|学习(4):CKLINK调试W806

目录 一、硬件连接 接线方式 错误提示 二、调试前准备 正常识别状态 wm_tool.exe缺失错误​ 三、flash配置 增加W806模板 compiler选项卡 Debug选项卡 ICE设置 正常连接信息 四、调试工程 添加硬断点 断点配置 仿真调试 下载固件 参考&#xff1a; 《手把手教…

《MySQL系列-InnoDB引擎28》表-约束详细介绍

约束 1 数据完整性 关系型数据库系统和文件系统的一个不同点是&#xff0c;关系数据库本身能保证存储数据的完整性&#xff0c;不需要应用程序的控制&#xff0c;而文件系统一般需要在程序端进行控制。当前几乎所有的关系型数据库都提供约束(constraint)机制&#xff0c;该机制…

群智能优化计算中的混沌映射

经实验证明&#xff0c;采用混沌映射产生随机数的适应度函数值有明显提高&#xff0c;用混沌映射取代常规的均匀分布的随机数发生器可以得到更好的结果&#xff0c;特别是搜索空间中有许多局部解时&#xff0c;更容易搜索到全局最优解&#xff0c;利用混沌序列进行种群初始化、…

基于Qt WebEngine 的Web仪器面板GUI程控技术

随着IIoT的发展&#xff0c;很多工业仪器也具备了远程管理的GUI。与早期使用串口进行命令交互不同&#xff0c;这些GUI可以直接在远程呈现数据。 作为希望对仪器、软件进行二次开发的小公司来说&#xff0c;会遇到GUI人工操作转自动化的需求。在无法通过串口等传统接口进行自动…

nextjs开发 + vercel 部署 ssr ssg

前言 最近想实践下ssr 就打算用nextjs 做一个人博客 &#xff0c; vercel 部署 提供免费域名&#xff0c;来学习实践下ssr ssg nextjs 一个轻量级的react服务端渲染框架 vercel 由 Next.js 的创建者制作 支持nextjs 部署 免费静态网站托管 初始化项目 npx create-next-app p…

【Linux】目录结构

Linux世界里&#xff0c;一切皆文件。 /bin&#xff1a;是Binary的缩写&#xff0c;这个目录存放着最经常使用的命令。&#xff08;常用&#xff09; /sbin&#xff1a;s就是Super User的意思&#xff0c;这里存放的是系统管理员使用的系统管理程序。 /home&#xff1a;存放普…

关于Pytorch中的张量学习

关于Pytorch中的张量学习 张量的概念和创建 张量的概念 Tensor是pytorch中非常重要且常见的数据结构&#xff0c;相较于numpy数组&#xff0c;Tensor能加载到GPU中&#xff0c;从而有效地利用GPU进行加速计算。但是普通的Tensor对于构建神经网络还远远不够&#xff0c;我们需…

实力加持!RestCloud完成多方国产化适配,携手共建信创生态

近年来&#xff0c;随着数字化建设进入深水区&#xff0c;企事业单位对信息安全重视程度与日俱增&#xff0c;核心技术自主可控已成为时代呼唤&#xff0c;国产化浪潮日益汹涌澎湃。近日&#xff0c;RestCloud在国产化方面取得新进展&#xff0c;完成了全部产品线信创环境的多方…

系统重装漏洞

zzcms系统重装漏洞 一、配置zzcms环境 1. 使用小皮搭建zzcms框架 2. 安装zzcms 按照下面的操作进行,傻瓜式操作即可 3. 打开网站 二、漏洞利用 在访问install目录的默认文件后,会出现zzcms安装向导 http://www.zzcms.com/install/index.php 但是会显示 “安装向导…

MQTT协议-发布消息(客户端向服务器发送)

MQTT协议-发布消息&#xff08;客户端向服务器发送&#xff09; 发布消息报文组成&#xff1a;https://blog.csdn.net/weixin_46251230/article/details/129414158 在分析完服务器下发到客户端的报文后&#xff0c;就可以参考JSON格式的有效载荷&#xff0c;将温湿度的值改为…

Linux发行版的backport

遇到一个问题,简要记录如下: base on ubuntu18.06 4.15内核,这版内核不支持一款intel的集成网卡,追踪内核代码的提交历史才发现,这款网卡是从linux-4.20才开始支持的,系统自带的这个Kernel版本不支持。 如果不允许升级内核,面对这种问题,社区的做法是把新内核的特性cher…