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

前端——6.文本格式化标签和<div>和<span>标签

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

浅谈Xpath注入漏洞

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

Oracle LogMiner分析归档日志

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

趣味三角——第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…...

市场营销的核心是什么?

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

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

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

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

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

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

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

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

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

快速入门深度学习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 自动…...

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…...

信息收集之搜索引擎

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

Flutter(四)布局类组件

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

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

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

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

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

JavaScript Math常用方法

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

【C++】模板进阶

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

三板斧解决leetcode的链表题

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

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

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

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

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

电脑怎么重装系统?教你轻松掌握这些方法

重新安装计算机系统有两种原因&#xff1a;一种是计算机系统可以正常使用&#xff0c;但是电脑比较卡&#xff0c;为了提高它的运行速度&#xff0c;所以想要通过重新安装系统来解决这个问题;另一种原因是计算机系统文件丢失&#xff0c;系统出现蓝屏&#xff0c;或者黑屏的情况…...

leetcode-每日一题-2379(简单,字符串)

久违的简单题......给你一个长度为 n 下标从 0 开始的字符串 blocks &#xff0c;blocks[i] 要么是 W 要么是 B &#xff0c;表示第 i 块的颜色。字符 W 和 B 分别表示白色和黑色。给你一个整数 k &#xff0c;表示想要 连续 黑色块的数目。每一次操作中&#xff0c;你可以选择…...

SLF4J日志框架在项目中使用

介绍 SLF4J全称“Simple Logging Facade for Java”&#xff0c;作为各种日志框架的简单门面。例如&#xff1a; java.util.logging、logback 、 reload4j等。只需要切换日志框架的jar包依赖就可以切换日志框架。 SLF4J支持的日志框架包含如下&#xff1a; log4j&#xff1a…...

Spark MLlib 模型训练

Spark MLlib 模型训练决策树随机森林GBDTSpark MLlib 开发框架下 : 监督学习 : 回归 (Regression) , 分类 (Classification) , 协同过滤 (Collaborative Filtering)非监督学习 : 聚类 (Clustering) 、频繁项集 (Frequency Patterns) 例子分类 : 算法分类 : 算法分类算法子分类…...

Python中变量的作用域精讲

文章目录前言一、局部变量二、全局变量前言 变量的作用域是指程序代码能够访问该变量的区域&#xff0c;如果超出该区域&#xff0c;再访问时就会出现错误。在程序中&#xff0c;一般会根据变量的 “有效范围” 将变量分为 “全局变量” 和 “局部变量”。 一、局部变量 局部变…...

数据仓库工程师的工作职责的相关介绍

1. BI 开发工程师的工作内容是什么&#xff1f; BI开发工程师&#xff08;Business Intelligence Developer&#xff09;是负责设计和开发企业级BI系统的专业人员。他们的主要工作是从多个数据源中提取、转换、加载和分析数据&#xff0c;以支持企业决策。以下是BI开发工程师的…...

ESP UART 介绍

1 UART 介绍 UART 是一种以字符为导向的通用数据链&#xff0c;可以实现设备间的通信。异步传输的意思是不需要在发送数据上添加时钟信息。这也要求发送端和接收端的速率、停止位、奇偶校验位等都要相同&#xff0c;通信才能成功。 1.1 UART 通信协议 一个典型的 UART 帧开始…...

第十三届蓝桥杯省赛Python大学B组复盘

目录 一、试题B&#xff1a;寻找整数 1、题目描述 2、我的想法 3、官方题解 4、另解 二、试题E&#xff1a;蜂巢 1、题目描述 2、我的想法 3、官方题解 三、试题F&#xff1a;消除游戏 1、题目描述 2、我的想法&#xff08;AC掉58.3%&#xff0c;剩下全超时&#x…...

linux入门---vim的配置

这里写目录标题预备知识如何配置vimvim一键配置预备知识 在配置vim之前大家首先得知道一件事就是vim的配置是一人一份的&#xff0c;每个用户配置的vim都是自己的vim&#xff0c;不会影响到其他人&#xff0c;比如说用户xbb配置的vim是不会影响到用户wj的&#xff0c;虽然不同…...

Python简写操作(for、if简写、匿名函数)

