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

news/2024/11/15 4:52:41/
htmledit_views">

目录

HTML段落标签

HTML换行标签

HTML格式化标签

加粗标签

倾斜标签

删除线标签

下划线标签

HTML水平线标签


HTML段落标签

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

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

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

注意:

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

示例代码:

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/>标签为单标签

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

示例代码:

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>这是第一句话,接下来需要换行<br/>已经换行
</body>
</html>

效果如下:

HTML格式化标签

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

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

📌

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

加粗标签

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><strong>这是一个加粗文本</strong><br>这是一个普通文本
</body>
</html>

效果如下:

倾斜标签

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>

效果如下:

删除线标签

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>

效果如下:

下划线标签

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>标签可以在网页上实现水平分割线的效果

📌

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

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><hr>这是分割线下方的测试文本
</body>
</html>

效果如下:


http://www.ppmy.cn/news/1426571.html

相关文章

动手学大模型应用开发--Chapter 02 提示词工程

文章目录 前言一、学习目标二、学习知识点概要1.1 Prompting1.2 Prompting tuning1.3 Prompting Learning1.3.1 定义1.3.2 运作原理 三、总结四、引申阅读 前言 本学习笔记为datawhale动手学大模型应用开发的第二章&#xff0c;学习链接为&#xff1a; https://datawhalechina…

【算法】二分查找

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、二分查找二、查找元素的第一个和最后一个位置三、x的平方根四、搜索插入位置五、山脉数组的峰顶索引…

吴恩达机器学习笔记 三十五 异常检测与监督学习

什么时候选择异常检测&#xff1f; 正样本 ( y 1 ) 的数量非常少 负样本 ( y 0 ) 的数量非常多 有很多不同的异常&#xff0c;现有的算法不能从正样本中得知什么是异常&#xff0c;或未来可能出现完全没见过的异常情况。 例如金融欺诈&#xff0c;隔几个月或几年就有新的…

格瑞纳电子邀您参观2024杭州快递物流展

参展企业介绍 北京格瑞纳电子产品有限公司是一家立足于专业科学技术领域集产品代理、培训咨询和个性化增值服务的高科技公司&#xff0c;于2009年成立于北京&#xff0c;立足于复杂系统仿真领域&#xff0c;主营业务以仿真分析软件产品为中心&#xff0c;提供集产品研发、销售…

Android Jetpack学习系列——Room

关于Room&#xff1a; Room是Android Jetpack组件之一&#xff0c;旨在为Android应用程序提供一种简单、强大且易于使用的本地数据库访问解决方案。 关键特性&#xff1a; 1.基于SQLite封装&#xff1a;Room是基于SQLite数据库引擎构建的&#xff0c;提供了面向对象的API来与…

bug是测不完的,根本测不完

恼火&#xff0c;测不完的bug&#xff0c;异常场景的bug要测&#xff0c;样式的问题要测&#xff0c;一旦变动一个需求&#xff0c;还要全盘通策&#xff0c;活生生的卖命啊&#xff01; 简直不知道要怎么测试了。 那就只走正常的业务流程&#xff0c;时间多再异常场景测试吧。…

包装类的认识

前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&#x1…

PostgreSQL 窗口函数汇总

文章目录 前言一、什么是窗口函数?二、常用的4类窗口函数三、PARTITION BY 子句四、窗口函数示例1. 聚合计算1.1 sum() 函数1.2 count() 函数1.3 avg() 函数2. 分组排序2.1 row_number() 函数2.2 rank() 函数2.3 dense_rank() 函数3. 分组查询