码迷,mamicode.com
首页 > Web开发 > 详细

HTML块

时间:2015-12-24 22:14:08      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

HTML块

标签:

原文地址:http://www.cnblogs.com/chao2014/p/5074345.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!