Ausführliche Erläuterung des Abschnitts und der Artikelbeispiele für semantisches HTML5-Markup

网页制作cnn6文章简介：最常被问起的问题是：在什么情况下我们应该使用这些元素？以及我们应该如何正确的使用这些元素？

HTML5 bringt eine Reihe neuer Elemente mit sich und wird in Zukunft weit verbreitet sein. Es gibt jedoch einige Elemente, deren Verwendung verwirrend sein kann, darunter zwei neue Elemente:

und

.

Die am häufigsten gestellte Frage ist: Unter welchen Umständen sollten wir diese Elemente verwenden? Und wie sollen wir diese Elemente richtig nutzen?

Abschnittselement

Dies ist das mehrdeutigste Element. Wie unterscheidet es sich vom

-Element? Wir haben

verwendet, um Absätze zu unterteilen. Wann sollten wir also dieses Element verwenden, abgesehen von

? Zur Veranschaulichung zitieren wir die offizielle Dokumentation. Laut WHATWG-Dokument wird das

-Element wie folgt beschrieben:

„Das

-Element stellt einen gemeinsamen Absatz in einem Dokument oder einer Anwendung dar – WHATWG“

aus dem Beschreibung Wir können sehen, dass die Funktion des Elements

darin besteht, zu segmentieren, mehr oder weniger ähnlich wie

. Aber es gibt immer noch einen Sonderfall. Im Dokument wurde eine spezielle Aussage hinzugefügt:

„Wenn ein Element ausschließlich aus Stil- oder Skripterleichterungsgründen verwendet wird, wird den Autoren empfohlen,

zu verwenden. Das

-Element gilt, wenn der Inhalt eines Elements muss explizit aufgeführt werden. - WHATWG"

Auf dieser Grundlage können wir die folgenden zwei Punkte zusammenfassen:

Erstens kann das Abschnittselement zwar technisch gestaltet werden, wir können es aber trotzdem tun Wir empfehlen die Verwendung des p-Elements bei komplexen Stilen oder Skripten.

Zweitens wird das Abschnittselement ähnlich wie das

-Element zum Auflisten von Inhalten verwendet.

In einem realen Beispiel besteht der Grund für die Verwendung des

-Elements darin, den Inhalt des Blogs zu strukturieren:

<p class="blog">  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
</p>

Dies ist nur ein Beispiel:

Artikelelement

Vom Namen her hat es sich schon gut erklärt, aber wir müssen noch schauen, wie das offizielle Dokument es beschreibt:

" in Ein Dokument, Seite, Anwendung oder Abschnitt einer Website, die unabhängig verbreitet oder wiederverwendet werden kann, beispielsweise in einem Forumsbeitrag, einem Magazin- oder Nachrichtenartikel, einem Blogeintrag oder einem Benutzerbeitrag, interaktiven Widgets oder Widgets oder einem anderen eigenständigen Element „

Aus der obigen Beschreibung können wir schließen, dass das

-Element für strukturierte Artikel gedacht ist, insbesondere dort, wo wir es veröffentlichen möchten, wie z. B. Blog-, Seiteninhalte oder Forenbeiträge.

Das folgende Beispiel zeigt, wie man mit

einen Blogartikel erstellt.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies   
        halvah gummies danish biscuit applicak   
        cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.  
    </p>  

</article>

Darüber hinaus kann das Element

auch mit dem Element section kombiniert werden. Bei Bedarf kann das Element

verwendet werden, um den Artikel in mehrere Absätze zu unterteilen das Beispiel unten.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        <section>  
        <h2>This is the Sub-Heading</h2>  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake   
        tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah   
        gummies danish biscuit applicake gingerbread jelly-o pastry.  
        </section>  

        <section>  
        <h3>This is another Sub-Heading</h3>  
        Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops  
        toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate  
        cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.   
        Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. 
        Powder croissant jelly beans pastry.  
        </section>  
    </p>  

</article>

Zusammenfassung

Wie von den Gründern des World Wide Web und den Direktoren des W3C vorhergesagt, sollen alle neuen Elemente, die HTML5 erstellt, die Webstruktur semantischer machen. Die korrekte Anwendung dieser Elemente ist unter Webentwicklern und -designern immer noch umstritten.

Verwechseln Sie die Ideen auf keinen Fall. Wie ich bereits erwähnt habe: Wenn es Sinn macht und Sie sehen, dass die Struktur damit Sinn macht, dann verwenden Sie es.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Abschnitts und der Artikelbeispiele für semantisches HTML5-Markup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!