标签在网页的显示方式称为显示模式
共有三种不同的显示模式，其作用也各不相同
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式</title><style>/* 块级元素:独占一行,宽度默认是父级的100%，且对其设置宽高生效 */div{width: 100px;height: 100px;}.div1{color: red;}.div2{color: sienna;}/* 一行显示多个,宽高属性不生效,宽度由内容撑开 */span{width: 200px;height: 200px;}/* 与行内元素的区别在于宽高属性会生效 */img{width: 200px;height: 200px;}</style>
</head>
<body><!-- 块元素 --><div class="div1">我曾经跨过山和大海</div><div class="div2">也穿过人山人海</div><!-- 行内元素 --><span>我是一辆大洒水车</span><span>雨夜并不需要我</span><!-- 行内块元素 --><img src="../image/2.webp" alt=""><img src="../image/2.webp" alt=""></body>
</html>
转换显示模式
行内块与块级是常用的，行内元素由于无法设置宽高，所以应用不多