Web前端开发-元素类型

Web前端开发,自学笔记整理


元素类型

1. 元素类型


<html>
    <head>
        <meta charset="UTF-8">
        <title>元素类型title>
            <style type="text/css">
            p {
                width: 100px;
                height: 30px;
                background: lightblue;
            }

            span {
                width: 100px;
                height: 30px;
                background: lightcoral;
            }

            img {
                width: 50px;
                height: 50px;
            }
        style>
    head>
    <body>
        

        
        <p>- 段落p>
        <p>- 段落p>
        <p>- 段落p>
        <div>- div标签div>
        <div>- div标签div>
        <br />

        
        <span>2018-span>
        <span>04-span>
        <span>21span>
        <br />
        <br />
        <br />

        
        <img src="../04-卧龙控股/img/bg.png"/>
        <img src="../04-卧龙控股/img/bg.png"/>
        <img src="../04-卧龙控股/img/bg.png"/>
    body>
html>

2.元素类型转换-1


<html>
    <head>
        <meta charset="UTF-8">
        <title>元素类型转换title>
            <style type="text/css">
            /*元素类型:inline*/
            span {
                width: 50px;
                height: 50px;
                background: blue;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 50px;

                /*改变元素类型*/
                display: inline-block;
            }
            b {
                font-size: 30px;
            }
        style>
    head>
    <body>
        
        <span>16span>
        <b>:b>
        <span>08span>

    body>
html>

3. 元素类型转换-2


<html>
    <head>
        <meta charset="UTF-8">
        <title>元素类型转换title>
            <style type="text/css">

            .view1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                /*display: block;*/
                /*display: inline-block;*/
                /*相当于给元素添加了display:block;*/
                float: left;
            }
            .view2 {
                width: 100px;
                height: 100px;
                background: lightgreen;
                /*display: inline-block;*/
                float: left;
            }

            i {
                width: 30px;
                height: 30px;
                background: yellow;
            }
        style>
    head>
    <body>
        
        <span class="view1">view1span>
        <span class="view2">view2span>

        <i>1i>
        <i>2i>
    body>
html>

你可能感兴趣的:(HTML/CSS,HTML,CSS,Web)