HTML标签类型

/*HTML标签类型

         * 1.块级标签：
         *  1.1 独占一行的标签
         *     1.2 能随时设置高度和宽度(如div p h1 h2 ul li)
         *
         * 
         * 
         * 
         * 2.行内标签（内联标签）
         *  2.1 多个标签能同时显示在一行
         *  2.2 宽度和高度取决于内容的尺寸（如span a label）
         * 
         * 
         * 3.行内-块级标签（内联-块级标签）
         *  3.1 多个行内-块级标签可以显示在同一行
         *  3.2 能随时改变宽度和高度（如 input button）
         * */

前三种标签类型

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html</title>
<style>
/*HTML标签类型

1.块级标签：
*
1.1 独占一行的标签
*
1.2 能随时设置高度和宽度(如div p h1 h2 ul li)
*
*
*
*
*
2.行内标签（内联标签）
*
2.1 多个标签能同时显示在一行
*
2.2 宽度和高度取决于内容的尺寸（如span a label）
*

```
       * 
       *
```

3.行内-块级标签（内联-块级标签）
*
3.1 多个行内-块级标签可以显示在同一行
*
3.2 能随时改变宽度和高度（如 input button）
*
*
*
*
*
*
4.修改标签的显示类型
*
4.1 CSS中有个display属性，能修改标签的显示类型
*
4.1.1 none: 隐藏标签
*
4.1.2 block: 让标签变为块级标签 *
4.1.3 inline：让标签变成行内标签
*
4.1.4 inline-block：让标签变成行内-块级标签
*
*
*
* /
/块级/
div{
background-color: coral;
width: 150px;
height: 20px;
/隐藏这个div标签/
/display: none;/
/变为行内标签/
display: inline;
}
/行内/
span{
background: blue;
/设置无效/
width: 150px;
height: 20px;
/变为块级标签/
/display: block;/
display: inline-block;
}
/行内-块级*/
button{
background-color: pink;
width: 50px;
height: 50px;
}

    </style>
</head>
<body>
    <div>块级标签</div>
    <br />
    <span>行内标签</span>
    <span>变成行内-块级标签</span>
    <br />
    <br />
    <br />
    <input />
    <button></button>
    <br />
    <br />
</body>

</html>

更改标签类型效果

HTML标签类型

推荐阅读更多精彩内容