1、html中的 div 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span的用法</title>
</head>
<body>
<div style="color:#FF00FF">
<h1>同一个div里面的东西用同一种</h1>
<p>CCS</p>
<p>div标签定义 HTML 文档中的一个分隔区块或者一个区域部分</p>
<p>div标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化</p>
</div>
</body>
</html>
敲黑板:
div标签的作用
1、div 标签可以用来划分 HTML 结构,从而配合 CSS 来整体控制某一块的样式。
2、div 标签是块级元素,它可用做组合其它 HTML 元素的容器。
3、div 标签可以用作严格的组织工具,可以加以 id 或 class 来标记 div 标签,使代码结构看上去更舒服
2、html中的 span 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span的用法</title>
</head>
<body>
<p>span用于对文档中的<span style="color:pink">行内元素进行组合</span></p>
<p>span标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化;<span></span>如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异</p>
<p>span标签<span style="color:blue;font-weight:bold">提供了一种将文本的一部分或者文档的一部分独立出来</span>的方式</p>
</body>
</html>
敲黑板:
1、span用于对文档中的行内元素进行组合
2、span标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化;如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异
3、span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
3、div和span同时使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span的用法</title>
</head>
<body>
<div style="color:#FF00FF">
<p>span用于对文档中的<span style="color:pink">行内元素进行组合</span></p>
<p>span标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化;<span></span>如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异</p>
<p>span标签<span style="color:blue;font-weight:bold">提供了一种将文本的一部分或者文档的一部分独立出来</span>的方式</p>
</div>
</body>
</html>
敲黑板:
div和span同时出现,并且设置了其style,那么此时span的优先级高,sapn范围之外的采用div的样式