<strong>1. Was sind semantische HTML-Tags?
Semantische Tags sollen Tags eine eigene Bedeutung verleihen.
<p>一行文字</p><span>一行文字</span>
Wie im obigen Code gezeigt, besteht einer der Unterschiede zwischen dem <code>p-Tag und dem <code>span-Tag darin, dass die Bedeutung des <code>p-Tags ist: Absatz. Das Tag <code>span hat keine eindeutige Bedeutung.
<h1>2. Vorteile semantischer TagsDie Codestruktur ist klar, leicht lesbar und förderlich für die Teamentwicklung.
<li>Komfortables Parsen durch andere Geräte (z. B. Bildschirmlesegeräte, Blindlesegeräte, mobile Geräte), um Webseiten semantisch darzustellen.
<li>Gut für die Suchmaschinenoptimierung (SEO).
Daher sollten wir beim Schreiben der Seitenstruktur versuchen, semantische HTML-Tags zu verwenden
<code><title>: Der Hauptinhalt der Seite.
<li><code><hn>: h1~h6, hierarchische Titel, Koordination von <code><h1> und <code><title> ist förderlich für die Suchmaschinenoptimierung.
<li><code><ul>: Ungeordnete Liste.
<li><code><li>: geordnete Liste.
<li><code><header>: Die Kopfzeile enthält normalerweise das Website-Logo, die Hauptnavigation, seitenweite Links und ein Suchfeld.
<li><code><nav>: Markierungsnavigation, wird nur für wichtige Linkgruppen im Dokument verwendet.
<li><code><main>: Der Hauptinhalt der Seite, der nur einmal auf einer Seite verwendet werden kann. Wenn es sich um eine Webanwendung handelt, umgeben Sie deren Hauptfunktionen.
<li><code><article>: Definiert externen Inhalt, der vom Rest des Dokuments unabhängig ist.
<li><code><section>: Definieren Sie Abschnitte (Abschnitte, Abschnitte) im Dokument. Zum Beispiel Kapitel, Kopf- und Fußzeilen oder andere Teile des Dokuments.
<li><code><aside>: Definiert Inhalte über den Inhalt hinaus, in dem sie sich befinden. Zum Beispiel eine Seitenleiste, eine Reihe von Links zum Artikel, Werbung, benutzerfreundliche Links, verwandte Produktlisten usw.
<li><code><footer>: Fußzeile. Nur wenn das übergeordnete Element der Hauptteil ist, handelt es sich um die Fußzeile der gesamten Seite.
<li><code><small>: Kleinen Schrifteffekt anzeigen, Details angeben, Haftungsausschluss, Anmerkung, Signatur und Urheberrecht eingeben.
<li><code><strong>: Wie das Tag <code>em wird es zum Hervorheben von Text verwendet, hebt den Text jedoch stärker hervor.
<li><code><em>: Drücken Sie den Text als hervorgehobenen Inhalt aus, ausgedrückt in Kursivschrift.
<li><code><mark>: Verwenden Sie Gelb, um einen Teil des Textes hervorzuheben.
<li><code><figure>: Gibt unabhängige Flussinhalte (Bilder, Diagramme, Fotos, Code usw.) an (der Standardrand beträgt etwa 40 Pixel).
<li><code><figcaption>: Definiert den Titel des <code>figure-Elements, der an der Position des ersten oder letzten untergeordneten Elements des <code>figure-Elements platziert werden soll.
<li><code><cite>: Zeigt an, dass sich der enthaltene Text auf eine Referenz bezieht, beispielsweise auf den Titel eines Buches oder einer Zeitschrift.
<li><code><blockquoto>: Definieren Sie Blockreferenzen, die ihren eigenen Raum haben.
<li><code><q>: Kurzes Zitat (browserübergreifende Probleme, vermeiden Sie die Verwendung).
<li><code><time>: Das datetime-Attribut folgt einem bestimmten Format. Wenn dieses Attribut ignoriert wird, muss der Textinhalt in einem zulässigen Datums- oder Uhrzeitformat vorliegen.
<li><code><abbr>: Abkürzung oder Abkürzung.
<li><code><dfn>: Definitionsbegriffselement, das unmittelbar an die Definition angrenzen muss und im Beschreibungslisten-DL-Element verwendet werden kann.
<li><code><address>: Kontaktinformationen (E-Mail-Adresse, Link zur Kontaktseite) für den Autor, die relevante Person oder Organisation.
<li><code><del>: Inhalt entfernt.
<li><code><ins>: Inhalt hinzugefügt.
<li><code><code>: Tag-Code.
<li><code><meter>: Definiert eine skalare Messung innerhalb eines bekannten Bereichs oder Bruchwerts. (Internet Explorer unterstützt das Meter-Tag nicht)
<li><code><progress>: Definiert den laufenden Fortschritt (Prozess).
Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial
