Heim > Web-Frontend > H5-Tutorial > Unterschiede und Verwendungseinführung von div, Artikel und Abschnitt in HTML5_html5-Tutorial-Fähigkeiten

Unterschiede und Verwendungseinführung von div, Artikel und Abschnitt in HTML5_html5-Tutorial-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:48:56
Original
1845 Leute haben es durchsucht

Ich lerne kürzlich HTML5 und fühle mich etwas unwohl, weil sich einige Tags geändert haben, insbesondere die drei Tags div und section Article. Ich habe versucht, HTML5 und CSS3 zum Layouten der Webseite zu verwenden Ich habe eine kleine Idee, und unten ist eine einfache Webseite, die ich gerade als Referenz erstellt habe. Schauen Sie sich sie zuerst an und machen Sie sich zumindest eine Vorstellung von der Struktur von HTML5.

div

HTML-Spezifikation: „Das div-Element hat überhaupt keine besondere Bedeutung.“

Dieses Tag sehen und verwenden wir größtenteils ein Etikett. Es hat an sich keine Semantik und wird als Aufhänger für Layout und Stil oder Skripterstellung verwendet.

Abschnitt
HTML-Spezifikation: „Das Abschnittselement stellt einen allgemeinen Abschnitt eines Dokuments oder einer Anwendung dar. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten, typischerweise mit einem Überschrift.“

Im Gegensatz zur Semantik von div ist section einfach ausgedrückt ein div mit Semantik, aber ich glaube nicht, dass es wirklich so einfach ist. Ein Abschnitt stellt einen aktuellen Inhalt dar, normalerweise mit einem Titel. Wenn wir das sehen, denken wir vielleicht, dass ein Blog-Beitrag oder ein separater Kommentar nur den Abschnitt verwenden kann? Lesen Sie weiter:

„Autoren werden ermutigt, das Artikelelement anstelle des Abschnittselements zu verwenden, wenn es sinnvoll wäre, den Inhalt des Elements zu syndizieren.“ Wenn relevant, sollte der Artikel anstelle des Abschnitts verwendet werden.

Wann sollte der Abschnitt verwendet werden? Dann schauen Sie sich Folgendes an: „Beispiele für Abschnitte wären Kapitel, die verschiedenen Registerseiten in einem Registerdialogfeld oder die nummerierten Abschnitte einer Website, die für eine Einleitung in Abschnitte unterteilt werden könnten.“ Nachrichten und Kontaktinformationen.“

Typische Anwendungsszenarien umfassen Kapitel von Artikeln, Registerkarten in Tag-Dialogfeldern oder nummerierte Abschnitte in Artikeln. Die Homepage einer Website kann in Abschnitte wie Einführung, Neuigkeiten und Kontaktinformationen unterteilt werden. Tatsächlich bin ich sehr an den hier vermittelten Informationen interessiert, da ich der Meinung bin, dass der unten vorgestellte Abschnitt und der Artikel besser für modulare Anwendungen geeignet sind. Dieses Thema wird in Zukunft in einem speziellen Artikel behandelt, daher werde ich es hier überspringen zur Zeit.

Beachten Sie, dass das W3C außerdem warnt:

„Das Abschnittselement ist kein generisches Containerelement, wenn es zu Gestaltungszwecken oder zur Erleichterung der Skripterstellung benötigt wird stattdessen das div-Element. Als allgemeine Regel gilt, dass das Abschnittselement nur dann geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird. Wenn ein Tag nur zur Gestaltung oder zur Erleichterung der Skripterstellung dient, sollte div verwendet werden. Im Allgemeinen ist ein Abschnitt geeignet, wenn der Inhalt des Elements explizit in der Dokumentgliederung erscheint.


Artikel

HTML-Spezifikation: „Das Artikelelement stellt eine eigenständige Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Website dar und ist im Prinzip unabhängig verteilbar oder wiederverwendbar.“ , z. B. bei der Syndizierung.“

Artikel ist ein spezieller Abschnitts-Tag, der eine klarere Semantik als Abschnitt hat und einen unabhängigen und vollständigen Block verwandter Inhalte darstellt. 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.
Die HTML-Spezifikation listet dann einige anwendbare Szenarien für den Artikel auf. „Dies kann ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.“
Wenn der Artikel eingebettet ist Artikel Grundsätzlich steht der Inhalt des inneren Artikels im Zusammenhang mit dem 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.

Die Frage ist, was als „vollständig unabhängiger Inhalt“ gilt. Eine der einfachsten Möglichkeiten, dies festzustellen, besteht darin, zu prüfen, ob der Inhalt im RSS-Feed vollständig ist. Prüfen Sie, ob der Inhalt ohne seinen Kontext vollständig und unabhängig ist.

