suchen

Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der HTML-Tags auf Blockebene (kurzer Artikel)

Zusammenfassung der HTML-Tags auf Blockebene (kurzer Artikel)

黄舟
黄舟Original
2017-02-20 13:38:061628Durchsuche

Elemente auf Blockebene sind, vereinfacht gesagt, Elemente, die eine eigene Zeile belegen. Seine Funktionen:

①Immer in einer neuen Zeile beginnen

　②Höhe, Zeilenhöhe sowie Ränder und Abstand können alle gesteuert werden;

③ Die Breite ist standardmäßig eingestellt 100 % seines Containers, sofern keine Breite angegeben ist.

④ Es kann Inline-Elemente und andere Blockelemente aufnehmen

Der zusammenfassende Code lautet wie folgt: 

<!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>



Das Obige ist eine Zusammenfassung der vom Herausgeber eingeführten HTML-Tags auf Blockebene (kleiner Artikel). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierungscode für die HTML5-Drag-and-Drop-FunktionNächster Artikel：Implementierungscode für die HTML5-Drag-and-Drop-Funktion

In Verbindung stehende Artikel

Mehr sehen