Was sind semantische HTML-Tags? Eine vollständige Liste gängiger semantischer HTML-Tags

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 p-Tag und dem span-Tag darin, dass die Bedeutung des p-Tags ist: Absatz. Das Tag span hat keine eindeutige Bedeutung.

2. Vorteile semantischer Tags

1. Die Codestruktur ist klar, leicht lesbar und förderlich für die Teamentwicklung.

2. Komfortables Parsen durch andere Geräte (z. B. Bildschirmlesegeräte, Blindlesegeräte, mobile Geräte), um Webseiten semantisch darzustellen.

3. Gut für die Suchmaschinenoptimierung (SEO).

3. Gemeinsame semantische Tags

Daher sollten wir beim Schreiben der Seitenstruktur versuchen, semantische HTML-Tags zu verwenden

• b2386ffb911b14667cb8f0f91ea547a7: Der Hauptinhalt der Seite.

• b35601808ee30eac9a0f11ecc3d2c015: h1~h6, hierarchische Titel, Koordination von 4a249f0d628e2318394fd9b75b4636b1 und b2386ffb911b14667cb8f0f91ea547a7 ist förderlich für die Suchmaschinenoptimierung.

• ff6d136ddc5fdfeffaf53ff6ee95f185: Ungeordnete Liste.

• 25edfb22a4f469ecb59f1190150159c6: geordnete Liste.

• 1aa9e5d373740b65a0cc8f0a02150c53: Die Kopfzeile enthält normalerweise das Website-Logo, die Hauptnavigation, seitenweite Links und ein Suchfeld.

• c787b9a589a3ece771e842a6176cf8e9: Markierungsnavigation, wird nur für wichtige Linkgruppen im Dokument verwendet.

• 61b85035edf2b42260fdb5632dc5728a: Der Hauptinhalt der Seite, der nur einmal auf einer Seite verwendet werden kann. Wenn es sich um eine Webanwendung handelt, umgeben Sie deren Hauptfunktionen.

• 23c3de37f2f9ebcb477c4a90aac6fffd: Definiert externen Inhalt, der vom Rest des Dokuments unabhängig ist.

• 2f8332c8dcfd5c7dec030a070bf652c3: Definieren Sie Abschnitte (Abschnitte, Abschnitte) im Dokument. Zum Beispiel Kapitel, Kopf- und Fußzeilen oder andere Teile des Dokuments.

• 15221ee8cba27fc1d7a26c47a001eb9b: 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.

• c37f8231a37e88427e62669260f0074d: Fußzeile. Nur wenn das übergeordnete Element der Hauptteil ist, handelt es sich um die Fußzeile der gesamten Seite.

• d015d241ae6d34c34210679b5204fe85: Kleinen Schrifteffekt anzeigen, Details angeben, Haftungsausschluss, Anmerkung, Signatur und Urheberrecht eingeben.

• 8e99a69fbe029cd4e2b854e244eab143: Wie das Tag em wird es zum Hervorheben von Text verwendet, hebt den Text jedoch stärker hervor.

• 907fae80ddef53131f3292ee4f81644b: Drücken Sie den Text als hervorgehobenen Inhalt aus, ausgedrückt in Kursivschrift.

• f920514e6447cf1d171079d1371f007f: Verwenden Sie Gelb, um einen Teil des Textes hervorzuheben.

• 24203f2f45e6606542ba09fd2181843a: Gibt unabhängige Flussinhalte (Bilder, Diagramme, Fotos, Code usw.) an (der Standardrand beträgt etwa 40 Pixel).

• 614eb9dc63b3fb809437a716aa228d24: Definiert den Titel des figure-Elements, der an der Position des ersten oder letzten untergeordneten Elements des figure-Elements platziert werden soll.

• f3a85e1241a187c5ac462d886e9a968b: Zeigt an, dass sich der enthaltene Text auf eine Referenz bezieht, beispielsweise auf den Titel eines Buches oder einer Zeitschrift.

• fa57c8becaf0b8746ebae103568d6733: Definieren Sie Blockreferenzen, die ihren eigenen Raum haben.

• 1244aa79a84dea840d8e55c52dc97869: Kurzes Zitat (browserübergreifende Probleme, vermeiden Sie die Verwendung).

• 46dd80ba616c57a652514755c74c4211: Das datetime-Attribut folgt einem bestimmten Format. Wenn dieses Attribut ignoriert wird, muss der Textinhalt in einem zulässigen Datums- oder Uhrzeitformat vorliegen.

• 8a7974376be5f6c00c121222b727adb9: Abkürzung oder Abkürzung.

• 7f9d788ef50b059a7f76f3d2e4ccc9d1: Definitionsbegriffselement, das unmittelbar an die Definition angrenzen muss und im Beschreibungslisten-DL-Element verwendet werden kann.

• 208700f394e4cf40a7aa505373e0130b: Kontaktinformationen (E-Mail-Adresse, Link zur Kontaktseite) für den Autor, die relevante Person oder Organisation.

• 823db3943044a0a9a620ada8d4b1d965: Inhalt entfernt.

• 426be984ffbbb815d7d88e3543a85d91: Inhalt hinzugefügt.

• ffbe95d20f3893062224282accb13e8f: Tag-Code.

• 49c6123c49c6be380cb91db06cd3bfa9: Definiert eine skalare Messung innerhalb eines bekannten Bereichs oder Bruchwerts. (Internet Explorer unterstützt das Meter-Tag nicht)

• 6ecb87e5318a36c03c59e25d55f43372: Definiert den laufenden Fortschritt (Prozess).

Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial