demo42-标签总结

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
            /*
             a标签,span标签,label标签设置宽和高之后没效果.所以不可以设置宽和高,
             如果想要设置,那么必须转换成行内块标签显示才行 display:inline-block
             
             行标签就三个:a标签,span标签,label标签是常用的.  img是行内块标签
             * */
            a{
                width: 100px;
                height: 100px;
                background: yellow;
            }
            img{
                width: 100px;
                height: 100px;
                
            }
        </style>
    </head>
    <!--
        标签总结
        
    -->
    <body>
        <h1>标签总结:所有的标签,一共就三种</h1>
        <h3>第一种:块级标签,代表是:h1-h6,div,p,ul,li,ol</h3>
        <h3>块级标签特点:1.所有标签独占一行2.可以设置宽和高</h3>
        <div>查看源码的时候独占一行</div>
        hjkjhj
        
        
        <h3>第二种:行内标签,代表是:a,span,label</h3>
        <h3>行内标签特点:1.所有标签都是并排显示 ,即同一行显示 2.不可以设置宽和高</h3>
        <a href="#">黑马程序员</a>
        bbbbb
        
        
        <h3>第三种:行内块标签,代表是:img</h3>
        <h3>行内块标签特点:1.所有标签都是并排显示  (同一行显示的意思)2.可以设置宽和高(意思就是吸收了其他两个的优点)</h3>
        <img src="../day01/img/banner.jpg"/>
        ccccccc
    </body>
</html>
演示效果: