HTML块

<!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>
相关文章
