Maison >interface Web >Tutoriel H5 >Quels sont les nouveaux éléments structurels du HTML5 ? Utilisation de nouveaux éléments structurels en HTML5 (recommandé)

Quels sont les nouveaux éléments structurels du HTML5 ? Utilisation de nouveaux éléments structurels en HTML5 (recommandé)

寻∝梦original: 2018-08-14 16:22:595998parcourir

Quelles sont les nouvelles structures du HTML5 et comment peuvent-elles être utilisées ? Cet article vous l'expliquera en détail.

Nouveaux éléments de structure principaux HTML5 :

élément article
élément section
nav
élément de côté
élément de temps
pudate attribut

détails de l'élément :

élément article

peut être intégré et exprimé Plug-in

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

élément section

Il est généralement déconseillé d'utiliser l'élément section sans contenu d'en-tête

Ne le confondez pas avec l'élément article

Résumé : n'utilisez pas l'élément section comme conteneur de page pour définir les styles

Si les éléments article, apart et nav sont plus conformes aux conditions d'utilisation, alors n'utilisez pas l'élément élément de section

S'il n'y a pas de contenu de titre, n'utilisez pas l'élément de section

nav

est utilisé comme groupe connecté pour la navigation dans les pages, où les éléments de navigation sont connectés à d’autres pages ou à d’autres parties de la page actuelle. Placez simplement les groupes de connexion principaux et de base dans les éléments de navigation

Scénarios d'application :

Barre de navigation traditionnelle
Navigation dans la barre latérale
Navigation dans la page
Opération de tournage de page

Ne pas l'utiliser en html5 Le menu l'élément remplace l'élément nav

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

l'élément de côté

représente la partie d'informations auxiliaires de la page ou du texte actuel

contient la première référence, côté Barre latérale, achats, barre de navigation, etc.

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

élément de temps

24 heures

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

Attribut pudate

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

[Recommandations associées]

Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de scratch

Qu'est-ce qu'un fichier HTML ? Une compréhension préliminaire des fichiers HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Qu’est-ce que le Web en HTML5 ? Quels sont les éléments du stockage Web ?Article suivant：Qu’est-ce que le Web en HTML5 ? Quels sont les éléments du stockage Web ?

Articles Liés

Voir plus