Heim > Artikel > Web-Frontend > Kurzfassung der HTML5-Studiennotizen (2): Abschnitt „Neue Elemente', Artikel, Seite

Kurzfassung der HTML5-Studiennotizen (2): Abschnitt „Neue Elemente', Artikel, Seite

黄舟Original: 2017-01-21 16:30:221881Durchsuche

Abschnitt

Das Abschnittselement beschreibt einen allgemeinen Abschnitt in einem Dokument oder Programm. Im Allgemeinen enthält ein Abschnitt einen Kopf und einen Inhaltsblock. Ein Abschnitt kann als Abschnitt oder als Boxblock unter einer Registerkarte auf einer Registerkartenseite dargestellt werden. Eine Seite kann in mehrere Abschnitte unterteilt werden, die jeweils eine Einleitung, Neuigkeiten und Kontaktinformationen darstellen.

Wenn der Inhalt des Elements zusammen angezeigt werden kann, um die entsprechende Bedeutung auszudrücken, kann es als Artikelelement definiert werden und es besteht keine Notwendigkeit, das Abschnittselement zu verwenden.

Das Abschnittselement ist kein allgemeines Containerelement. Wenn ein Element daher einen entsprechenden Stil oder ein entsprechendes Skript definieren muss, wird empfohlen, das div-Element zu verwenden. Die Bedingung für die Verwendung von Abschnitt besteht darin, sicherzustellen, dass der Inhalt von Dieses Element kann im Dokument in der Gliederung deutlich dargestellt werden.

Der folgende Beispielcode stammt aus einem Teil der Apple-Website. Der Code enthält zwei kurze Abschnitte:

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

Wie Sie sehen, können Sie das h1-Element in dem Abschnitt beliebig verwenden , und Es besteht keine Notwendigkeit zu berücksichtigen, ob es sich bei diesem Abschnitt um ein Element der obersten, zweiten oder dritten Ebene handelt.

Der folgende Code ist eine Seite für die Abschlussfeier, die zwei Abschnitte enthält: Einer dient der Anzeige der Liste der Personen, die ihren Abschluss machen werden, und der andere dient der Anzeige der Form der Abschlussfeier.

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

Artikel

Artikel stellt ein unabhängiges Fragment des Inhalts eines Dokuments dar, beispielsweise eines Blogeintrags oder eines Zeitungsartikels, und der Inhalt des 23c3de37f2f9ebcb477c4a90aac6fffd-Tags ist unabhängig vom Rest des Dokuments.

Artikel ist ein spezielles Abschnitts-Tag, das eine klarere Semantik als Abschnitt hat. Es stellt einen unabhängigen und vollständigen Block verwandter Inhalte dar. Im Allgemeinen verfügt ein Artikel über einen Titelabschnitt (normalerweise in der Kopfzeile enthalten) und manchmal auch über eine Fußzeile. Obwohl es sich bei einem Abschnitt auch um einen thematischen Inhalt handelt, ist der Artikel selbst hinsichtlich seiner Struktur und seines Inhalts unabhängig und vollständig.

Wenn Artikel in Artikel eingebettet werden, bezieht sich der Inhalt des inneren Artikels grundsätzlich auf den Inhalt des äußeren Artikels. Beispielsweise sollte in einem Blog-Beitrag der Artikel, der vom Benutzer eingereichte Kommentare enthält, innerhalb des enthaltenden Blog-Beitrags-Artikels ausgeblendet werden.

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

aside

Das von HTML5 bereitgestellte 15221ee8cba27fc1d7a26c47a001eb9b-Element-Tag wird verwendet, um den Zusatzinformationsteil der aktuellen Seite oder des aktuellen Artikels darzustellen, der Referenzen und Nebeninformationen dazu enthalten kann die aktuelle Seite oder den Hauptinhalt, Seitenleisten, Anzeigen, Navigationselementgruppen und andere ähnliche Abschnitte, die sich vom Hauptinhalt unterscheiden.

Gemäß der aktuellen Spezifikation kann das 15221ee8cba27fc1d7a26c47a001eb9b-Element auf zwei Arten verwendet werden:

n wird in 23c3de37f2f9ebcb477c4a90aac6fffd als Zusatzinformationsteil eingefügt Inhalte können Zitate, Wortlisten usw. sein, die sich auf den aktuellen Artikel beziehen.

n wird außerhalb von 23c3de37f2f9ebcb477c4a90aac6fffd als globaler untergeordneter Informationsteil der Seite oder Website verwendet. Die typischste Form ist die Seitenleiste, in der der Inhalt benutzerfreundliche Links, Affiliate-Navigation oder Werbeeinheiten usw. sein kann.

Das folgende Codebeispiel kombiniert die beiden oben genannten Verwendungsmethoden:

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

Das Obige ist die prägnante Version der HTML5-Studiennotizen (2): der Inhalt des Abschnitts „Neue Elemente“, des Artikels, Beiseite und mehr Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

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：Kurzfassung der HTML5-Studiennotizen (1): Einführung und Syntax von HTML5Nächster Artikel：Kurzfassung der HTML5-Studiennotizen (1): Einführung und Syntax von HTML5

In Verbindung stehende Artikel

Mehr sehen