当前位置: 首页 > news >正文

HTML段落标签、换行标签、文本格式化标签与水平线标签

目录

HTML段落标签

HTML换行标签

HTML格式化标签

加粗标签

倾斜标签

删除线标签

下划线标签

HTML水平线标签


HTML段落标签

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

为文本分段可以使用段落标签<p> </p>包裹需要放在一段的文字

<p>这是第一个段落</p>
<p>这是第二个段落</p>

注意:

  1. 在网页界面显示时,段落和段落之间存在一个较大的空隙
  2. 当前的<p>标签描述的段落,前面还没有缩进
  3. 文本在一个段落中会根据浏览器窗口的大小自动换行
  4. HTML 内容首尾处的换行, 空格均无效
  5. 在 HTML 中文字之间输入的多个空格只相当于一个空格.
  6. HTML中直接输入换行不会真的换行,而是相当于一个空格

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落标签</title>
</head>
<body><p>这是第一个段落</p>当前段落内容第二行内容<p>这是第二个段落</p>当前段落内容第二行内容
</body>
</html>

效果如下:

HTML换行标签

在HTML中,常见用<br/>标签表示换行,也可以用<br>标签,但是不规范

📌

注意<br/>标签为单标签

这是第一句话,接下来需要换行<br/>已经换行

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落标签</title>
</head>
<body>这是第一句话,接下来需要换行<br/>已经换行
</body>
</html>

效果如下:

HTML格式化标签

在HTML中,可以使用下面的标签实现对应的属性,并且这些标签可以嵌套使用

  1. 加粗: <strong> 标签 和 <b> 标签
  2. 倾斜: <em> 标签 和 <i> 标签
  3. 删除线: <del> 标签 和 <s> 标签
  4. 下划线: <ins> 标签 和 <u> 标签

📌

在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同,但是为了更加强调文本效果,提高代码可读性,推荐用第一种标签

加粗标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粗体测试</title>
</head>
<body><h1>下面是加粗文本和非加粗文本的对比</h1><strong>这是一个加粗文本</strong><br>这是一个普通文本
</body>
</html>

效果如下:

倾斜标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倾斜标签测试</title>
</head>
<body><h1>下面是倾斜文本和非倾斜文本对比</h1><em>这是一个倾斜的文本</em><br>这是一个普通文本
</body>
</html>

效果如下:

删除线标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>删除线标签测试</title>
</head>
<body><h1>下面是有删除线和没有删除线的文本对比</h1><del>这是有删除线的文本</del><br>这是一个普通文本
</body>
</html>

效果如下:

下划线标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下划线标签测试</title>
</head>
<body><h1>下面是有下划线的文本和无下划线的文本对比</h1><ins>这是一个有下划线的文本</ins><br/>这是一个普通文本
</body>
</html>

效果如下:

HTML水平线标签

在HTML中,使用<hr>标签可以在网页上实现水平分割线的效果

📌

注意,水平分割线标签为单标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平线标签测试</title>
</head>
<body><h1>当前标签下面的横线为水平线</h1><hr>这是分割线下方的测试文本
</body>
</html>

效果如下:

相关文章:

HTML段落标签、换行标签、文本格式化标签与水平线标签

目录 HTML段落标签 HTML换行标签 HTML格式化标签 加粗标签 倾斜标签 删除线标签 下划线标签 HTML水平线标签 HTML段落标签 在网页中&#xff0c;要把文字有条理地显示出来&#xff0c;就需要将这些文字分段显示。在 HTML 标签中&#xff0c;<p>标签用于定义段落…...

NVIC简介

NVIC&#xff08;Nested Vectored Interrupt Controller&#xff09;是ARM处理器中用于中断管理的一个重要硬件模块。它负责处理来自多个中断源的中断请求&#xff0c;并根据中断的优先级来安排处理器执行相应的中断服务例程&#xff08;ISR&#xff09;。NVIC是ARM Cortex-M系…...

LeetCode-924. 尽量减少恶意软件的传播【深度优先搜索 广度优先搜索 并查集 图 哈希表】

LeetCode-924. 尽量减少恶意软件的传播【深度优先搜索 广度优先搜索 并查集 图 哈希表】 题目描述&#xff1a;解题思路一&#xff1a;解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给出了一个由 n 个节点组成的网络&#xff0c;用 n n 个邻接矩阵图…...

