Heim > Artikel > Web-Frontend > Was sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen)

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

寻∝梦Original: 2018-08-14 16:22:595904Durchsuche

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>

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>

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>

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>

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>

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

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：Was ist Web in HTML5? Was sind die Elemente im Webspeicher?Nächster Artikel：Was ist Web in HTML5? Was sind die Elemente im Webspeicher?

In Verbindung stehende Artikel

Mehr sehen