<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块元素</title>
<meta charset="utf-8" />
<style>
p {
background-color: aqua;
}
h1 {
background-color:antiquewhite;
}
ul {
background-color:aquamarine;
}
b {
background-color:blue;
}
a {
background-color:chocolate;
}
img {
background-color:fuchsia;
}
div {
background-color:red;
}
span {
background-color:teal;
}
</style>
</head>
<body>
<!--块元素，块元素在显示时，通常会以新行开始-->
我是来做对比的<p>大家好，我是块P</p>
我是来做对比的<h1>我是块H1</h1>
我是来做对比的<ul>我是块ul</ul>
<!--HTML内联元素，内联元素通常不会以新行开始-->
我是来做对比的<b>我是内联元素B</b>
我是来做对比的<a>我是内联元素a</a>
我是来做对比的<img alt="我也是内联元素，奇怪吧。" />
<!--HTML<DIV>元素,元素也被成为块元素，基主要是组合HTML元素的容器-->
<div>我是DIV1</div><div>我是DIV2</div>
<div><p><span>这是谁</span></p></div>
<!--HTML<span>元素，是内联元素，可作为文本的容器-->
<span>我是SPAN1</span><span>我是SPAN2</span>
</body>
</html>
