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

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

news 2026/5/17 23:40:13

目录

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>标签用于定义段落…...

编程日记 2024/4/17 15:24:08

NVIC简介

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

编程日记 2024/4/17 15:23:07

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

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

编程日记 2024/4/17 15:21:04

【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下批量化注释…...

编程日记 2024/4/17 15:20:02

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…...

编程日记 2024/4/17 15:18:00

C语言学习笔记之指针（二）

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

编程日记 2024/4/17 15:16:59

在Debian 12系统上安装Docker

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

编程日记 2024/4/17 15:15:57

策略者模式（代码实践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的知识&…...

编程日记 2024/4/17 15:11:53

vue2/Vue3项目中，通过请求接口来刷新列表中的某个字段（如：Axios）

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

编程日记 2024/4/17 15:10:52

Java多线程锁定

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

编程日记 2024/4/17 15:09:50

【C 数据结构】单链表

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

编程日记 2024/4/17 15:07:47

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

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

编程日记 2024/4/17 15:05:45

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

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

编程日记 2024/4/17 15:04:43

错误分析 （Machine Learning研习十九）

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

编程日记 2024/4/17 15:01:40

SQL系统函数知识点梳理（Oracle）

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

编程日记 2024/4/17 15:00:38

面试突击---MySQL索引

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

编程日记 2024/4/17 14:58:34

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

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

编程日记 2024/4/17 14:57:32

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

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

编程日记 2024/4/17 14:54:29

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…...

编程日记 2024/4/17 14:53:27

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

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

编程日记 2024/4/17 14:52:26

HttpOnly Cookie 深度解析

一、什么是 HttpOnly Cookie HttpOnly 是一个可以附加在 Set-Cookie 响应头上的标志位&#xff08;flag&#xff09;。当一个 Cookie 被标记为 HttpOnly 后&#xff0c;客户端脚本&#xff08;如 JavaScript&#xff09;将无法通过 document.cookie 等 API 访问该 Cookie&…...

编程新知 2026/5/17 11:10:53

【人生底稿 28】新疆出差终章：几番波折终汇报，尽兴踏归津门路

三日游玩尽数落幕&#xff0c;忙碌工作正式回归。轻松的闲暇时光悄然收尾&#xff0c;紧绷的工作状态再次上线。整趟新疆之行&#xff0c;在起伏辗转中迎来最终收尾。一、深夜复盘材料&#xff0c;彻夜待汇报游玩结束回到酒店&#xff0c;我没有松懈休息&#xff0c;静下心重新…...

编程新知 2026/5/17 10:18:19

将HermesAgent项目接入Taotoken的详细配置步骤与注意事项

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 将HermesAgent项目接入Taotoken的详细配置步骤与注意事项 本文旨在为开发者提供一份清晰的指南&#xff0c;帮助你将HermesAgent项…...

编程新知 2026/5/17 10:01:23

LVGUI字体瘦身实战：如何为你的IoT设备定制一个超小的中文字体库

LGVUI字体瘦身实战&#xff1a;为IoT设备定制超小中文字体库的工程化解决方案 在嵌入式物联网设备开发中&#xff0c;每一KB的Flash和RAM都弥足珍贵。当你的智能温控器需要显示"当前温度&#xff1a;25℃"或者电子秤要呈现"净重&#xff1a;0.5kg"时&#…...

编程新知 2026/5/17 9:57:20

快速免费解锁网易云音乐NCM格式：ncmdumpGUI完整使用指南

快速免费解锁网易云音乐NCM格式&#xff1a;ncmdumpGUI完整使用指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾在网易云音乐下载了心爱的歌曲&am…...

编程新知 2026/5/17 9:26:52

Wand-Enhancer：免费解锁WeMod专业版功能的终极本地增强工具

Wand-Enhancer&#xff1a;免费解锁WeMod专业版功能的终极本地增强工具 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 还在为WeMod专业版的高昂订阅费用…...

编程新知 2026/5/17 9:12:34

VHDL转Verilog终极指南：如何用VHD2VL v3.0快速完成硬件描述语言转换

VHDL转Verilog终极指南&#xff1a;如何用VHD2VL v3.0快速完成硬件描述语言转换 【免费下载链接】vhd2vl 项目地址: https://gitcode.com/gh_mirrors/vh/vhd2vl 在FPGA开发领域&#xff0c;VHDL和Verilog是两大主流硬件描述语言&#xff0c;但团队协作或项目迁移时经常…...

编程新知 2026/5/17 9:06:18

NS-USBLoader：Switch游戏管理终极指南 - 如何实现一键安装与系统引导？

NS-USBLoader&#xff1a;Switch游戏管理终极指南 - 如何实现一键安装与系统引导&#xff1f; 【免费下载链接】ns-usbloader Awoo Installer and GoldLeaf uploader of the NSPs (and other files), RCM payload injector, application for split/merge files. 项目地址: ht…...

编程新知 2026/5/17 8:19:39

开源技能图谱工具SkillPort：Go语言构建的知识管理利器

1. 项目概述&#xff1a;一个技能图谱与知识管理的开源利器 最近在整理个人技术栈和团队知识库时&#xff0c;我一直在寻找一个能直观展示技能关联、又能深度管理学习路径的工具。市面上的笔记软件要么太“平”&#xff0c;只能线性记录&#xff1b;要么太“重”&#xff0c;像…...

编程新知 2026/5/17 6:41:08

MCP服务器开发指南：为AI助手构建安全可控的外部工具扩展

1. 项目概述&#xff1a;一个为AI助手赋能的MCP服务器最近在折腾AI应用开发的朋友&#xff0c;可能都绕不开一个词&#xff1a;MCP。全称是Model Context Protocol&#xff0c;你可以把它理解成一套标准化的“插件协议”。它让像Claude、Cursor这类AI助手&#xff0c;能够安全、…...

编程新知 2026/5/17 6:36:31