【linux】yum 和 vim

yum 和 vim 1. Linux 软件包管理器 yum1.1 什么是软件包1.2 查看软件包1.3 如何安装软件1.4 如何卸载软件1.5 关于 rzsz 2. Linux编辑器-vim使用2.1 vim的基本概念2.2 vim的基本操作2.3 vim命令模式命令集2.4 vim底行模式命令集2.5 vim操作总结补充&#xff1a;vim下批量化注释…...

excel试题转word格式

序号试题选项答案 格式如上。输出后在做些适当调整就可以。 import pandas as pd from docx import Document from docx.shared import Inches# 读取Excel文件 df pd.read_excel(r"你的excel.xlsx")# 创建一个新的Word文档 doc Document()# 添加标题 doc.add_headi…...

C语言学习笔记之指针(二)

指针基础知识&#xff1a;C语言学习笔记之指针&#xff08;一&#xff09;-CSDN博客 目录 字符指针 代码分析 指针数组 数组指针 函数指针 代码分析&#xff08;出自《C陷阱和缺陷》&#xff09; 函数指针数组 指向函数指针数组的指针 回调函数 qsort() 字符指针 一…...

在Debian 12系统上安装Docker

Docker 在 Debian 12 上的安装 安装验证测试更多信息 引言 在现代的开发环境中&#xff0c;容器技术发挥着至关重要的作用。Docker 提供了快速、可靠和易于使用的容器化解决方案&#xff0c;使开发人员和 DevOps 专业人士能够以轻松的方式将应用程序从一个环境部署到另一个环…...

策略者模式(代码实践C++/Java/Python)————设计模式学习笔记

文章目录 1 设计目标2 Java2.1 涉及知识点2.2 实现2.2.1 实现两个接口飞行为和叫行为2.2.2 实现Duck抽象基类&#xff08;把行为接口作为类成员&#xff09;2.2.3 实现接口飞行为和叫行为的具体行为2.2.4 具体实现鸭子2.2.5 模型调用 3 C&#xff08;用到了大量C2.0的知识&…...

vue2/Vue3项目中,通过请求接口来刷新列表中的某个字段(如:Axios)

vue2/Vue3项目中&#xff0c;通过请求接口来刷新列表中的某个字段。可以使用 Vue 的异步请求库&#xff08;如 Axios&#xff09;来发送请求&#xff0c;并在请求成功后更新相应的字段。 示例如下&#xff08;Vue2&#xff09;&#xff1a; 简单的示例如下&#xff0c;假设列…...

Java多线程锁定

前言 利用多线程编程虽然能极大地提升运行效率&#xff0c;但是多线程本身的不稳定也会带来一系列的问题&#xff0c;其中最经典莫过于售票问题&#xff1b;这时就需要人为地加以限制和干涉已解决问题&#xff0c;譬如今日之主题——锁定。 锁定是我们在多线程中用来解决售票…...

【C 数据结构】单链表

文章目录 【 1. 基本原理 】1.1 链表的节点1.2 头指针、头节点、首元节点 【 2. 链表的创建 】2.0 创建1个空链表&#xff08;仅有头节点&#xff09;2.1 创建单链表&#xff08;头插入法&#xff09;*2.2 创建单链表&#xff08;尾插入法&#xff09; 【 3. 链表插入元素 】【…...

[MAUI]集成富文本编辑器Editor.js至.NET MAUI Blazor项目

文章目录 获取资源从源码构建从CDN获取获取扩展插件 创建项目创建控件创建Blazor组件初始化保存销毁编写渲染逻辑 实现只读/编辑功能切换模式获取只读模式状态响应切换事件 实现明/暗主题切换项目地址 Editor.js 是一个基于 Web 的所见即所得富文本编辑器&#xff0c;它由CodeX…...

Spring Boot | Spring Boot 整合 “Servlet三大组件“ ( Servlet / Filter / Listene )

目录: Spring Boot 整合 "Servlet三大组件" &#xff1a;1. 使用 "组件注册" 的方式 "整合Servlet三大组件" ( 实际操作为 : 创建自定义的"三大组件"对象 结合刚创建"的自定义组件对象"来 将 XxxRegistrationBean对象 通过…...

错误分析 (Machine Learning研习十九)

