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

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

news 2025/12/14 19:46:39

这篇文章，我们来讲一下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意为跨度、跨距

特点：

<div>标签用来布局，但是现在一行只能放一个<div>，是一个独占一行的大盒子
<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＞标签

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

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

浅谈Xpath注入漏洞

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

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

Oracle LogMiner分析归档日志

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

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

$\frac{1}{3}$

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

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

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

市场营销的核心是什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

速通《动手学深度学习》1写在最前面0.内容与结构1.深度学习简介1.1 问题引入1.2 思路：逆向思考1.3 跳过1.4 特点1.5 小结2.预备知识（MXNet版本，学错了。。。。）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错误信息如下： T…...

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

信息收集之搜索引擎

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

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

Flutter（四）布局类组件

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

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

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

视频链接： Java入门到起飞（上部）：BV17F411T7AoJava入门到起飞（下部）：BV1yW4y1Y7Ms 学习时间： 2023/02/01 —— 2023/03/09断断续续的学习，历时大概37天，完结撒…...

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

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

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

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

JavaScript Math常用方法

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

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

【C++】模板进阶

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

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

三板斧解决leetcode的链表题

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

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

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

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

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

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

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

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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...

编程新知 2025/12/13 23:03:54

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

《C++ 模板》

目录函数模板类模板非类型模板参数模板特化函数模板特化类模板的特化模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。函数模板函数模板可以简化函数重载的代码。格式：templa…...

编程新知 2025/6/11 3:20:47

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/12/13 11:59:32

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/9/29 5:32:48

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...

编程新知 2025/12/13 5:43:36

1.文本格式化标签

1.1介绍

1.2代码演示

1.3小拓展

2.div和span标签

2.1介绍

2.2代码演示

2.3解释

3.小结

相关文章：