CSS中的div和span标签

最新推荐文章于 2023-12-26 11:25:19 发布

shwanglp

最新推荐文章于 2023-12-26 11:25:19 发布

阅读量8.6k

点赞数 3

分类专栏： CSS HTML5

本文链接：https://blog.csdn.net/shwanglp/article/details/53454837

版权

HTML5 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

今天学习了关于CSS中的div和span标签，下面来通过例子简单的介绍一下这几个标签怎么使用。

part1：

div标签：一般用于配合css完成网页的基本布局

span标签：一般用于配合css修改网页中的一些局部信息

二者的区别：div会单独的占领一行，而span不会单独占领一行；div是一个容器级的标签，span是一个文本级的标签

补充：什么是容器级标签？什么是文本级标签？

容器级标签：div h ul ol dl li ......

文本级标签：span p buis strong em ins del ......

容器级和文本级标签的区别：容器级的标签中可以嵌套其他所有的标签，文本级标签中只能嵌套文字，超链接，图片。

part2 实例练习

div标签实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        .header{
            background: red;
            height: 100px;
        }
        .content{
            background: green;
            height: 200px;
        }
        .footer{
            background: blue;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="content">内容</div>
    <div class="footer">底部</div>
</body>
</html>

调试结果：

span标签实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        div{
            color: red;
        }
        span{
            color: blue;
        }
        p{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        这是一首动听的情歌
    </div>
    <div>但愿<span>人长久</span>，千里<span>共婵娟</span></div>
    <span>
        这是一段美好的因缘
        <p>
            <h1>童话里都是骗人的</h1>
        </p>
    </span>
</body>
</html>

调试结果：

实例显示了上面介绍的各种注意点哦

shwanglp

关注

3
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
CSS中的div和span标签

今天学习了关于CSS中的div和span标签，下面来通过例子简单的介绍一下这几个标签怎么使用。part1：div标签：一般用于配合css完成网页的基本布局span标签：一般用于配合css修改网页中的一些局部信息二者的区别：div会单独的占领一行，而span不会单独占领一行；div是一个容器级的标签，span是一个文本级的标签补充：什么是容器级标签？什么是文本级标签？容
复制链接

扫一扫