Python简写操作&#xff08;for、if简写、匿名函数&#xff09;1. for 简写1.1 一层 for 循环1.2 两层 for 循环2. if 简写3. for 与 if 的结合简写4. 匿名函数 lambda1. for 简写 举个例子&#xff1a; y [1, 2, 3, 4, 5, 6] result [(i * 2) for i in y] print(result)# …...

毕业设计常用模块之温湿度模块DHT11模块使用

DHT11是一款可以测量温度数据和湿度数据的传感器 产品特点 暖通空调、除湿器、农业、冷链仓储、测试及检测设备、消费品、汽车、自动控制、数据记录器、气 象站、家电、湿度调节器、医疗、其他相关湿度检测控制 外形尺寸 第3管脚&#xff1a;NC 是没有用的 典型电路 通信方式…...

Cadence Allegro 导出Design Rules Net Shorts Check(DRC)Report报告详解

⏪《上一篇》   🏡《上级目录》   ⏩《下一篇》 目录 1,概述2,Design Rules Net Shorts Check(DRC)Report作用3,Design Rules Net Shorts Check(DRC)Report示例4,Design Rules Net Shorts Check(DRC)Report导出方法4.1,方法14.2,方法2...

第 46 届世界技能大赛浙江省选拔赛“网络安全“项目C模块任务书

第46届世界技能大赛浙江省选拔赛"网络安全"项目C模块&#xff08;夺旗行动&#xff08;CTF&#xff09;挑战&#xff09;第46届世界技能大赛浙江省选拔赛"网络安全"项目C模块第一部分 WEB第二部分 CRYPTO第三部分 REVERSE第四部分 MISC第五部分 PWN第46届世…...

C++:详解C++11 线程(一):MingGW 各版本区别及安装说明

MingGW 各版本区别一&#xff1a;MinGW、MinGW-w64 简介二&#xff1a;MinGW 各版本参数说明三&#xff1a;下载解压一&#xff1a;MinGW、MinGW-w64 简介 MinGW&#xff08;全称为 Minimalist GNU for Windows&#xff09;&#xff0c;它实际上是将经典的开源 C 语言编译器 G…...

第十二章 ArrayList和 LinkedList的区别

ArrayList&#xff1a;基于动态数组&#xff08;自动扩容&#xff09;&#xff0c;连续内存存储&#xff0c;由于底层是数组&#xff0c;适合使用下标进行访问&#xff0c;但扩容一直都是数组的缺点&#xff0c;所以使用尾插法进行扩容可以有效提高扩容效率。还有就是创建Array…...

案例06-复用思想的接口和SQL

目录 一&#xff1a;背景介绍 二&#xff1a;思路&方案 三&#xff1a;过程 1.Controller层接口的复用 2.Mapper层sql语句的复用 四&#xff1a;总结 一&#xff1a;背景介绍 我们在开发项目的过程中非常容易出现的一种现象就是用什么我就直接写什么&#xff0c;就像我…...

【Java学习笔记】17.Java 日期时间(2)

前言 本章继续介绍Java的日期时间。 Calendar类 我们现在已经能够格式化并创建一个日期对象了&#xff0c;但是我们如何才能设置和获取日期数据的特定部分呢&#xff0c;比如说小时&#xff0c;日&#xff0c;或者分钟? 我们又如何在日期的这些部分加上或者减去值呢? 答案…...

【学习Docker(八)】Docker Canal的安装与卸载

座右铭&#xff1a;《坚持有效输出&#xff0c;创造价值无限》 最近想了解下canal&#xff0c;自行搭建并完成数据同步。经过了几天的踩坑之旅&#xff0c;今天终于搭建成功了。 环境&#xff1a;canalv1.1.5、MySQL8.0、JDK1.8 安装MySQL 创建存放目录 mkdir /docker-localm…...

python的django框架从入门到熟练【保姆式教学】第三篇

在前两篇博客中&#xff0c;我们介绍了Django框架的模型层和数据库迁移功能。本篇博客将重点介绍Django的视图层&#xff08;View&#xff09;&#xff0c;并讲解如何创建视图函数和URL路由。 视图层&#xff08;View&#xff09; Django的视图层是Django应用程序的另一个核心…...

Open3D(C++) Ransac拟合球体(详细过程版)

