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

前端——6.文本格式化标签和＜div＞和＜span＞标签

news 2026/3/28 0:53:59

这篇文章，我们来讲一下HTML中的文本格式化标签

目录

1.文本格式化标签

1.1介绍

1.2代码演示

1.3小拓展

2.div和span标签

2.1介绍

2.2代码演示

2.3解释

3.小结

1.文本格式化标签

在网页中，有时需要为文字设置粗体、斜体和下划线等效果，这是就需要用到HTML中的文本格式化标签了，使文字以特殊的方式显示。

1.1介绍

标签语义：突出重要性，比普通文字更重要

下面看一下该类型的标签有哪些：

语义标签说明
加粗<strong></strong>或<b></b>更推荐使用<strong>标签加粗，语义更强烈
倾斜<em></em>或<i></i>更推荐使用<em>标签倾斜，语义更强烈
删除线<del></del>或<s></s>更推荐使用<del>标签做删除线，语义更强烈
下划线<ins></ins>或<u></u>

更推荐使用<ins>标签做下划线，语义更强烈

重点牢记：加粗标签和下划线标签

1.2代码演示

下面进行代码演示：

OK，下面加上相应的标签再来看一下吧：

代码如下：

<!DOCTYPE html>
<html lang="en">
<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><h3>我是<strong>加粗</strong>标签<br /><br /></h3>这也是<b>加粗</b>标签<br /><br /><h3>我是<em>倾斜</em>标签<br /><br /></h3>这也是<i>倾斜</i>标签<br /><br /><h3>我是<del>删除线</del>标签<br /><br /></h3>这也是<s>删除线</s>标签<br /><br /><h3>我是<ins>下划线</ins>标签<br /><br /></h3>这也是<u>下划线</u>标签<br /><br />
</body>
</html>

1.3小拓展

从上面的样例中，我们可以体会到，HTML是一种比较“死”的语言，意思是说，你想干什么事，想要什么效果，必须加标签，必须在想要的位置给相应的内容加标签，不管这样加是否会别扭，相要这个效果，就必须给他直接套上标签，并且，这个效果还只是在标签的内部生效，一旦出了这个标签的范围，对不起，没效果了。与java中的变量作用域类型！

2.div和span标签

下面，我们来介绍一下<div>和<span>标签

2.1介绍

<div>和<span>标签是没有语义的，它们就是一个盒子，里面随便放内容的

代码格式：

<div>这是一定div块</div>
<span>这是一个span块</span>

注意：div是division的缩写，表示分割、分区。span意为跨度、跨距

特点：

  1. <div>标签用来布局，但是现在一行只能放一个<div>，是一个独占一行的大盒子
  2. <span>标签用来布局，一行上可以放多个<span>，是一个小盒子

上面说的有点懵，没关系，我们看下面的代码，然后有形象的解释。

2.2代码演示

下面，我们来演示一下div块和span块的效果：

如果，我们在div块后面写其他内容，我们来看一下效果：

下面看一下span块的效果：

 不好看，调整下格式：

代码如下：

<!DOCTYPE html>
<html lang="en">
<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><div>这是一个div块，它独占一行</div>123456<div>这是另一个div块，它也独占一行</div>789012<br /><span>阿里</span><span>腾讯</span><span>百度</span><span>字节</span>
</body>
</html>

2.3解释

这两个是比较抽象的，不太好懂，下面用两个例子来解释一下

例一：看一下淘宝网

 例二：

3.小结

这篇文章讲了文本格式化标签，和div与span标签，其中div是比较重要的，后面写页面时会用到许多的 

相关文章：

前端——6.文本格式化标签和＜div＞和＜span＞标签

这篇文章&#xff0c;我们来讲一下HTML中的文本格式化标签 目录 1.文本格式化标签 1.1介绍 1.2代码演示 1.3小拓展 2.div和span标签 2.1介绍 2.2代码演示 2.3解释 3.小结 1.文本格式化标签 在网页中&#xff0c;有时需要为文字设置粗体、斜体和下划线等效果&#xf…...

编程日记 2023/3/10 17:13:08

浅谈Xpath注入漏洞

