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

创始人

2024-05-31 06:51:27

0次

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

1.文本格式化标签

1.1介绍

1.2代码演示

1.3小拓展

2.div和span标签

2.1介绍

2.2代码演示

2.3解释

3.小结

1.文本格式化标签

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

1.1介绍

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

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

语义	标签	说明
加粗	或	更推荐使用标签加粗，语义更强烈
倾斜	或	更推荐使用标签倾斜，语义更强烈
删除线	或	更推荐使用~~标签做删除线，语义更强烈~~
下划线	或	更推荐使用标签做下划线，语义更强烈

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

1.2代码演示

下面进行代码演示：

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

代码如下：



Document

我是加粗标签

这也是加粗标签

我是倾斜标签

这也是倾斜标签

我是删除线标签

这也是删除线标签

我是下划线标签

这也是下划线标签

1.3小拓展

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

2.div和span标签

下面，我们来介绍一下

和标签

2.1介绍

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

代码格式：

这是一定div块
这是一个span块

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

特点：

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

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

2.2代码演示

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

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

下面看一下span块的效果：

不好看，调整下格式：

代码如下：



Document

这是一个div块，它独占一行
123456这是另一个div块，它也独占一行
789012
阿里腾讯百度字节

2.3解释

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

例一：看一下淘宝网

例二：

3.小结

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

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【LeetCode】《LeetCode 101》第二章：最易懂的贪心算法

下一篇：2023年全国最新交安安全员精选真题及答案16

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

1.文本格式化标签

1.1介绍

1.2代码演示

我是加粗标签

我是倾斜标签

我是删除线标签

我是下划线标签

1.3小拓展

2.div和span标签

2.1介绍

2.2代码演示

2.3解释

3.小结

相关内容

热门资讯