Heim > Web-Frontend > H5-Tutorial > Detaillierte Einführung in den Unterschied zwischen HTML5-Artikel und -Abschnitt

Detaillierte Einführung in den Unterschied zwischen HTML5-Artikel und -Abschnitt

黄舟
Freigeben: 2018-05-15 15:49:45
Original
2900 Leute haben es durchsucht

Inhaltsblock bezieht sich auf eine Einheit, die eine HTML-Seite logisch unterteilt. Bei Seiten-Websites kann jeder Teil wie das Navigationsmenü, der Artikeltext und die Artikelkommentare als Inhaltsblock bezeichnet werden.
Artikelelement
Das Artikelelement stellt unabhängige, vollständige Inhalte in einem Dokument, einer Seite oder einer Anwendung dar, auf die unabhängig extern verwiesen werden kann. Dabei kann es sich um einen Blog- oder Zeitungsartikel, einen Forumsbeitrag, einen Benutzerkommentar oder ein eigenständiges Plug-in oder einen beliebigen anderen eigenständigen Inhalt handeln. Zusätzlich zum Inhalt verfügt ein Artikelelement normalerweise über einen eigenen Titel (normalerweise in einem Header-Element platziert) und manchmal über eigene Fußnoten.

<article>      
<header>             
<h1>标题</h1>           
<p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>  
</header>
  <p>article的使用方法</p>        
  <footer>            
  <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>  
  </footer>
  </article>
Nach dem Login kopieren

Hinweis: Artikelelemente können verschachtelt werden, innerer Inhalt muss dies grundsätzlich tun sich auf den äußeren Inhalt beziehen. Beispielsweise können in einem Blog-Beitrag Kommentare zum Artikel mithilfe von Artikelelementen verschachtelt werden; das Artikelelement, das zur Darstellung der Kommentare verwendet wird, ist in dem Artikelelement enthalten, das den Gesamtinhalt darstellt.
Der verschachtelte Code lautet wie folgt:

<article>

  <header>
            <h1>article元素使用方法</h1>
    <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  </header>

  <p>此标签里显示的是article整个文章的主要内容,,下面的section元素里是对该文章的评论</p>
      
  <section>
            <h2>评论</h2>
    <article>
                  <header>
        <h3>发表者:maizi</h3>
        <p><time pubdate datetime="2016-6-14">1小时前</time></p>
      </header>  
      <p>这篇文章很不错啊,顶一下!</p>
           </article> 
    <article>
                  <header>            
        <h3>发表者:小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
      </header>
    <p>这篇文章很不错啊,对article解释的很详细</p>  
    </article>
      </section>
</article>
Nach dem Login kopieren

Der Beispielinhalt ist in mehrere Teile unterteilt. Der Artikeltitel wird im Header-Element platziert. und der Artikeltext wird im p-Element nach dem Header-Element platziert, das Abschnittselement unterscheidet den Text von den Kommentaren (es ist ein blockierendes Element, das zur Unterscheidung des Inhalts auf der Seite verwendet wird). Der Inhalt des Kommentars wird in den Abschnitt eingebettet Im Kommentar ist der Kommentar jeder Person relativ unabhängig und vollständig, daher wird für alle ein Artikelelement verwendet. Das Artikelelement des Kommentars kann in einen Titel- und einen Kommentarinhaltsteil unterteilt werden, die im Kopfelement und platziert werden p bzw. Element.
1. Das Abschnittselement wird verwendet, um den Inhalt auf der Seite in der Website oder Anwendung zu unterteilen. Die Funktion des Abschnittselements besteht darin, den Inhalt auf der Seite zu unterteilen Teile, oder Wenn es darum geht, einen Artikel in Abschnitte zu unterteilen,

2. Ein Abschnittselement besteht normalerweise aus Inhalt und seinem Titel . Es wird im Allgemeinen nicht empfohlen, das Abschnittselement für Inhalte ohne Titel zu verwenden,

3. Das Abschnittselement ist kein gewöhnliches Containerelement, wenn ein Inhalt dies erfordert direkt formatiert werden Oder wenn Sie das -Verhalten über ein Skript definieren, wird empfohlen, p anstelle des Abschnittselements

zu verwenden. Wenn die Elemente „article“, „nav“ und „aside“ alle die folgenden Bedingungen erfüllen, verwenden Sie das Abschnittselement nicht, um es zu definieren

5. Das Inhalte im Abschnittselement können separat in der Datenbank gespeichert oder in ein Word-Dokument ausgegeben werden.

 <section>
    <h1>section元素的</h1>标题
    <p>section区块的主题部分</p>
  </section>
Nach dem Login kopieren

In HTML5 können Sie die untergeordneten Teile aller Seiten einbinden, wie Navigationsleisten, Menüs, Copyright-Hinweise, usw. Auf einer einheitlichen Seite können CSS-Stile zur Dekoration verwendet werden. Abschließend werden die Tabus bei der Verwendung des Abschnittselements wie folgt zusammengefasst: 1) Verwenden Sie das Abschnittselement nicht als Seitencontainer zum Festlegen von Stilen, das ist die Aufgabe des p-Elements. 2) Wenn das Artikelelement, das Seitenelement oder das Navigationselement besser für die Verwendung geeignet ist, verwenden Sie nicht das Abschnittselement.
3) Verwenden Sie das Abschnittselement nicht für Inhaltsblöcke ohne Titel.

3. Der Unterschied zwischen den beiden:
Nachdem ich so viel oben gesagt habe, was ist der Unterschied zwischen den beiden? Tatsächlich kann das Artikelelement in HTML5 als eine spezielle Art von Abschnittselement betrachtet werden, das die Unabhängigkeit stärker betont als das Abschnittselement. Das heißt, das Abschnittselement betont die Segmentierung oder Aufteilung, während der Artikel die Unabhängigkeit betont. Insbesondere wenn ein Inhalt relativ unabhängig und vollständig ist, sollten Sie das Artikelelement verwenden. Wenn Sie einen Inhalt jedoch in mehrere Absätze unterteilen möchten, sollten Sie das Abschnittselement verwenden. Darüber hinaus wird in HTML5 das p-Element zu einem Container. Bei der Verwendung von CSS-Stilen kann ein allgemeiner CSS-Stil auf diesen Container angewendet werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Unterschied zwischen HTML5-Artikel und -Abschnitt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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