Beispiel:

HTML-Seite:





Code kopieren

Der Code ist wie folgt folgt:





初学html5



















HTML5 CSS3-Webseite



Der Schmerz selbst ist wichtig, das Coaching von elitVivamus wird verfolgt und gezielt durchgeführt. Maecenas hasst dieses Ferment. Der Kurs eignet sich für stille Teilhaber, die sich durch unsere Ehen und die hymenäischen Projekte den Ufern zuwenden. Fusce sagittis porta mauris, es ist wichtig, Angst in die Pfeile der Strafverfolgungsbehörden zu legen. Doch das medizinische Personal braucht Schmerzlinderung. Bis zur Zeit des Pulvinar. Aber es ist eine schlechte Idee, und das wurde gesagt. Ich habe Angst vor dem Boot, es ist wichtig, schwanger zu sein, es ist ein großer Alkoholkonsum. Wir leben und jetzt reden wir. Der Kunde ist sehr wichtig, dem Kunden wird der Kunde folgen. Bei jemandem nur ein bisschen. Für die Ergebnisse sind die Mitglieder der Ultricies verantwortlich. Jasminsauce, mein Eros. Dem Eigenheim werden Immobilienfahrzeuge folgen. Es war kalt oder massenhaft.


Eine Demonstration von Listenelementen



















< p> So, dass der Autor einfach Das Büro ist so vollständig wie eh und je. Aenean vulputate interdum fieber, sed dapibus mi ultricies convallis. Chatten Sie von nun an und dekorieren Sie es, wenn Sie dies nicht tun. Um die Schicht immer zu investieren. morgen eu nibh lorem Aber es ist wichtig, sich um das Leben des medizinischen Personals zu kümmern und es zu hassen. Er ist kein reicher Mann und lässt sich sehr leicht eliminieren. Maecenas möchte, dass Fußball Spaß macht und nicht zur Zielscheibe wird. Es ist völlig weich, deshalb ist es schmeichelhaft. Von jedem wird erwartet, dass er sich um die Immobilie kümmert. Kinderleben der Kindertrauer. Der Kunde ist sehr wichtig, dem Kunden wird der Kunde folgen. Aber der Verlauf des Feldzugs sollte das Tal des Ullamcorper sein. Solange das Leben nicht groß ist, gibt es kein Schwimmbad und nicht einmal einen Hinterhof. Bei Morbidität ist es wichtig, sich um das Geschwür zu kümmern und nicht um das Fieber selbst oder den Verlauf des Bettes. Bis er nicht einmal mehr in den Salat kommt. Wenn es nicht hässlich ist, wer wird dann im Leben jetzt Karriere machen?






© Copyright Dave Woods 2009




CSS-Seite:


Kopieren Sie den Code

@charset "utf-8";
/* CSS-Dokument */
#container{
width: 840px;
Rand: 20 Pixel automatisch;
Hintergrund:#fff;
padding:30px;
overflow:hidden;
}
/*-------------- header ----------------*/
#main-navigation {
border-bottom:5px solid #666;
}
#main-navigation ul{
overflow:hidden;
Breite:100 %;
list-style:none;
Schriftgröße:1,6em;
}
#main-navigation li{
float:left;
}
#main-navigation li a{
background:#999;
Rand: 0 5px 0 0;
Auffüllung:5px 30px;
display:block;
Farbe:#fff;
text-decoration:none;
}
#main-navigation li.current a{
background:#666;
}
#main-navigation li a:hover{
background:#777;
}
/*-------------------------- Artikel -------------- ----------*/
Artikel{
width:100%;
overflow:hidden;
}
Abschnitt{
float:left;
Breite:500px;
}
/*-------------------------- Artikel -------------- ----------*/
aside{
float:right;
Breite:310px;
}
/*-------------------------- Artikel -------------- ----------*/
Fußzeile{
width:840px;
Rand:20px automatisch;
Schriftgröße:1,4em;
text-align:center;
}

总结:
div section Article ,语义是从无到有,逐渐增强的。div式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 Artikel.原则上来说,能使用 Artikel的时候, 也是可以使用 section 的, 但是实际上, 假如使用 Article 更合适, 那么就不要使用 section 。nav 和 aside. 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 Abschnitt 了.

对于 div 和 Abschnitt、 Artikel 以及其他标签的区分比较简单.对于 Abschnitt 和 Artikel 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上.因为其实说Abschnitt „起来“ , Artikel 才是一个完整的整体ar
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