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

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

news 2026/2/8 16:40:01

这篇文章，我们来讲一下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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/7 23:18:37

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51