今天学习了关于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>
调试结果:
实例显示了上面介绍的各种注意点哦