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

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

黄舟
Freigeben: 2017-01-21 16:30:22
Original
1913 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Artikel

Artikel stellt ein unabhängiges Fragment des Inhalts eines Dokuments dar, beispielsweise eines Blogeintrags oder eines Zeitungsartikels, und der Inhalt des

-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>
Nach dem Login kopieren

aside

Das von HTML5 bereitgestellte

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage