Detaillierte Erläuterung neuer Tags und allgemeiner Tags im HTML5_HTML5-Tutorial

WBOY

Freigeben： 2016-05-16 15:48:18

Original

1444 Leute haben es durchsucht

Heute werde ich zunächst die neuen Strukturelemente von HTML5 vorstellen. Einige werden häufig verwendet, andere werden nicht verwendet. Obwohl ihr Erscheinungsbild die Seite semantischer und besser für SEO macht, ist es tatsächlich so, dass die Seite ihre Stile deaktiviert Die Präsentation unterscheidet sich nicht von der von Divs. Einige Schüler sagen möglicherweise, dass es in Ordnung wäre, wenn sowohl Artikel als auch Abschnitt verwendet werden könnten, da sie gleich seien und die endgültige Präsentation der Seite keinen Einfluss habe. Wenn Sie das eigentliche Projekt für Benutzer betrachten, denke ich auch, aber als Refactorer müssen wir immer noch professioneller sein und dann die Barrierefreiheit berücksichtigen, dann wird die Rolle von HTML5-Tags offensichtlicher. Also habe ich den Inhalt überprüft, ihn in meinem Blog aufgezeichnet und mit allen geteilt, damit ich ihn später wiederfinden kann.

Neue HTML5-Strukturelemente werden in Hauptstrukturelemente und Nicht-Hauptstrukturelemente unterteilt

1. Zu den Hauptstrukturelementen gehören Artikel, Abschnitt, Navigation, Zeit
2. Zu den Nicht-Hauptstrukturelementen gehören Kopfzeile, Hgroup, Fußzeile, Adresse
1 Artikel

Artikel-Tag ist semantisch gesehen ein Dokument oder eine Seite. Seine Verwendung ist wie folgt:

Normalerweise ein Artikel, eine Seite, ein eigenständiges und vollständiges Inhaltsmodul

Es hat normalerweise einen Titel und wird im Header-Tag platziert
Artikelelemente können ineinander verschachtelt werden
Es wird sehr häufig verwendet . Betonen Sie die Unabhängigkeit und achten Sie stärker auf die Verwendung von Header-Tags.

Code kopierenDer Code lautet wie folgt:

Ich bin ein Tag

Ich bin ein Absatz

Mein Inhalt

Abschnitt
Abschnitts-Tag Semantisch gesehen ist es ein Teil und wird wie folgt verwendet: Wird zur unabhängigen Unterteilung des Seiteninhalts verwendet.

Besteht normalerweise aus Inhalt und Titel. Der Abschnitt
wird selten verwendet und legt Wert auf Segmentierung und Unterteilung.

Hinweis: Im Buch „The Definitive Guide to HTML5 and CSS3“ heißt es: Wenn ein Container gestaltet werden muss oder ein Skript das Verhalten definiert, wird empfohlen, div anstelle von section zu verwenden. Verwenden Sie section nicht als Container zum Festlegen Stile.

Code kopierenDer Code lautet wie folgt:

Früchte

Wer ist Jack Ma

Jack Ma, männlich, wurde am 15. Oktober 1964 geboren in Hangzhou, Provinz Zhejiang, ein berühmter chinesischer Unternehmer, Gründer der Alibaba Group, Taobao und Alipay......

< ;/aside>

Zeit
Zeit-Tag ist semantisch gesehen Zeit. Seine Verwendung ist wie folgt:

Stellt einen bestimmten Moment in 24 Stunden oder ein bestimmtes Datum dar.
Ermöglicht einen Zeitunterschied bei der Darstellung eines Moments.
Kann Datums- und Uhrzeitangaben in vielen Formaten definieren.
Wird selten verwendet.

Code kopieren

Der Code lautet wie folgt:

6. März 2014

6. März 2014 20:00

2. Nicht themenbezogene Struktur Element
header
header-Tag ist semantisch gesehen der Header des Dokuments. Seine Verwendung ist wie folgt:

Ein Strukturelement mit Leit- und Navigationsfunktionen
Wird normalerweise auf der gesamten Seite oder dem Titel eines Inhaltsblocks innerhalb der Seite platziert
Es gibt keine Begrenzung für die Anzahl der Header-Tags auf einer Webseite
Nutzungshäufigkeit Extrem hoch und relativ leicht verständlich.

Code kopieren

Der Code lautet wie folgt:

Ich bin der große Kopf

Ich bin der Hals

Ich bin der Körper

hgroup
hgroup-Tag. Semantisch gesehen handelt es sich um eine Titelgruppe und ihre Verwendung ist wie folgt:

Als untergeordnetes Element des Header-Tags
Verwenden Sie hgroup nur, wenn ein Inhaltsmodul den Haupttitel und mindestens einen Untertitel enthält
Gruppieren Sie normalerweise h1~h6-Elemente
Wird häufig verwendet.

Code kopieren

Der Code lautet wie folgt:

Ich bin Liu Bei

Ich bin Guan Yu

I bin Zhang Fei

Lu Bu war fassungslos

Fußzeile
Fußzeilen-Tag ist semantisch gesehen die Fußnote des Dokuments. Seine Verwendung ist wie folgt:

Fußnoten in einem Inhaltsblockbereich
Normalerweise handelt es sich bei dem Inhalt um Kontaktinformationen, verwandte Lektüre, Urheberrechtsinformationen usw.
Es wird häufig verwendet und ist relativ leicht zu verstehen.

Code kopieren

Der Code lautet wie folgt:

Lu Bu war fassungslos

Adresse
Adress-Tag ist semantisch gesehen eine Adresse. Seine Verwendung ist wie folgt:

Wird für Kontaktinformationen in Dokumenten verwendet.
Normalerweise handelt es sich bei dem Inhalt um den Autor, den Website-Link, die E-Mail-Adresse, die Adresse, die Telefonnummer usw.
Wird selten verwendet.

Code kopieren

Der Code lautet wie folgt:

Autor: Zhang Sanfeng
Adresse: Wudang Mountain
Kontaktinformationen: 1247

Ich hoffe, dieser Artikel kann allen eine Anleitung zur Verwendung von HTML5-Struktur-Tags geben. Wenn Sie Fehler im Inhalt finden, können Sie mich gerne korrigieren~