1. Warum brauchen wir semantische Tags?
Das vorherige HTML war im Wesentlichen div + CSS. Div hat jedoch keine Bedeutung und verlässt sich ausschließlich auf CSS, um den Stil der Seite anzuzeigen. Daher haben Entwickler in den letzten Jahren die Semantisierung der HTML-Struktur vorgeschlagen, sodass w3c semantische Tags formuliert hat.
2. Was ist Semantik?
Semantisch bedeutet, dass die Tags, aus denen die HTML-Struktur besteht, sinnvoll sein sollten. Beispielsweise bedeutet <header> den Kopf, <main> den Hauptteil der Seite und <footer> das Ende der Seite. Dann ist die durch diese Tags gebildete HTML-Struktur sinnvoll und semantisch. Wenn Kopf, Inhalt und Ende der Seite durch Divs dargestellt werden, handelt es sich nicht um eine semantische HTML-Struktur.
3. Woher wissen Sie, ob Ihre Seitenstruktur semantisch ist?
Entfernen Sie einfach das CSS, um zu sehen, ob die Struktur des HTML-Codes klar ist, und prüfen Sie dann, ob der Inhalt der Seite normal angezeigt wird.
4. Welche Vorteile bietet die Semantik? Die HTML-Struktur mit semantischen Tags ist klarer und erleichtert das Schreiben von Codes. Für das Team ist es praktisch für die Entwicklung und Wartung des Teams. Für Crawler ist es vorteilhaft für SEO und für Browser bequemer zu analysieren, sodass unsere Website besser gecrawlt und von Suchmaschinen aufgenommen wird und natürlicher mehr Verkehr erhält. Das Wichtigste ist für Benutzer. Aufgrund der Geschwindigkeit des Netzwerks lädt die Seite kein CSS und die Seite kann auch eine gute Seitenstruktur darstellen; · Auf speziellen Terminals, wie z Für sehbehinderte Leser kann semantisches
HTML eine gute Struktur darstellen .
5. Wie kann ich semantisches HTML schreiben?
(1) Verwenden Sie weniger oder keine <div>- und <span>-Tags, verwenden Sie <p>-Tags anstelle von <div>-Tags; da div und span keine Bedeutung haben, eignen sie sich sehr gut als Container-Tags (2) Verwenden Sie keine reinen Stil-Tags wie: <b>, <font>, <u>-Tags; verwenden Sie nicht <b> und <i> (3) Betonen Sie Text in <strong>- oder <em>-Tags; verwenden Sie <em> und <strong> zur Hervorhebung und <b> für reine
Fettdruckigkeit
.
Anmerkungen: Die Tag-Semantik von <b> ist „fett“, die Tag-Semantik von <em> ist „Hervorhebung“, die Tag-Semantik von <strong> ist „stärkere Hervorhebung“ und „em“ ist standardmäßig kursiv, „strong“ ist fett.
(4) Wenn Sie eine Tabelle verwenden, verwenden Sie <caption> für den Titel, <thead> für die Kopfzeile, <tbody> für den Hauptteil, <tfoot> für das Ende, <th> für die Kopfzeile und <td> für die Zelle (5) <filedset> für das Formularfeld und <lengend>-Tag, um den Zweck des Formulars zu erläutern; Text, der nicht geladen wurde (8) Es ist falsch, br zu verwenden, um den Zeilenabstand zu erhöhen. Das <br />-Tag wird hauptsächlich zum Umbrechen von Textinhalten verwendet ( 9) Neue semantische HTML5-Tags wie <header>, <aside>, <article>, <section> , <footer>
, <nav> usw.
6. Neue semantische HTML5-Elemente
Die folgenden Tags gelten für das Gesamtlayout der Seite
<Header>: Der Header enthält normalerweise ein Website-Logo, die Hauptnavigation, Links zur vollständigen Website und ein Suchfeld.
<nav>: Navigation markieren, wird nur für wichtige Linkgruppen im Dokument verwendet.
<main>: Der Hauptinhalt der Seite. Eine Seite kann nur einmal verwendet werden. Wenn es sich um eine Webanwendung handelt, umgeben Sie deren Hauptfunktion.
<Artikel>: Definiert externen Inhalt, wobei der Inhalt unabhängig vom Rest des Dokuments ist.
<Abschnitt>: Definiert den Abschnitt (Abschnitt, Abschnitt) im Dokument. Zum Beispiel Kapitel, Kopf- und Fußzeilen oder andere Teile des Dokuments.
<aside>: Definiert Inhalte außerhalb des Inhalts, auf dem sie platziert sind. Zum Beispiel eine Seitenleiste, eine Reihe von Links zu einem Artikel, eine Anzeige, ein benutzerfreundlicher Link, eine Liste verwandter Produkte usw.
<Fußzeile>: Fußzeile. Nur wenn das übergeordnete Element der Hauptteil ist, handelt es sich um die Fußzeile der gesamten Seite.
<hgroup>: Titelkombination (zwei Titel in einer Box, kombinierbar).
Für die Seitendetails zur Anzeige des entsprechenden Tags
<small> gilt Folgendes: Präsentieren Sie den kleinen Schrifteffekt, legen Sie die Regeln fest und geben Sie den Haftungsausschluss, den Kommentar, die Signatur und das Urheberrecht ein.
<strong>: Wie das em-Tag wird es zur Hervorhebung von Text verwendet, weist jedoch eine stärkere Betonung auf.
<em>: Der darin enthaltene Text wird als hervorgehobener Inhalt ausgedrückt, der kursiv dargestellt wird.
<mark>: Verwenden Sie Gelb, um einen Teil des Textes hervorzuheben.
<figure>: Gibt unabhängige Flussinhalte (Bilder, Diagramme, Fotos, Codes usw.) an (standardmäßig mit einem Rand von etwa 40 Pixel).
<figcaption>: Definiert den Titel des Abbildungselements, der an der Position des ersten oder letzten untergeordneten Elements des Abbildungselements platziert werden soll.
<cite>: Zeigt an, dass der enthaltene Text eine Referenz zitiert, beispielsweise den Titel eines Buches oder einer Zeitschrift. (Text wird kursiv dargestellt)
<blockquoto>: Definiert Blockzitate, die ihr eigenes Leerzeichen haben.
<time>: Das datetime-Attribut folgt einem bestimmten Format. Wenn dieses Attribut weggelassen wird, muss der Textinhalt in einem gültigen Datums- oder Uhrzeitformat vorliegen.
<abbr>: Abkürzung oder Abkürzung.
<dfn>: Definiert das Begriffselement, muss neben der Definition stehen und kann im Beschreibungslisten-DL-Element verwendet werden.
<Adresse>: Kontaktinformationen (E-Mail-Adresse, Link zur Kontaktseite) des Autors, der zugehörigen Person oder Organisation.
<del>: Der zu entfernende Inhalt.
<ins>: Inhalt hinzugefügt.
<code>: Markup-Code.
<Meter>: Definiert eine Skalarmessung innerhalb eines bekannten Bereichs oder Bruchwerts. (Internet Explorer unterstützt nicht
