您的位置：首页 > Web前端 > HTML

html从入门到放弃(7)-入门标签：块元素与内联元素<div/>和<span/>

2017-11-08 09:52 555 查看
对内容设置格式可以使用style标签，style标签可以定义p:{}，这就表示当前页面，所有的p标签的属性，如果需要给指定的p标签，那么就需要给目标p设置classname，然后p.名字设置stytle即可。

对于div和span，前者是将这个div下的所有内容作为一个块元素使用，块元素就是在加入时会换行并且占一整行，比如p标签，新增一个p标签，它会换行，自己占一行；

而span标签就相当于一个内联元素，比如a标签，它在加入的时候不会自动换一行，而且它占用的位置只是他需要的位置；

使用backgroud属性就可以明显看出来，div的背景是整行的，span是需要的地方。

引入div和span是为了对某一段数据进行特定的格式化，比如一段中包含p标签，h标签，现在需要把这两段整体设置成居上、居下、居左和居右10，如果分开设置，也是可以的，上面的h设置居上10，然后左右10，下面的p设置居下10，左右10；如果特别多的时候，这个方法就很麻烦了。如果引入div，直接给div设置padding 10就可以了

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 给名字叫pp的p标签单独设置文字演颜色 */
p.pp{
color: yellow;
}
div.mydiv {
background-color: blue;
color: white;
margin: 20px;
padding: 20px;
}

span.myspan {
color: red;
background-color: black;
}
</style>
</head>

<!-- html中块元素和内联元素的定义：块元素即是那些定义之后会自动换行的标签，比如p，它会独立占一行；而内联元素则不会，他会跟在上一个元素的后面，比如b标签（加粗标签） -->
<body>
<h1>演示div和span</h1>
<!-- div就是将内容作为一个块的形式展示，而span就是将内容作为内联元素展示；但是如果div中套了类似p标签这样的块，内部的块还是会换行的 -->
<div>
我是一个文字<b>加粗实施</b>
</div>
<span style="color: red; background-color: black;">11我是一个文字文字<b>加粗实施</b></span>
<span style="color: red; background-color: black;"><b>加粗实施</b></span>
<br />
<br />
<br />

<!-- 测试给一个块设置stytle:给div使用class设置一个名称，如果stytle中对这个class进行了设置，那么所有名字相同的div将会使用同一个stytle，但是如果div本身也设置了stytle，那么将以本身设置的为实际显示效果 -->
<!-- 这个stytle标签需要在head标签内写，div使用div.名字，；span使用span.名字 ,至于其他p标签等等类似-->
<div class="mydiv">
<h1>标题</h1>
<p>我是一些内容，我是一些内容，我是一些内容，我是一些内容，我是一些内容，我是一些内容，我是一些内容，我是一些内容，我是一些内容，</p>
</div>
<br />
<br />
<br />
<div style="background-color: black;" class="mydiv">
<p class="pp">测试尼日尔测试尼日尔测试尼日尔测试尼日尔测试尼日尔测试尼日尔测试尼日尔</p>
</div>
<!-- 测试span -->
<span class="myspan">我是一个内联我是一个内联我是一个内联我是一个内联我是一个内联我是一个内联我是一个内联</span>
</body>
</html>

实际显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航