Ist Semantik eine neue Funktion von HTML5?

Semantisierung ist eine neue Funktion von HTML5: 1. Ermöglicht die Darstellung einer besseren Inhaltsstruktur und Codestruktur; 3. Ermöglicht die Analyse durch Browser; es besser; 5. Es ist einfacher für die Teamentwicklung und -wartung.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

1. Was ist HTML-Semantik?

Grundsätzlich dreht es sich um mehrere Haupt-Tags, wie Titel (H1~H6), Liste (li), Hervorhebung (starkes Em) usw.>

Entsprechend der Struktur des Inhalts (Inhaltssemantik), Auswahl Geeignete Tags (Code-Semantik) erleichtern Entwicklern das Lesen und Schreiben von eleganterem Code und ermöglichen gleichzeitig Browser-Crawlern und Maschinen eine bessere Analyse .

2. Warum Semantik? Was ist der Nutzen?

• Um eine gute Inhaltsstruktur und Codestruktur auf der Seite ohne CSS darzustellen: Um bei nackter Ausführung gut auszusehen;

• das Benutzererlebnis zu verbessern: Verwenden Sie beispielsweise Titel, alt Wird verwendet, um Substantive oder Bildinformationen zu erklären, und die flexible Verwendung von Label-Tags ist förderlich für

  SEO
: Durch die Einrichtung einer guten Kommunikation mit Suchmaschinen können Crawler effektivere Informationen crawlen: Crawler verlassen sich auf Labels, um den Kontext zu bestimmen Die Gewichtung jedes Schlüsselworts;

• erleichtert das Parsen

  anderer Geräte
(z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf sinnvolle Weise darzustellen;

• erleichtert die Teamentwicklung

  und die Semantisierung ist besser lesbar, was ein wichtiger Trend im nächsten Schritt von Webseiten ist, die alle W3C-Standards befolgen, was die Differenzierung verringern kann.

• 3. Worauf sollten Sie beim Schreiben von HTML-Code achten?

Verwenden Sie die unsemantischen Tags p und span so wenig wie möglich.

• Wenn die Semantik nicht offensichtlich ist, können Sie p oder p verwenden. Versuchen Sie es mit p, da p standardmäßig einen oberen und unteren Abstand hat. Dies ist vorteilhaft für die Kompatibilität mit speziellen Terminals.

• Verwenden Sie keine reinen Style-Tags wie: b, Schriftart, u usw., sondern verwenden Sie stattdessen CSS-Einstellungen.

• Text, der hervorgehoben werden muss, kann in die Strong- oder Em-Tags eingefügt werden (Browser-Standardstile, wenn Sie sie mit CSS angeben können, benötigen Sie sie nicht. Der Standardstil von Strong ist fett (nicht). t verwenden Sie b), und em ist kursiv (verwenden Sie es nicht). Schwanz. Tabellenüberschriften sollten von normalen Zellen unterschieden werden.

• Formularfelder sollten mit Fieldset-Tags umschlossen werden, und Legenden-Tags sollten verwendet werden, um den Zweck des Formulars zu beschreiben Jedes Eingabe-Tag entspricht dem Beschreibungstext, der das Label-Tag verwenden muss. Durch Festlegen des ID-Attributs für die Eingabe und Setzen von for=someld im Label-Tag wird der Beschreibungstext mit der entsprechenden Eingabe verknüpft.

• 4. Welche neuen semantischen Tags zu HTML5 hinzugefügt werden, beschreiben Sie bitte im Detail.

• 1),
                          Definieren Sie die Abschnitte und Absätze des Hauptteils des Dokuments. T 2), & lt; Article & gt; & lt;/article & gt; ein spezielles Abschnitts-Tag, das eine klarere Semantik hat als Abschnitt. Definieren Sie einen eigenständigen, vollständigen Inhaltsblock von außen, beispielsweise einen Forumsartikel oder einen Blogtext. . .
  3),
•                                                                                                                                                                                                                                                         . Zum Beispiel Anzeigen, Linkgruppen, Seitenleisten. . .
  4),

　 Definieren Sie die Kopfzeile des Dokuments und der Seite. In der Regel handelt es sich um einige Leit- und Navigationsinformationen, die sich nicht auf den gesamten Seitenkopf beschränken, sondern auch im Inhalt verwendet werden können.

5),

　 Definiert die Fußzeile des Dokuments und der Seite, ähnlich der Kopfzeile.

6)、

　 Definiert einen Navigationsteil, der aus einer Linkgruppe besteht, deren Links auf andere Webseiten oder andere Teile der aktuellen Seite verweisen können.

7),

　 Wird zum Kombinieren der Titelelemente (h1~h6) einer Webseite oder eines Abschnitts verwendet.

8),

　 Wird zum Kombinieren von Elementen verwendet.

9),

　 Fügen Sie dem Abbildungselement einen Titel hinzu. Im Allgemeinen auf dem ersten untergeordneten Element oder dem letzten untergeordneten Element der Figur platziert.

10),

　 Definition der Details des Elements, der Benutzer kann darauf klicken, um es anzuzeigen oder auszublenden.

11),

Wird in Verbindung mit Details verwendet, um den Titel der Details einzuschließen.

12),

Wird zum Zeichnen auf Leinwand verwendet.

13),

Video definieren.

14),

Audio definieren.

15),

　 Definieren Sie den Inhalt der eingebetteten Webseite. Zum Beispiel Plug-Ins.

16),

　 Dieses Tag definiert Medienelemente für Medienelemente (wie Video, Audio).

17),

　 Definieren Sie eine Liste optionaler Daten, die in Verbindung mit der Eingabe () verwendet werden, um Eingabewerte zu erstellen Dropdown-Liste.

18),

　 Zeigen Sie dem Benutzer visuell den Text an, den Sie hervorheben möchten. Beispielsweise werden Suchbegriffe für Benutzer in den Suchergebnissen hervorgehoben.

19),

　  Gewichte und Maße, wobei Rot, Gelb und Grün verwendet werden, um den Bereich eines Werts anzuzeigen.

20),

　 Definieren Sie verschiedene Ausgabetypen, der Stil ist der gleiche wie span.

21),

　 Fortschrittsbalken, laufender Fortschritt.

22),

　 Datum oder Uhrzeit definieren.

23),

　 Definieren Sie den verschlüsselten Inhalt.

24),

　 Definieren Sie das Befehlsverhalten.

Verwandte Empfehlungen: „HTML-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonIst Semantik eine neue Funktion von HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!