Maison > Article > interface Web > Notes d'étude HTML5 version concise (2) : section nouveaux éléments, article, à part

Notes d'étude HTML5 version concise (2) : section nouveaux éléments, article, à part

黄舟original: 2017-01-21 16:30:221873parcourir

section

L'élément section décrit une section commune dans un document ou un programme. De manière générale, une section contient un en-tête et un bloc de contenu. Une section peut être représentée comme une sous-section ou un bloc de boîte sous un onglet sur une page à onglet. Une page peut être divisée en plusieurs sections, représentant respectivement l'introduction, les actualités et les informations de contact.

Si le contenu de l'élément peut être affiché ensemble pour exprimer la signification correspondante, il peut être défini comme un élément d'article et il n'est pas nécessaire d'utiliser un élément de section.

L'élément section n'est pas un élément conteneur général, donc si un élément doit définir un style ou un script correspondant, il est recommandé d'utiliser l'élément div. La condition d'utilisation de section est de garantir que le contenu de. cet élément peut être clairement affiché dans le document dans le plan.

L'exemple de code suivant provient d'une partie de la page du site Web d'Apple. Le code contient 2 courtes sections :

<article>
    <hgroup>
        <h1>Apples</h1>
        <h2>Tasty, delicious fruit!</h2>
    </hgroup>
    <p>The apple is the pomaceous fruit of the apple tree.</p>
    <section>
        <h1>Red Delicious</h1>
        <p>These bright red apples are the most common found in many supermarkets.</p>
    </section>
    <section>
        <h1>Granny Smith</h1>
        <p>These juicy, green apples make a great filling for apple pies.</p>
    </section>
</article>

Comme vous pouvez le voir, vous pouvez utiliser l'élément h1 arbitrairement dans la section. , et Il n'est pas nécessaire de déterminer si cette section est un élément de niveau supérieur, de deuxième niveau ou de troisième niveau.

Le code suivant est une page de cérémonie de remise des diplômes, qui contient deux sections. L'une consiste à afficher la liste des personnes qui obtiendront leur diplôme et l'autre consiste à afficher le formulaire de la cérémonie de remise des diplômes.

<!DOCTYPE Html>
<html>
<head>
    <title>Graduation Ceremony Summer 2022</title>
</head>
<body>
    <h1>Graduation</h1>
    <section>
        <h1>Ceremony</h1>
        <p>Opening Procession</p>
        <p>Speech by Validactorian</p>
        <p>Speech by Class President</p>
        <p>Presentation of Diplomas</p>
        <p>Closing Speech by Headmaster</p>
    </section>
    <section>
        <h1>Graduates</h1>
        <ul>
            <li>Molly Carpenter</li>
            <li>Anastasia Luccio</li>
            <li>Ebenezar McCoy</li>
            <li>Karrin Murphy</li>
            <li>Thomas Raith</li>
            <li>Susan Rodriguez</li>
        </ul>
    </section>
</body>
</html>

article

article représente un fragment indépendant du contenu d'un document, par exemple, une entrée de blog ou un article de journal, et le contenu de la balise 23c3de37f2f9ebcb477c4a90aac6fffd indépendant du reste du document.

article est une balise de section spéciale, qui a une sémantique plus claire que la section. Elle représente un bloc indépendant et complet de contenu associé. Généralement, un article aura une section de titre (généralement contenue dans l’en-tête) et parfois un pied de page. Bien qu’une section soit également un contenu thématique, l’article lui-même est indépendant et complet en termes de structure et de contenu.

Lorsque l'article est intégré à l'article, en principe, le contenu de l'article intérieur est lié au contenu de l'article externe. Par exemple, dans un article de blog, l'article contenant les commentaires soumis par l'utilisateur doit être masqué dans l'article de blog contenant.

<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......
</article>

à part

La balise d'élément 15221ee8cba27fc1d7a26c47a001eb9b fournie par HTML5 est utilisée pour représenter la partie d'informations subsidiaires de la page ou de l'article actuel, qui peut inclure des références et des informations secondaires liées à la page actuelle ou le contenu principal. Barres latérales, publicités, groupes d'éléments de navigation et autres sections similaires distinctes du contenu principal.

Selon la spécification actuelle, l'élément 15221ee8cba27fc1d7a26c47a001eb9b peut être utilisé de deux manières :

n est inclus dans 23c3de37f2f9ebcb477c4a90aac6fffd le contenu peut être des citations, des listes de mots, etc. pertinents pour l'article en cours.

n est utilisé en dehors de 23c3de37f2f9ebcb477c4a90aac6fffd comme partie d'informations subsidiaires globales de la page ou du site ; la forme la plus typique est la barre latérale, où le contenu peut être des liens amicaux, une navigation d'affiliation ou une unité de publicités, etc.

L'exemple de code suivant combine les deux méthodes d'utilisation ci-dessus :

<body>
    <header>
        <h1>My Blog</h1>
    </header>
    <article>
        <h1>My Blog Post</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.</p>
        <aside>
            <!-- Since this aside is contained within an article, a parser

      should understand that the content of this aside is directly related

      to the article itself. -->
            <h1>Glossary</h1>
            <dl>
                <dt>Lorem</dt>
                <dd>ipsum dolor sit amet</dd>
            </dl>
        </aside>
    </article>
    <aside>
        <!-- This aside is outside of the article. Its content is related

    to the page, but not as closely related to the above article -->
        <h2>Blogroll</h2>
        <ul>
            <li><a href="#">My Friend</a></li>
            <li><a href="#">My Other Friend</a></li>
            <li><a href="#">My Best Friend</a></li>
        </ul>
    </aside>
</body>

Ce qui précède est la version concise des notes d'étude HTML5 (2) : le contenu de la section des nouveaux éléments, l'article, à part, et plus encore. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

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：Version concise des notes d'étude HTML5 (1) : Introduction et syntaxe de HTML5Article suivant：Version concise des notes d'étude HTML5 (1) : Introduction et syntaxe de HTML5

Articles Liés

Voir plus