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

devtools/2024/9/23 8:33:11/
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/devtools/5532.html

相关文章

【QT教程】QT6与Python

QT6与Python 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费QT视…

将闲置的windows硬盘通过smb共享的方式提供给mac作为时间机器备份

1.windows端&#xff0c;开启smb共享 自行解决 2.mac端 磁盘工具-文件-新建映像-空白映像 假设你的名字为&#xff1a;backup 大小&#xff1a;350GB&#xff08;自己修改&#xff09; 格式&#xff1a;MacOS扩展&#xff08;日志式&#xff09; 分区&#xff1a;单个分区-A…

设计模式:代理模式

文章目录 一、什么是代理模式二、代理模式的结构1、介绍2、代码实现样例&#xff08;1&#xff09;静态代理&#xff08;2&#xff09;动态代理 三、代理模式的应用场景 一、什么是代理模式 为某一个对象提供一个代理或占位符&#xff0c;并由代理对象来控制对原对象的访问。 …

一步一步学习使用 MediaSource 实现动态媒体流

学习前的参考 为什么视频网站的视频链接地址是blob&#xff1f; - 掘金 MediaSource - Web API 接口参考 | MDN 在示例中前往下载源代码&#xff1a; netfix/demo/bufferWhenNeeded.html at gh-pages nickdesaulniers/netfix GitHub 下载 demo 目录&#xff0c;对 bufferW…

Spring+SpringMVC的知识总结

一:技术体系架构二:SpringFramework介绍三:Spring loC容器和核心概念3.1 组件和组件管理的概念3.1.1什么是组件:3.1.2:我们的期待3.1.3Spring充当组件管理角色(IOC)3.1.4 Spring优势3.2 Spring Ioc容器和容器实现3.2.1普通和复杂容器3.2.2 SpringIOC的容器介绍3.2.3 Spring IOC…

MySQL常见故障现象分析及解决办法

一、背景 MySQL作为广泛使用的关系型数据库管理系统&#xff0c;在日常使用中难免会遇到各种故障。本文将通过一个具体的案例&#xff0c;分析MySQL常见的故障现象&#xff0c;并提供相应的解决办法和代码示例。 二、故障现象 某企业使用的MySQL数据库服务器近期出现以下问题…

GPT-3.5和GPT-Plus的区别

GPT-3.5和GPT-Plus都是OpenAI开发的大型语言模型,但它们之间有一些区别: GPT-3.5就是大家熟知的ChatGPT GPT-Plus 是Open AI 的更强的AI模型GPT-4版本。两者区别是&#xff1a; 模型规模:GPT-Plus是GPT-3的一个更大版本,参数量更多。而GPT-3.5是GPT-3的一个优化版本,在参数量…

算法训练营第43天|LeetCode 1049.最后一块石头的重量Ⅱ 494.目标和 474.一和零

LeetCode 1049.最后一块石头的重量Ⅱ 题目链接&#xff1a; LeetCode 1049.最后一块石头的重量Ⅱ 代码&#xff1a; class Solution { public:int lastStoneWeightII(vector<int>& stones) {int sum 0;int size stones.size();for(int i0;i<size;i){sum st…