Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

伊谢尔伦
Freigeben: 2017-06-16 11:01:11
Original
1747 Leute haben es durchsucht
网页制作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>
    Nach dem Login kopieren

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

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

    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!

  • 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
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!