错误分析 您将探索数据准备选项&#xff0c;尝试多个模型&#xff0c;筛选出最佳模型&#xff0c;使用 Grid SearchCV微调其超参数&#xff0c;并尽可能实现自动化。在此&#xff0c;我们假设您已经找到了一个有前途的模型&#xff0c;并希望找到改进它的方法。其中一种方法就…...

SQL系统函数知识点梳理(Oracle)

这里写目录标题 函数系统函数转换函数to_date()to_char()将数值转换成字符格式 添加货币符号将日期转换成字符 其他不常用的转换函数 字符型函数连接函数大小写转换函数大写转换小写转换首字母大写&#xff0c;其余的小写 替换函数去除空格函数截取函数填充函数获取字符长度函数…...

面试突击---MySQL索引

面试突击---MYSQL索引 面试表达技巧&#xff1a;1、谈一下你对于mysql索引的理解&#xff1f;&#xff08;为什么mysql要选择B树来存储索引&#xff09;2、索引有哪些分类&#xff1f;3、聚簇索引与非聚簇索引4、回表、索引覆盖、最左匹配原则、索引下推&#xff08;1&#xff…...

关注 | 我国已对百种产品实施强制性产品认证

市场监管总局在7日举行的新闻发布会上介绍&#xff0c;该局日前发布《市场监管总局关于对商用燃气燃烧器具等产品实施强制性产品认证管理的公告》&#xff0c;对具有较高安全风险的商用燃气燃烧器具、阻燃电线电缆、电子坐便器、电动自行车乘员头盔、可燃气体探测报警产品、水性…...

虚幻引擎架构自动化及蓝图编辑器高级开发进修班

课程名称&#xff1a;虚幻引擎架构自动化及蓝图编辑器高级开发进修班 课程介绍 大家好 我们即将推出一套课程 自动化系统开发。 自动化技术在项目开发的前中后期都大量运用。如何您是一家游戏公司&#xff0c;做的是网络游戏&#xff0c;是不是经常会遇到程序员打包加部署需…...

Weakly Supervised Audio-Visual Violence Detection 论文阅读

Weakly Supervised Audio-Visual Violence Detection 论文阅读 摘要III. METHODOLOGYA. Multimodal FusionB. Relation Modeling ModuleC. Training and Inference IV. EXPERIMENTSV. CONCLUSION阅读总结 文章信息&#xff1a; 发表于&#xff1a;IEEE TRANSACTIONS ON MULTIME…...

华为海思数字芯片设计笔试第六套

声明 下面的题目作答都是自己认为正确的答案&#xff0c;并非官方答案&#xff0c;如果有不同的意见&#xff0c;可以评论区交流。 这些题目也是笔者从各个地方收集的&#xff0c;感觉有些题目答案并不正确&#xff0c;所以在个别题目会给出自己的见解&#xff0c;欢迎大家讨论…...

重绘和重排:概念、区别和应用示例

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…...

创建k8s deploy yaml文件的imagePullSecrets语句

镜像仓库是harbor kubectl create secret docker-registry key --docker-server192.168.0.190 --docker-usernameadmin --docker-passwordHarbor12345...

大模型预测结果导入到Doccano,人工修正预测不准的数据

背景 使用大语言模型做实体识别的实验时&#xff0c;发现大模型关于实体的边界预测一直不准。 主要原因在于当时找了很多同学标注数据&#xff0c;由于不同组同学关于实体的边界没有统一&#xff0c;故导致数据集中实体边界也没统一。 &#xff08;找太多人标&#xff0c;会有…...

python三方库_ciscoconfparse学习笔记

文章目录 介绍使用基本原理父子关系 属性ioscfg 获取配置信息,返回列表is_config_line 判断是否是配置行is_intf 判断IOSCfgLine是不是interfaceis_subintf 判断IOSCfgLine是不是子接口lineage 不知道用法is_ethernet_intf 判断IOSCfgLine是否是以太网接口is_loopback_intf 判断…...

HDFS详解(Hadoop)

Hadoop 分布式文件系统&#xff08;Hadoop Distributed File System&#xff0c;HDFS&#xff09;是 Apache Hadoop 生态系统的核心组件之一&#xff0c;它是设计用于存储大规模数据集并运行在廉价硬件上的分布式文件系统。 1. 分布式存储&#xff1a; HDFS 将文件分割成若干块…...

python创建word文档并向word中写数据