目录 一、算法原理1、计算流程2、参考文献二、代码实现三、结果展示一、算法原理 1、计算流程 空间球方程: ( x − a ) 2 + ( y − b...

Antlr Tool与antlr runtime的版本一致性问题

1. 意外的问题 在学习Antlr4的visitor模式时&#xff0c;使用IDEA的Antlr插件完成了Hello.g4文件的编译&#xff0c;指定的package为com.sunrise.hello 使用visitor模式遍历语法解析树&#xff0c;遍历过程中打印hello语句 public class HelloVisitorImpl extends HelloBaseVi…...

嵌入式中CAN测试自动化方法分析

can的基础知识 CAN是什么? CAN 是 Controller Area Network 的缩写(以下称为 CAN),是 ISO*1 国际标准化的串行通信协议在当前的汽车产业中,出于对安全性、舒适性、方便性、低公害、低成本的要求,各种各样的电子控制系统被开发了出来。由于这些系统之间通信所用的数据类…...

基于c++、opencv、cuda、Visual Studio编程

一、前言 opencv自带的支持的cuda的函数不少,但是不一定够用,而且已经支持的函数有些还不是十分的完善。所以更多的时候还需要编写自己的kernel以进行加速自定义处理。如果基于opencv进行计算机视觉相关开发工作,那么熟悉c++、opencv、cuda编程是避免不了的环节。 二、准备工…...

MATLAB——DFT(离散傅里叶变换)

题目1&#xff1a; 已知有限长序列x(n)为&#xff1a; x(n)[0,1,2,3,4,5,6,7,8,9]&#xff0c;求x(n)的DFT和IDFT。要求 1&#xff09;画出序列傅里叶变换对应的|X(k)|和arg[X(k)]图形。 2&#xff09;画出原信号与傅里叶逆变换IDFT[X(k)]图形进行比较。 知识点&#xff1a; DF…...

高端Zynq ultrascale+使用GTH回环测试 提供2套工程源码和技术支持

这目录1、前言2、GTH 高速收发器介绍GTH 高速收发器结构参考时钟的选择和分配GTH 发送端GTH 接收端3、vivado工程详解4、上板调试验证5、福利&#xff1a;工程代码的获取1、前言 Xilinx系列FPGA内置高速串行收发器&#xff0c;配有可配置的IP方便用户调用&#xff0c;按照速度…...

入门(Createing a scene)

这一部分将对three.js来做一个简要的介绍 首先将开始搭建一个场景&#xff0c;其中包含一个正在旋转的立方体 梦开始的地方 在开始使用threeJS之前&#xff0c;我们需要创建一个HTML文件来显示它&#xff08;将下列HTML代码保存为你电脑上的一个HTML文件然后在你的浏览器中打…...

Unity入门精要03---透明效果

本节知识架构 1.渲染顺序与渲染队列 如果采用了透明度混合即要是实现半透明效果&#xff0c;那么就要关闭深度写入&#xff0c;那么此时渲染顺序就会变得非常非常重要&#xff0c;不然会出现不正确的遮挡效果。具体的分析可见书中解释 一句话概括就是因为没有写入深度&#xf…...

一文解码:如何在人工智能热潮下实现产业“智”变

近期由ChatGPT有关人工智能的话题引发了全民热议&#xff0c;在这股子浪潮下&#xff0c;讨论最多的话题就是ChatGPT的出现会为我们带来怎样的技术变革&#xff1f;是否会改变我们目前的生产方式&#xff1f;对于未来人工智能技术的发展&#xff0c;我们该如何客观看待&#xf…...

webshell管理工具-菜刀的管理操作

什么是webshell Webshell是一种运行在Web服务器上的脚本程序&#xff0c;通常由黑客使用来绕过服务器安全措施和获取对受攻击服务器的控制权。Webshell通常是通过利用Web应用程序中的漏洞或者弱密码等安全问题而被植入到服务器上的。 一旦Webshell被植入到服务器上&#xff0…...

dl----算法常识100例

1.depthwise卷积&&Pointwise卷积 depthwise与pointwise卷积又被称为Depthwise Separable Convolution&#xff0c;与常规卷积不同的是此卷积极大地减少了参数数量&#xff0c;同时保持了模型地精度&#xff0c;depthwise操作是先进行二维平面上地操作&#xff0c;然后利…...