Was sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen)-H5-Tutorial-php.cn

Was sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen)

寻∝梦

Freigeben： 2018-08-14 16:22:59

Original

5958 Leute haben es durchsucht

Was sind die neuen Strukturen von HTML5 und wie können diese genutzt werden?

HTML5 neue Hauptstrukturelemente:

Artikelelement
Abschnittselement
nav
Aside-Element
Zeitelement
pudate Attribut

Elementdetails:

Artikelelement

kann als Plug-in eingebettet und ausgedrückt werden

<article>
            <h1>这是一个内嵌页面</h1>
            <object>
                <embed src="#" width = "600"  height = "400"</embed>
            </object>
        </article>

Nach dem Login kopieren

Abschnittselement

Es wird generell nicht empfohlen, das Abschnittselement ohne Header-Inhalt zu verwenden

Nicht mit dem Artikelelement verwechseln

Zusammenfassung: Verwenden Sie das Abschnittselement nicht als Seitencontainer zum Festlegen von Stilen.

Wenn die Elemente „article“, „aside“ und „nav“ besser für die Verwendung geeignet sind, verwenden Sie nicht das Element „seciton“

Wenn kein Titelinhalt vorhanden ist, verwenden Sie nicht das Abschnittselement

nav

wird als Verbindungsgruppe für die Seitennavigation verwendet, in der Navigationselemente verbunden sind zu anderen Seiten oder anderen Teilen der aktuellen Seite. Fügen Sie einfach die Haupt- und Grundverbindungsgruppen in Navigationselemente ein

Anwendungsszenarien:

Traditionelle Navigationsleiste
Seitenleistennavigation
In-Page-Navigation
Umblättervorgang

Verwenden Sie es nicht im HTML5-Menü Element ersetzt das Navigationselement

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href = "#">主页</a></li>
                <li><a href = "#">开发文档</a></li>
            </ul>
        </nav>
        <article>
            <header>
                <h1>html5和css3的历史</h1>
                <nav>
                    <ul>
                        <li><a href = "#">HTML5历史</a></li>
                        <li><a href = "#">CSS3历史</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <h1>HTML5历史</h1>
                <p>....</p>
            </section>
            <section>
                <h1>css3历史</h1>
                <p>....</p>
            </section>
            <footer>
                <a href = "#">删除</a>
                <a href = "#">修改</a>
            </footer>
        </article>
        <footer>
            <p><small>版权声明：</small></p>
        </footer>
    </body>
</html>

Nach dem Login kopieren

aside-Element

stellt den Zusatzinformationsteil der aktuellen Seite oder des aktuellen Textes dar

enthält die erste Referenz und Seitenleiste, Einkaufen, Navigationsleiste usw.

<html>
    <head>
        <meta charset="UTF-8">
        <title>aside元素</title>
    </head>
    <body>
        <header>
            <h1>js入门</h1>
        </header>
        <article>
            <h1>语法</h1>
            <p>文章的正文。。。。。。</p>
            <aside>
                <h1>名词解释</h1>
                <p>这是一个对语言来说很重要的内容体</p>
            </aside>
        </article>
        <aside>
            <nav>
                <h2>评论</h2>
                <ul>
                    <li><a href = "#">2015-3-10</a></li>
                    <li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
                </ul>
            </nav>
        </aside>
    </body>
</html>

Nach dem Login kopieren

Zeitelement

24 Stunden

<html>
    <head>
        <meta charset="UTF-8">
        <title>Time元素</title>
    </head>
    <body>
        <time datatime = "2017-10-09">2017-10-09</time>
        <time datatime = "2017-10-09T20:00">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
    </body>
</html>

Nach dem Login kopieren

pudate-Attribut

<html>
    <head>
        <meta charset="UTF-8">
        <title>update属性</title>
    </head>
    <body>
        <article>
            <header>
                <h1>苹果</h1>
                <p>发布日期
                <time datetime="2017-10-09" pubudate>2015-10-09</time></p>
                <p>舞会时间
                <time datetime ="2015-10-09">2015-10-09</time></p>
            </header>
        </article>
    </body>
</html>

Nach dem Login kopieren

[Verwandte Empfehlungen]

Grundlegende Elemente von HTML, damit Sie HTML von Grund auf lernen können

Was ist eine HTML-Datei? Ein vorläufiges Verständnis von HTML-Dateien

Das obige ist der detaillierte Inhalt vonWas sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!