Une brève introduction aux éléments de bloc et aux éléments en ligne en HTML (analyse de code)-tutoriel HTML-php.cn

Une brève introduction aux éléments de bloc et aux éléments en ligne en HTML (analyse de code)

不言

Libérer： 2018-08-22 14:23:22

original

2602 Les gens l'ont consulté

Le contenu de cet article est une brève introduction (analyse du code) sur les éléments de bloc et les éléments en ligne en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>demo</title>
        <!--
            <style type="text/css">
            h1{
                color: red;
            }
            </style>
        -->
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <h1>这是一个漂亮的网页</h1>
        
        
        <!--
            块元素，会独占一整行；
                div,p,h1,h2,h3,h4,h5,h6 都是块元素；
                div标签没有任何语义；是一个纯粹的块，不会有任何默认样式；
                div元素主要对我们的页面进行布局；
                
                ps：p元素不能包含任何块元素；
        -->
        <div style="background-color: red; width: 200px;">
            我是一个快元素
        </div>
        
        <div style="background-color: yellow;width: 400px;">
            我是一个快元素
        </div>
        
        <hr />
        
        <!--
            内联元素：只会占用自身的大小，一行占满后自动换行；、
            常见的内联元素：
            a,img,iframe,span
            
            span也没有任何语义，是专门用来选中文字设置样式；
            让span圈一段字，为这段文件进行设置样式；
            
            一般会在块元素中放一个span元素；而反过来不行；
            ps：a元素可以包含任意元素；除了a本事；
        -->
        <span>
            I am is a spane
        </span>
        <span>
            I am is a spane
        </span>
    </body>
</html>

Copier après la connexion

Recommandations associées :

Types d'éléments HTML : éléments de niveau bloc, éléments en ligne (également appelés éléments en ligne) et éléments de niveau bloc en ligne. _html/css_WEB-ITnose

HTML__Éléments en ligne et éléments de bloc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!