Maison > Article > interface Web > Résumé des balises HTML au niveau des blocs (court article)

Résumé des balises HTML au niveau des blocs (court article)

黄舟original: 2017-02-20 13:38:061622parcourir

En termes simples, les éléments de niveau bloc sont des éléments qui occupent leur propre ligne. Ses fonctionnalités :

①Toujours commencer sur une nouvelle ligne ;

　②La hauteur, la hauteur de la ligne, les marges et le remplissage peuvent tous être contrôlés

③ La largeur par défaut est ; 100 % de son conteneur, sauf si une largeur est spécifiée.

④ Il peut accueillir des éléments en ligne et d'autres éléments de bloc

Le code récapitulatif est le suivant :

<!doctype html>  

    <html>  

    <head>  

        <meta charset="UTF-8">  

        <title>Document</title>  

    </head>  

    <body>  

        <!-- 块状元素 独占一行 -->  

        <!-- p无语义,称它为盒子 -->  

        <p>盒子</p>  

        <!-- h1-h6语义 定义标题 -->  

        <h1>标题1</h1>  

        <h2>标题2</h2>  

        <h6>标题3</h6>  

        <!-- p 语义 段落标签 写文字-->  

        <p>文章</p>  

        <!-- 列表多数用来存一系列的相似的数据 -->  

        <!-- 有序列表 -->  

        <ol>  

            <li>导航1</li>  

            <li>导航2</li>  

            <li>导航3</li>  

        </ol>  

        <!-- 无序列表 -->  

        <ul>  

            <li>导航1</li>  

            <li>导航2</li>  

            <li>导航3</li>  

        </ul>  

        <!-- 定义列表 解释某个名词 -->  

        <dl>  

            <dt>名词</dt>  

            <dd>解释名词的位置</dd>  

        </dl>  

        <!-- 表格 渲染性能不好 少用 -->  

        <table>  

            <caption>表格头部</caption>  

            <!-- tr是行 -->  

            <tr>  

                <!-- th表头 -->  

                <th>星期一</th>  

                <th>星期二</th>  

            </tr>  

            <tr>  

                <!-- td单元格 -->  

                <td>上课</td>  

                <td>上课</td>  

            </tr>  

        </table>  

    </body>  

    </html>

Ce qui précède est un résumé des balises HTML au niveau des blocs introduites par l'éditeur (petit article). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Code d'implémentation de la fonction glisser-déposer HTML5Article suivant：Code d'implémentation de la fonction glisser-déposer HTML5

Articles Liés

Voir plus