温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

7-HTML的标签类型

发布时间:2020-07-28 07:27:05 来源:网络 阅读:200 作者:代码老兵 栏目:web开发

HTML 标签的类型

块级标签

独占一行的标签
能随时设置宽度和高度(比如div、p、h2、h3、ul、li)
以上这些标签无论宽度有多窄,都是独占一行的。

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

    <style>
        div{
            background-color: red;
        }
    </style>

</head>
<body>
    <!--块级标签-->
    <div>我是块级标签</div>
</body>
</html>

7-HTML的标签类型

上图:可以看到网页两边是有空白处的

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

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            background-color: red;
        }
    </style>

</head>
<body>
    <!--块级标签-->
    <div>我是块级标签</div>
</body>
</html>

代码:使用通配符,将两边的空白处去掉

7-HTML的标签类型

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

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            background-color: red;
            width: 400px;
            height: 100px;
        }
        p{
            background-color: blue;
            width: 50px;
        }
    </style>

</head>
<body>
    <!--块级标签-->
    <div>我是块级标签</div>
    <p>段落</p>
</body>
</html>

代码:修改div和p标签的宽度

7-HTML的标签类型

上图:可以看到因为div和p标签都属于块级标签,都会独占一行,所以即使它俩的宽度在窄,也不会合并到一行。

行内标签(内联标签)

多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(比如span、a、label)

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

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            background-color: red;
            width: 400px;
            height: 100px;
        }
        p{
            background-color: blue;
            /*width: 250px;*/
        }

        span{
            background-color: violet;
        }

        a {
            background-color: teal;
        }

    </style>

</head>
<body>
    <!--块级标签-->
    <div>我是块级标签</div>
    <p>段落</p>
    <br>
    <br>
    <!--行内标签-->
    <span>我是span,行内标签</span>
    <span>我是span,行内标签</span>
    <a href="#">我是超链接</a>
    <a href="#">我是超链接</a>
</body>
</html>

代码:
新增行内标签span、a
新增span和a设计

7-HTML的标签类型

上图:因为是属于行内标签所以span和a都出现在同一行。

        a {
            background-color: teal;
            width: 300px;
            height: 150px;
        }

代码:修改a标签设计,修改器宽度和高度

7-HTML的标签类型

上图:可以看到高度和宽度并没有改变

行内-块级标签(内联-块级标签)

多个行内-块级标签可以显示在同一行
能随时设置宽度和高度(比如input、button)

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

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            background-color: red;
            width: 400px;
            height: 100px;
        }
        p{
            background-color: blue;
            /*width: 250px;*/
        }

        span{
            background-color: violet;
        }

        a {
            background-color: teal;
            width: 300px;
            height: 150px;
        }

        input{
            width: 500px;
            height: 50px;
        }
        button{
            width: 250px;
            height: 100px;
        }

    </style>

</head>
<body>
    <!--块级标签-->
    <div>我是块级标签</div>
    <p>段落</p>
    <br>
    <br>
    <!--行内标签-->
    <span>我是span,行内标签</span>
    <span>我是span,行内标签</span>
    <a href="#">我是超链接</a>
    <a href="#">我是超链接</a>
    <br>
    <br>
    <!--行内-块级标签-->
    <input placeholder="我是输入框">
    <button>我是按钮</button>

</body>
</html>

代码:
body中新增了换行符和 行内-块级标签input、button
style中新增了input、button设计

7-HTML的标签类型

上图:行内-块级标签 是可以在一行显示的,且能调整高度、宽度,这样设计页面更灵活。

修改标签显示类型

CSS中有个display属性,能修改标签的显示类型
none:隐藏标签

block:让标签变为块级标签

inline:让标签变为行内标签

inline-block:让标签变为行内-块级标签(内联-块级标签)

隐藏标签

        div{
            background-color: red;
            width: 400px;
            height: 100px;
            display: none;
        }

代码:修改div设计样式,加一个display: none;

7-HTML的标签类型

上图:将div中的内容和样式给隐藏了。

        div{
            background-color: red;
            width: 400px;
            height: 100px;
            /*display: none;*/
        }

代码:将display: none 注释掉。

将行内标签变成块级标签

        span{
            background-color: violet;
            display: block;
        }

代码:修改span设计样式,新增display: block; 将行内标签修改成块标签

7-HTML的标签类型

上图:可以看到span本身是个行内标签,不会占据整行的空间,但修改成块标签后就占据整行了。

        span{
            background-color: violet;
            width: 300px;
            height: 150px;
            display: block;
        }

代码:修改span设计样式的高度、宽度。

7-HTML的标签类型

上图:修改成块标签以后,再去修改高度和宽度是可以的,否则如果还是行内标签,修改高度和宽度是不生效的。

        span{
            background-color: violet;
            width: 300px;
            height: 150px;
            /*display: block;*/
        }

代码:注释掉display: block;

将块级标签变成行内标签

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

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            background-color: red;
            width: 400px;
            height: 100px;
            /*display: none;*/
            display: inline;
        }
        p{
            background-color: blue;
            /*width: 250px;*/
        }
        span{
            background-color: violet;
            width: 300px;
            height: 150px;
            /*display: block;*/
        }

        a {
            background-color: teal;
            width: 300px;
            height: 150px;
        }

        input{
            width: 500px;
            height: 50px;
        }
        button{
            width: 250px;
            height: 100px;
        }

    </style>

</head>
<body>
    <!--块级标签-->
    <div>我是块级标签</div>
    <div>我是块级标签</div>
    <p>段落</p>
    <br>
    <br>
    <!--行内标签-->
    <span>我是span,行内标签</span>
    <span>我是span,行内标签</span>
    <a href="#">我是超链接</a>
    <a href="#">我是超链接</a>
    <br>
    <br>
    <!--行内-块级标签-->
    <input placeholder="我是输入框">
    <button>我是按钮</button>

</body>
</html>

代码:
修改div标签,新增display: inline;
body中增加一条div标签。

7-HTML的标签类型

上图:块级标签变成了行内标签,且因为变成了行内标签设计的宽度和高度是不生效的。

行内-块级标签

        div{
            background-color: red;
            width: 400px;
            height: 100px;
            /*display: none;*/
            /*display: inline;*/
            display: inline-block;
        }

7-HTML的标签类型

上图:变成了行内-块级标签,可以将多个标签放在同一行,且能改变宽度、长度大小。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI