CSS中的div和span标签

来源：互联网发布：云服务器绑定域名编辑：程序博客网时间：2024/05/16 12:49

今天学习了关于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>

调试结果：

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

0 0