目录 知识简介 攻击简介 基础语法 语法演示 漏洞简介 漏洞原理 漏洞复现 Xpath盲注 知识简介 攻击简介 XPath注入攻击是指利用XPath 解析器的松散输入和容错特性&#xff0c;能够在 URL、表单或其它信息上附带恶意的XPath 查询代码&#xff0c;以获得权限信息的访问权…...

编程日记 2023/3/10 17:12:07

Oracle LogMiner分析归档日志

目录&#xff1a;Oracle LogMiner分析归档日志一、准备测试环境1、开启数据库归档日志2、打开数据库最小附加日志3、设置当前session时间日期格式二、创建测试数据1、创建数据2、数据落盘三、日志发掘测试挖掘在上次归档的Redo Log File1.确定最近归档的Redo Log File2.指定要分…...

编程日记 2023/3/10 17:11:03

趣味三角——第15章——傅里叶定理

第15章 傅里叶定理(Fourier’s Theorem) Fourier, not being noble, could not enter the artillery, although he was a second Newton. (傅立叶出生并不高贵&#xff0c;因此按当时的惯例进不了炮兵部队&#xff0c;虽然他是第二个牛顿。) —Franois Jean Dominique Arag…...

编程日记 2023/3/10 17:09:59

市场营销的核心是什么？

之所以写下「市场营销的核心是什么&#xff1f;」这篇文章&#xff0c;是因为这几天刚读完了《经理人参阅&#xff1a;市场营销》这本书。作为一个有着近十年工作经验的市场营销从业人员&#xff0c;看完这本书也产生了很多新的想法&#xff0c;也想记录一下&#xff0c;遂成此…...

编程日记 2023/3/10 17:08:56

c/cpp - 多线程/进程 多进程

c/cpp - 多线程/进程 多进程多进程创建多进程进程等待多进程 宏观上 两个进程完全并发的 父子进程具有互相独立的进程空间 父进程结束&#xff0c;不影响子进程的执行 创建多进程 #include <sys/types.h> #include <unistd.h> #include <stdio.h>int main()…...

编程日记 2023/3/10 17:07:52

MySQL必知必会 | 存储过程、游标、触发器

使用存储过程 存储过程 简单来说就是为了以后的使用而保存的一条或多条MySQL语句的集合。 我觉得就是封装了一组sql语句 为什么需要存储过程&#xff08;简单来说就是&#xff0c;简单、安全、高性能 通过把处理封装在容易使用的单元中&#xff0c;简化复杂操作所有开发人员…...

编程日记 2023/3/10 17:06:50

优化Facebook广告ROI的数据驱动方法：从投放到运营

“投放广告并不是最终的目的&#xff0c;关键在于如何最大程度地利用数据驱动的方法来提高广告投放的回报率&#xff08;ROI&#xff09;”Facebook广告是现代数字营销中最为常见和重要的广告形式之一。但是&#xff0c;要让Facebook广告真正发挥作用&#xff0c;需要通过数据驱…...

编程日记 2023/3/10 17:05:47

动态规划入门经典问题讲解

最近开始接触动态规划问题&#xff0c;以下浅谈&#xff08;或回顾&#xff09;一下这些问题的求解过程。解题思路对于动态规划问题&#xff0c;由于最终问题的求解需要以同类子问题作为基础&#xff0c;故需要定义一个dp数组&#xff08;一维或二维&#xff09;来记录问题求解…...

编程日记 2023/3/10 17:04:44

快速入门深度学习1（用时1h）

速通《动手学深度学习》1写在最前面0.内容与结构1.深度学习简介1.1 问题引入1.2 思路&#xff1a;逆向思考1.3 跳过1.4 特点1.5 小结2.预备知识&#xff08;MXNet版本&#xff0c;学错了。。。。&#xff09;2.1 获取和运行本书的代码2.2 数据操作2.2.1 略过2.2.2 小结2.3 自动…...

编程日记 2023/3/10 17:03:41

PaddleOCR关键信息抽取(KIE)的训练(SER训练和RE训练)错误汇总

1.SER训练报错: SystemError: (Fatal) Blocking queue is killed because the data reader raises an exception 1.1.问题描述 在执行训练任务的时候报错 单卡训练 python3 tools/train.py -c train_data/my_data/ser_vi_layoutxlm_xfund_zh.yml错误信息如下&#xff1a; T…...

编程日记 2023/3/10 17:02:36

信息收集之搜索引擎

Google Hacking 也可以用百度&#xff0c;不过谷歌的搜索引擎更强大 site 功能&#xff1a;搜索指定域名的网页内容&#xff0c;可以用来搜索子域名、跟此域名相关的内容 示例&#xff1a; site:zhihu.com 搜索跟zhihu.com相关的网页“web安全” site:zhihu.com 搜索zhihu…...

编程日记 2023/3/10 17:01:33

Flutter（四）布局类组件

目录布局类组件简介布局原理与约束线性布局&#xff08;Row和Column&#xff09;弹性布局流式布局&#xff08;Wrap、Flow&#xff09;层叠布局&#xff08;Stack、Positioned&#xff09;对齐与相对定位&#xff08;Align&#xff09;Align和Stack对比Center组件LayoutBuilder…...

编程日记 2023/3/10 17:00:29

【黑马】Java基础从入门到起飞目录合集

视频链接&#xff1a; Java入门到起飞&#xff08;上部&#xff09;&#xff1a;BV17F411T7AoJava入门到起飞&#xff08;下部&#xff09;&#xff1a;BV1yW4y1Y7Ms 学习时间&#xff1a; 2023/02/01 —— 2023/03/09断断续续的学习&#xff0c;历时大概37天&#xff0c;完结撒…...

编程日记 2023/3/10 16:59:25

PMP考前冲刺3.10 | 2023新征程，一举拿证

题目1-2&#xff1a;1.在最近的一次耗时四周的迭代中&#xff0c;赫克托尔所在的敏捷团队刚完成了10 个用户故事点的开发、测试和发布&#xff0c;那么团队的速度是&#xff1f;A. 10B. 4C. 5D.402.产品负责人奥佩&#xff0c;倾向于在短周期内看到工作产品的新版本&#xff0c…...

编程日记 2023/3/10 16:58:22

JavaScript Math常用方法

math是JavaScript的一个内置对象&#xff0c;它提供了一些数学属性和方法&#xff0c;可以对数字进行计算&#xff08;用于Number类型&#xff09;。 math和其他全局对象不同&#xff0c;它不是一个构造器&#xff0c;math的所有方法和属性都是静态的&#xff0c;直接使用并传入…...

编程日记 2023/3/10 16:57:18

【C++】模板进阶

文章目录一、非类型模板参数1、非类型模板参数2、C11 中的 array 类二、模板的特化1、模板特化的概念2、函数模板特化3、类模板特化3.1 全特化3.2 偏特化三、模板的分离编译四、模板总结一、非类型模板参数 1、非类型模板参数 模板参数分为类型形参与非类型形参&#xff0c;类…...

编程日记 2023/3/10 16:56:07

三板斧解决leetcode的链表题

在《波奇学单链表》中我们提到单链表的两个特点单向性。头节点尾节点的特殊性导致分类讨论的情况。如何看单链表&#xff1f;让我们简化成下图cur表示当前节点&#xff0c;下图表示cur移动&#xff0c;圆圈表示值用哨兵卫节点(新的头节点)和把尾节点看成NULL来把头尾节点一般化…...

编程日记 2023/3/10 16:55:05

全生命周期的云原生安全框架

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/129423036 一、全生命周期的云原生安全框架 如图所示&#xff1a; 二、框架说明 在上图中&#xff0c;我们从两个维度描述各个安全机制&#xff0c;横轴是开发和运营阶段&#xff0c;细分为编码、测试…...

编程日记 2023/3/10 16:53:58

【本地网站上线】ubuntu搭建web站点，并内网穿透发布公网访问

【本地网站上线】ubuntu搭建web站点&#xff0c;并内网穿透发布公网访问前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子…...

编程日记 2023/3/10 16:52:56

FPGA调试避坑指南：Vivado ILA采样深度和探针位宽怎么设？资源占用与调试效果的平衡术

FPGA调试实战&#xff1a;ILA采样深度与探针位宽的黄金平衡法则 当你在Artix-7芯片上调试一个包含32位计数器和多状态机的设计时&#xff0c;突然发现ILA吃掉了一半的Block RAM资源&#xff0c;而采样深度却只够捕获5个时钟周期的数据——这种场景是否似曾相识&#xff1f;本文…...

编程新知 2026/3/28 0:29:27

AD21实战：3种方法搞定Keepout和机械层互转，最后一种能救急

AD21实战&#xff1a;3种高效解决Keepout与机械层互转难题的方法 在PCB设计过程中&#xff0c;Keepout层和机械层的正确使用与转换是确保设计准确性的关键环节。许多工程师都遇到过这样的困境&#xff1a;当设计文件中包含复杂图形元素时&#xff0c;简单的层切换或属性批量修…...

编程新知 2026/3/27 22:54:25

【读书笔记】《逆风跑者》

《逆风跑者》| 长跑人的阿甘正传 如果你也曾困顿过&#xff0c;迷茫过&#xff0c;被生活压得喘不过气来&#xff0c;那么就拉过一把椅子静静地坐一会儿吧。听我说说这位无声跑者的事儿&#xff0c;和他一起不屈不挠地寂静奔跑一次。 &#x1f4d6; 关于这本书 《逆风跑者》是…...

编程新知 2026/3/27 22:12:05

当多线雷达遇上RTK：一个能跑工业现场的SLAM方案

多传感器融合建图及定位的工程化落地方案&#xff0c;多线雷达rtk&#xff1b;室内室外导航都适用。 包含部署文档和代码注释&#xff1b;包含工程落地角度的优化。 不含运动控制。 室外场景用RTK信号稳如老狗&#xff0c;一进厂房立马抓瞎&#xff1b;多线雷达在室内横扫千军…...

编程新知 2026/3/27 21:52:01

用快马AI快速原型设计：9·1免费素材库管理界面十分钟搭建指南

最近在帮朋友设计一个免费素材库的管理界面&#xff0c;需求是要快速搭建一个能展示"91免费素材"的网页应用。作为一个经常需要验证设计想法的开发者&#xff0c;我发现用InsCode(快马)平台可以大大缩短原型开发时间。下面分享下我是如何在十分钟内完成这个素材库管理…...

编程新知 2026/3/27 21:15:47

终极指南：如何在.NET应用中快速集成VLC多媒体播放功能

终极指南&#xff1a;如何在.NET应用中快速集成VLC多媒体播放功能 【免费下载链接】Vlc.DotNet .NET control that hosts the audio/video capabilities of the VLC libraries 项目地址: https://gitcode.com/gh_mirrors/vl/Vlc.DotNet Vlc.DotNet是一个强大的.NET库&am…...

编程新知 2026/3/27 21:11:46

智能汽车远程诊断怎么玩？深入聊聊DoIP协议里的那些‘暗号’：VIN、EID、激活线与安全

智能汽车远程诊断的通信密码&#xff1a;DoIP协议中的VIN、EID与安全设计解析 当你的爱车亮起故障灯时&#xff0c;4S店技师只需轻点平板电脑&#xff0c;就能远程读取车辆状态——这背后是车载以太网诊断协议(DoIP)在发挥作用。不同于传统CAN总线诊断&#xff0c;基于IP网络的…...

编程新知 2026/3/27 20:57:42

ente/auth缓存机制详解：提高系统响应速度

ente/auth缓存机制详解&#xff1a;提高系统响应速度 【免费下载链接】ente 完全开源&#xff0c;端到端加密的Google Photos和Apple Photos的替代品 项目地址: https://gitcode.com/GitHub_Trending/en/ente ente/auth作为专注于移动设备的两步验证&#xff08;2FA&…...

编程新知 2026/3/27 20:51:39

iBeebo：5个理由让你选择这款纯净高效的第三方微博客户端

iBeebo&#xff1a;5个理由让你选择这款纯净高效的第三方微博客户端 【免费下载链接】iBeebo 第三方新浪微博客户端 项目地址: https://gitcode.com/gh_mirrors/ib/iBeebo 在信息过载的数字时代&#xff0c;官方微博客户端日益臃肿的界面设计、无处不在的广告推送和复杂…...

编程新知 2026/3/27 18:58:48

零代码也能构建智能登录系统？Dify工作流让你告别繁琐的前端开发

零代码也能构建智能登录系统&#xff1f;Dify工作流让你告别繁琐的前端开发 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awes…...

编程新知 2026/3/27 18:42:37