html-06 标签类型_定义标签类型-优快云博客

本文详细介绍了HTML中不同类型的标签及其在CSS中的样式应用，包括块级标签、行内标签及行内-块级标签的特点与使用场景，并通过实例展示了如何通过CSS控制这些标签的显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            background-color: red;
            width: 200px;
            height: 250px;
            /*让标签变为行内标签*/
            /*display: inline;*/
            /*让标签变为行内-块级标签*/
            /*display: inline-block;*/
        }
        p{
            background-color: yellow;
        }
        span{
            color: aqua;
            /* display 改变标签的显示类型*/

            /* none 隐藏标签*/
            /*display: none;*/
            /*让行内标签变成块级标签*/
            /*display: block;*/
        }
    </style>
</head>
<body>
    <!--
    块级标签
    独占一行
    能随时设置宽度和高度
    div p h1 h2 li ul
    -->
    <div>1111111111</div>
    <div>1111111111</div>
    <div>1111111111</div>
    <p>222222222</p>
    <ul>333333333</ul>
    <li>4444444444</li>

    <!--
    行内标签（内联标签）
    多个行内标签能同时显示在同一行
    宽度和高度取决于内容的尺寸
    span a label
    -->
    <!--<span>111111111</span>-->
    <!--<span>222222222</span>-->
    <!--<span>33333333</span>-->

    <!--<a href="#">百度一下</a>-->
    <!--<a href="#">百度一下</a>-->
    <!--<a href="#">百度一下</a>-->

    <!--<label>11111111</label>-->
    <!--<label>22222222</label>-->

    <!--
    行内-块级标签 (内联-块级标签)
    多个行内-块级标签可以显示在同一行
    能随时设置宽度高度
    input button
    -->
    <button>点我一下试试</button>
    <button>他让点他 你点我干嘛</button>
    <input>
    <input>
</body>
</html>