一、docx库的安装方法 python创建word文档需要用到docx库&#xff0c;安装命令如下&#xff1a; pip install python-docx 注意&#xff0c;安装的是python-docx。 二、使用方法 使用方法有很多&#xff0c;这里只介绍创建文档并向文档中写入数据。 import docxmydocdocx.Do…...

MongoDB的安装配置及使用

文章目录 前言一、MongoDB的下载、安装、配置二、检验MongoDB是否安装成功三、Navicat 操作MongoDB四、创建一个集合&#xff0c;存放三个文档总结 前言 本文内容&#xff1a; &#x1f4ab; MongoDB的下载、安装、配置 &#x1f4ab; 检验MongoDB是否安装成功 ❤️ Navicat 操…...

Go学习路线

Go学习路线 文章目录 Go学习路线入门阶段一、Go基础和Goland的安装二、学习日志文件及配置文件三、学习mysql四、html&#xff0c;css&#xff0c;js快速入门五、写一个简单的前后端分离的记事本项目六、Linux快速入门七、Docker快速入门八、Git命令快速入门九、使用Docker打包…...

安全大脑与盲人摸象

21世纪是数字科技和数字经济爆发的时代&#xff0c;互联网正从网状结构向类脑模型进行进化&#xff0c;出现了结构和覆盖范围庞大&#xff0c;能够适应不同技术环境、经济场景&#xff0c;跨地域、跨行业的类脑复杂巨型系统。如腾讯、Facebook等社交网络具备的神经网络特征&…...

如何使用Git-Secrets防止将敏感信息意外上传至Git库

关于Git-Secrets Git-secrets是一款功能强大的开发安全工具&#xff0c;该工具可以防止开发人员意外将密码和其他敏感信息上传到Git库中。 Git-secrets首先会扫描提交的代码和说明&#xff0c;当与用户预先配置的正则表达式模式匹配时&#xff0c;便会阻止此次提交。该工具的优…...

Day 14 网络协议

常见网络设备&#xff1a;交换机 路由器 中继器 多协议网关&#xff08;路由器的前身&#xff09; 交换机&#xff1a;用于连接统一网络的设备&#xff0c;实现内网设备通信。 从广义上分为&#xff1a;局域网交换机&#xff0c;广域网交换机 从网络构成分为&#xff1a;接…...

msyql中SQL 错误 [1118] [42000]: Row size too large (> 8126)

场景&#xff1a; CREATE TABLE test-qd.eqtree (INSERT INTO test.eqtree (idocid VARCHAR(50) NULL,sfcode VARCHAR(50) NULL,sfname VARCHAR(50) NULL,sfengname VARCHAR(50) NULL,…… ) ENGINEInnoDB DEFAULT CHARSETutf8 COLLATEutf8_general_ci;或 alter table eqtre…...

实验六 智能手机互联网程序设计(微信程序方向)实验报告

实验目的和要求 请完成创建图片库应用&#xff0c;显示一系列预设的图片。 提供按钮来切换显示不同类别的图片。 二、实验步骤与结果&#xff08;给出对应的代码或运行结果截图&#xff09; 1.WXML <view> <button bindtap"showAll">所有图片</but…...

Linux环境下,让Jar项目多线程部署成为可能

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Linux环境下&#xff0c;让Jar项目多线程部署成为可能 前言背景介绍使用sh脚本实现使用systemd来实现使用docker-compose实现 前言 在当今互联网时代&#xff0c;应用程序的高可用性和性能是至关重要…...

k8s调度场景

15个KUBERNETES调度情景实用指南 Kubernetes调度是确保集群中的Pod在适当节点上运行的关键组件。通过灵活配置调度策略&#xff0c;可以提高资源利用率、负载平衡和高可用性。 在本文中&#xff0c;我们将深入探讨一些实际的Kubernetes调度场景&#xff0c;并提供相应的配置示…...

基于小程序实现的餐饮外卖系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…...

家居网购项目(手写分页)

文章目录 1.后台管理—分页显示1.程序框架图2.编写数据模型Page.java 3.编写dao层1.修改FurnDao增加方法 2.修改FurnDaoImpl增加方法 3.单元测试FurnDaoTest 4.编写service层1.修改FurnService增加方法 2.修改FurnServiceImpl增加方法3.单元测试FurnServiceTest 5.编写DataUtil…...

goland2024安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 Goland 是一款由 JetBrains 公司开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于 Go 语言的开发。它提供了丰富的功能和工具&#xff0c;帮助开发者更高效地编写、调试和管理 Go 语言项目。 功能特点&#x…...

35、链表-LRU缓存

思路&#xff1a; 首先要了解LRU缓存的原理&#xff0c;首先定下容量&#xff0c;每次get请求和put请求都会把当前元素放最前/后面&#xff0c;如果超过容量那么头部/尾部元素就被移除&#xff0c;所以最近最少使用的元素会被优先移除&#xff0c;保证热点数据持续存在。 不管放…...

数据结构速成--栈

由于是速成专题&#xff0c;因此内容不会十分全面&#xff0c;只会涵盖考试重点&#xff0c;各学校课程要求不同 &#xff0c;大家可以按照考纲复习&#xff0c;不全面的内容&#xff0c;可以看一下小编主页数据结构初阶的内容&#xff0c;找到对应专题详细学习一下。 目录 一…...

算法练习第15天|226.翻转二叉树

226.翻转二叉树 力扣链接https://leetcode.cn/problems/invert-binary-tree/description/ 题目描述&#xff1a; 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&am…...

C#面向对象——封装、封装案例示例

C#面向对象——封装 什么是封装? &#xff08;1&#xff09;封装是将数据和操作数据的方法&#xff08;行为&#xff09;封装在一起。 &#xff08;2&#xff09;程序中封装的体现&#xff1a;属性&#xff0c;方法&#xff0c;类&#xff0c;接口&#xff0c;命名空间&#…...

【InternLM 实战营第二期-笔记3】茴香豆:搭建你的 RAG 智能助理

书生浦语是上海人工智能实验室和商汤科技联合研发的一款大模型,很高兴能参与本次第二期训练营&#xff0c;我也将会通过笔记博客的方式记录学习的过程与遇到的问题&#xff0c;并为代码添加注释&#xff0c;希望可以帮助到你们。 记得点赞哟(๑ゝω╹๑) 茴香豆&#xff1a;搭建…...

Advanced RAG 03:运用 RAGAs 与 LlamaIndex 评估 RAG 应用

编者按&#xff1a;目前&#xff0c;检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;技术已经广泛使用于各种大模型应用场景。然而&#xff0c;如何准确评估 RAG 系统的性能和效果&#xff0c;一直是业界和学界共同关注的重点问题。若无法…...

leetcode

找到字符串中所有字母异位词 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09; 示例 1: 输入: s "…...

Unity DOTS《群体战斗弹幕游戏》核心技术分析之3D角色动画

最近DOTS发布了正式的版本, 我们来分享现在流行基于群体战斗的弹幕类游戏&#xff0c;实现的核心原理。今天给大家介绍大规模战斗群体3D角色的动画如何来实现。 DOTS 对角色动画支持的局限性 截止到Unity DOTS发布的版本1.0.16,目前还是无法很好的支持3D角色动画。在DOTS 的ba…...

react异步组件如何定义使用 标准使用方法

目录 默认导出和命名导出的格式 默认导出的组件 使用方式 命名导出的组件 使用方式 默认导出和命名导出的格式 默认导出: // person.js const person {name: Alice,age: 30 };export default person;命名导出&#xff1a; // math.js export const add (a, b) > a b; exp…...

React + Ts + Vite + Antd 项目搭建

1、创建项目 npm create vite 项目名称 选择 react 选择 typescript 关闭严格模式 建议关闭严格模式&#xff0c;因为不能自动检测副作用&#xff0c;有意双重调用。将严格模式注释即可。 2、配置sass npm install sass 更换所有后缀css为sass vite.config.ts中注册全局样式 /…...

js爬虫puppeteer库 解决网页动态渲染无法爬取

我们爬取这个网址上面的股票实时部分宇通客车(600066)_股票价格_行情_走势图—东方财富网 我们用正常的方法爬取会发现爬取不下来&#xff0c;是因为这个网页这里是实时渲染的&#xff0c;我们直接通过网址接口访问这里还没有渲染出来 于是我们可以通过下面的代码来进行爬取: …...

代码随想录:二叉树5

目录 102.二叉树的层序遍历 题目 代码&#xff08;队列实现&#xff09; 107.二叉树的层序遍历II 题目 代码 199.二叉树的右视图 题目 代码 637.二叉树的层平均值 题目 代码 102.二叉树的层序遍历 题目 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍…...