Zusammenfassung der H5-Tags auf Blockebene-H5-Tutorial-php.cn

Zusammenfassung der H5-Tags auf Blockebene

php中世界最好的语言

Freigeben： 2018-01-10 09:24:49

Original

2786 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen eine Zusammenfassung der H5-Tags auf Blockebene. Was sind die Vorsichtsmaßnahmen bei der Verwendung von H5-Tags auf Blockebene? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

① beginnt immer in einer neuen Zeile

②Höhe, Zeilenhöhe und äußere Ränder und innere Ränder sind verfügbar.

③Die Breite beträgt standardmäßig 100 % des Containers, sofern keine Breite festgelegt 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>  
    <!-- 块状元素 独占一行 -->  
    <!-- div无语义,称它为盒子 -->  
    <div>盒子</div>  
    <!-- 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>

Nach dem Login kopieren

Ich glaube, Sie haben es gemeistert Nachdem Sie diese Fälle gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website. Weitere spannende Methoden finden Sie hier!

Verwandte Lektüre:

So erstellen Sie einen Drag-and-Drop-Effekt in H5

Informationen dazu, wie alte Versionen von Browsern nicht sind kompatibel mit der H5- und C3-Methode

So zeichnen Sie Grafiken mit der CanvasAPI von H5

Das obige ist der detaillierte Inhalt vonZusammenfassung der H5-Tags auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!