HTML Semantische Elemente
Im Gegensatz dazu präsentieren nicht-semantische Elemente den Inhalt nur anstatt ihn zu definieren. wie und Tags. In Anbetracht der Bedeutung von semantischen HTML -Elementen haben wir diesen Leitfaden zusammengestellt, der die Liste der HTML -semantischen Elemente und ihrer Verwendung darstellt.
HTML Semantische Elemente
Das Folgende sind mehrere weit verbreitete HTML -semantische Elemente
- : Der Hauptinhalt des HTML -Dokuments wird mit diesem Tag beschrieben und wird empfohlen, nur einmal im gesamten Dokument zu verwenden.
- : Dieses semantische Element zeigt, dass der Artikel mit diesem Tag definiert und zum Schreiben von Blog -Beitrag, Nachrichtenartikeln usw. verwendet wird
- : Es fügt auf Ihrer Seite einen neuen Abschnitt hinzu, der auch verschiedene andere Tags enthalten kann.
- : Dieses Element Definieren Sie den Header -Teil Ihres Inhalts und kann für den Abschnitt Header, Artikelheader.
- : Wie der Name leitet, wird es verwendet, um jedem Inhalt Ihrer Webseite eine Fußzeile hinzuzufügen.
- : Dieses Element wird verwendet, um dem Inhalt zusätzliche Details hinzuzufügen, und der Betrachter kann diese Details nach ihren Bedürfnissen ausblenden/anzeigen.
- : Dieses Element definiert den in Tag beschriebenen Inhalt. Dadurch wird eine Überschrift erstellt und beim Klicken auf diese Überschrift ist der Inhalt des Details -Tags zu sehen.
- : Wie der Name zeigt, können Sie mit diesem Element mit dem Inline -Element ein Bild zu Ihrer Webseite hinzufügen .
- : Dieses Element wird geübt, um jeder Figur eine Bildunterschrift hinzuzufügen und im Element verwendet wird.
Aus den oben genannten Informationen hätten Sie die vorläufige Beschreibung verschiedener hTML -semantischer Elemente erhalten. In den kommenden Beispielen haben wir in mehreren Szenarien einige semantische Elemente verwendet.
Beispiel 1: Verwenden von und
Die semantischen HTML -Elemente und die folgenden Code werden miteinander verbunden, um ihre Verwendung darzustellen.
LinuxHint
Es bietet Inhalte für Linux -Benutzer, Windows -Benutzer und Entwickler
Im obigen Tag wird ein Element deklariert, in dem das Tag eingebettet ist.
Ausgang:
Der gesamte Inhalt wird mit Tag mit Tag eingeschlossen und das Tag wird verwendet, um eine Überschrift für diesen Inhalt zu definieren.
Beispiel 2: Verwenden und
Die folgenden Codezeilen präsentieren die Verwendung und das semantische Element.
Abb. 1: LinuxHint -Logo
Der obige Code wird als beschrieben als,
- Das Element enthält und Tags
- wird verwendet, um die in unserem Computer platzierte Figur zu verknüpfen und die IS für die Bildunterschrift der importierten Figur.
- Das Tag setzt den Grenzstil und die Breite des Elements.
Ausgang:
Beispiel 3: Verwenden von und
Der folgende Code übt mehrere Tags im Element aus.
Erster Abschnitt
Zweiter Abschnitt
Der obige Code wird als beschrieben als,
- Ein Artikel mit Tag mit Tag wird definiert, der zwei Abschnitte enthält
- Der Rand von wird auf festgelegt und die Polsterung von 4px ist eingestellt
- Jeder Abschnitt hat eine gepunktete Grenze und einen Rand von 2px.
Notiz: Die Grenzstile, der Rand und die Polsterung werden nur verwendet, um den aktiven Raum jedes Elements zu unterscheiden.
Ausgang:
Der Bereich innerhalb des festen Randes ist durch die gepunkteten Grenzen enthalten, dass der Raum jedes Elements besetzt ist.
Beispiel 4: Verwenden und
Die und werden normalerweise verwendet, um die Header und die Fußzeile einer Seite oder ein Element zu definieren. Der folgende Code beschreibt, wie Header und Fußzeile deklariert werden:
Header
Dieser Code repräsentiert die Verwendung von Header und Fußzeile
Fusszeile
Der Code wird wie folgt beschrieben,
- Ein Header und eine Fußzeile werden mithilfe und Tag definiert
- Ein Absatz wird zwischen Header und Fußzeile deklariert
- Hintergrundfarbe und Grenzstyle von Header und Fußzeile sind im Tag definiert
Ausgang:
Aus den oben genannten Beispielen hätten Sie die Funktionalität verschiedener semantischer Elemente verstanden.
Abschluss
Die HTML -semantischen Elemente selbst enthalten den Zweck ihrer Verwendung, wie z ,