溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

7-HTML的標(biāo)簽類(lèi)型

發(fā)布時(shí)間：2020-07-28 07:27:05 來(lái)源：網(wǎng)絡(luò) 閱讀：194 作者：代碼老兵 欄目：web開(kāi)發(fā)

HTML 標(biāo)簽的類(lèi)型

塊級(jí)標(biāo)簽

獨(dú)占一行的標(biāo)簽
能隨時(shí)設(shè)置寬度和高度（比如div、p、h2、h3、ul、li）
以上這些標(biāo)簽無(wú)論寬度有多窄，都是獨(dú)占一行的。

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

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

</head>
<body>
    <!--塊級(jí)標(biāo)簽-->
    <div>我是塊級(jí)標(biāo)簽</div>
</body>
</html>

7-HTML的標(biāo)簽類(lèi)型

上圖：可以看到網(wǎng)頁(yè)兩邊是有空白處的

<!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>
    <!--塊級(jí)標(biāo)簽-->
    <div>我是塊級(jí)標(biāo)簽</div>
</body>
</html>

代碼：使用通配符，將兩邊的空白處去掉

7-HTML的標(biāo)簽類(lèi)型

<!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>
    <!--塊級(jí)標(biāo)簽-->
    <div>我是塊級(jí)標(biāo)簽</div>
    <p>段落</p>
</body>
</html>

代碼：修改div和p標(biāo)簽的寬度

7-HTML的標(biāo)簽類(lèi)型

上圖：可以看到因?yàn)閐iv和p標(biāo)簽都屬于塊級(jí)標(biāo)簽，都會(huì)獨(dú)占一行，所以即使它倆的寬度在窄，也不會(huì)合并到一行。

行內(nèi)標(biāo)簽（內(nèi)聯(lián)標(biāo)簽）

多個(gè)行內(nèi)標(biāo)簽?zāi)芡瑫r(shí)顯示在一行
寬度和高度取決于內(nèi)容的尺寸（比如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>
    <!--塊級(jí)標(biāo)簽-->
    <div>我是塊級(jí)標(biāo)簽</div>
    <p>段落</p>
    <br>
    <br>
    <!--行內(nèi)標(biāo)簽-->
    <span>我是span，行內(nèi)標(biāo)簽</span>
    <span>我是span，行內(nèi)標(biāo)簽</span>
    <a href="#">我是超鏈接</a>
    <a href="#">我是超鏈接</a>
</body>
</html>

代碼：
新增行內(nèi)標(biāo)簽span、a
新增span和a設(shè)計(jì)

7-HTML的標(biāo)簽類(lèi)型

上圖：因?yàn)槭菍儆谛袃?nèi)標(biāo)簽所以span和a都出現(xiàn)在同一行。

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

代碼：修改a標(biāo)簽設(shè)計(jì)，修改器寬度和高度

7-HTML的標(biāo)簽類(lèi)型

上圖：可以看到高度和寬度并沒(méi)有改變

行內(nèi)-塊級(jí)標(biāo)簽（內(nèi)聯(lián)-塊級(jí)標(biāo)簽）

多個(gè)行內(nèi)-塊級(jí)標(biāo)簽可以顯示在同一行
能隨時(shí)設(shè)置寬度和高度（比如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>
    <!--塊級(jí)標(biāo)簽-->
    <div>我是塊級(jí)標(biāo)簽</div>
    <p>段落</p>
    <br>
    <br>
    <!--行內(nèi)標(biāo)簽-->
    <span>我是span，行內(nèi)標(biāo)簽</span>
    <span>我是span，行內(nèi)標(biāo)簽</span>
    <a href="#">我是超鏈接</a>
    <a href="#">我是超鏈接</a>
    <br>
    <br>
    <!--行內(nèi)-塊級(jí)標(biāo)簽-->
    <input placeholder="我是輸入框">
    <button>我是按鈕</button>

</body>
</html>

代碼：
body中新增了換行符和 行內(nèi)-塊級(jí)標(biāo)簽input、button
style中新增了input、button設(shè)計(jì)

7-HTML的標(biāo)簽類(lèi)型

上圖：行內(nèi)-塊級(jí)標(biāo)簽 是可以在一行顯示的，且能調(diào)整高度、寬度，這樣設(shè)計(jì)頁(yè)面更靈活。

修改標(biāo)簽顯示類(lèi)型

CSS中有個(gè)display屬性，能修改標(biāo)簽的顯示類(lèi)型
none：隱藏標(biāo)簽

block：讓標(biāo)簽變?yōu)閴K級(jí)標(biāo)簽

inline：讓標(biāo)簽變?yōu)樾袃?nèi)標(biāo)簽

inline-block：讓標(biāo)簽變?yōu)樾袃?nèi)-塊級(jí)標(biāo)簽（內(nèi)聯(lián)-塊級(jí)標(biāo)簽）

隱藏標(biāo)簽

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

代碼：修改div設(shè)計(jì)樣式，加一個(gè)display: none;

7-HTML的標(biāo)簽類(lèi)型

上圖：將div中的內(nèi)容和樣式給隱藏了。

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

代碼：將display: none 注釋掉。

將行內(nèi)標(biāo)簽變成塊級(jí)標(biāo)簽

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

代碼：修改span設(shè)計(jì)樣式，新增display: block; 將行內(nèi)標(biāo)簽修改成塊標(biāo)簽

7-HTML的標(biāo)簽類(lèi)型

上圖：可以看到span本身是個(gè)行內(nèi)標(biāo)簽，不會(huì)占據(jù)整行的空間，但修改成塊標(biāo)簽后就占據(jù)整行了。

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

代碼：修改span設(shè)計(jì)樣式的高度、寬度。

7-HTML的標(biāo)簽類(lèi)型

上圖：修改成塊標(biāo)簽以后，再去修改高度和寬度是可以的，否則如果還是行內(nèi)標(biāo)簽，修改高度和寬度是不生效的。

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

代碼：注釋掉display: block;

將塊級(jí)標(biāo)簽變成行內(nèi)標(biāo)簽

<!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>
    <!--塊級(jí)標(biāo)簽-->
    <div>我是塊級(jí)標(biāo)簽</div>
    <div>我是塊級(jí)標(biāo)簽</div>
    <p>段落</p>
    <br>
    <br>
    <!--行內(nèi)標(biāo)簽-->
    <span>我是span，行內(nèi)標(biāo)簽</span>
    <span>我是span，行內(nèi)標(biāo)簽</span>
    <a href="#">我是超鏈接</a>
    <a href="#">我是超鏈接</a>
    <br>
    <br>
    <!--行內(nèi)-塊級(jí)標(biāo)簽-->
    <input placeholder="我是輸入框">
    <button>我是按鈕</button>

</body>
</html>

代碼：
修改div標(biāo)簽，新增display: inline;
body中增加一條div標(biāo)簽。

7-HTML的標(biāo)簽類(lèi)型

上圖：塊級(jí)標(biāo)簽變成了行內(nèi)標(biāo)簽，且因?yàn)樽兂闪诵袃?nèi)標(biāo)簽設(shè)計(jì)的寬度和高度是不生效的。

行內(nèi)-塊級(jí)標(biāo)簽

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

7-HTML的標(biāo)簽類(lèi)型

上圖：變成了行內(nèi)-塊級(jí)標(biāo)簽，可以將多個(gè)標(biāo)簽放在同一行，且能改變寬度、長(zhǎng)度大小。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手