Das beste HTML5 semantische Elemente-Tutorial im Jahr 2024. In diesem Tutorial können Sie Was ist semantische Elemente?,Browser-Unterstützung,HTML5 neue semantische Elemente,HTML5 <section> -Element,Beispiele,HTML5 <article> -Element,Beispiele,HTML5 <nav> -Element,Beispiele,HTML5 <beiseite> -Element,Beispiele,HTML5 <header> -Element,Beispiele,HTML5 <footer> -Element,Beispiele,HTML5 <Zahl> und <figcaption> -Element,Beispiele,Wir können mit diesen semantischen Elemente tun beginnen?,Internet Explorer 8 und frühere Versionen von IE Probleme, lernen
Semantics = Bedeutung.
Semantische Elemente = Erfassungselement.
Eine semantische Elemente können ihre Bedeutung für den Browser und Entwickler eindeutig beschreiben.
Beispiele für nicht-semantische Elemente: <div> und <span> - unabhängig vom Inhalt.
Beispiele für semantische Elemente: <form>, <table> und <img> - klar definiert sein Inhalt.
Internet Explorer 9+, Firefox, Chrome, Safari und Opera semantische Elemente unterstützen.
Hinweis: Internet Explorer 8 und früheren Versionen haben dieses Element nicht unterstützen , sondern das Ende des Artikels stellt eine kompatible Lösung.
Viele bestehende Websites gehören die folgenden HTML-Code: <div id = "nav"> <div class = "header"> oder <div id = "footer">, Navigationslinks, um anzuzeigen, den Kopf und Schwanz.
HTML5 bietet eine neue semantische Elemente einen anderen Teil der Webseite zu definieren:
<Section> Tag definiert das Dokument (Abschnitt, Abschnitt). Wie Kapitel, Kopf- und Fußzeilen oder andere Teile des Dokuments.
Laut W3C HTML5 Dokument: Abschnitt eine Reihe von Inhalten und den Titel enthält.
<Article> Tag definiert unabhängige Inhalte. .
<Article> Element Beispiel:
<Nav> -Tag Navigationslinks Abschnitt zu definieren.
<Nav> Element wird verwendet Seite Navigation zu definieren Links einige Bereiche, aber nicht alle Links müssen im <nav> Element enthalten sein!
<Neben> Tag definiert den Seiteninhalt über den Hauptbereich von Inhalten (wie der Sidebar).
Inhalt beiseite das Etikett sollte mit dem Hauptinhaltsbereich zugeordnet werden.
<Header> Element beschreibt den Kopfbereich des Dokuments
<Header> Element Notiz beschreibt die Anzeigefläche verwendet wird, um den Inhalt zu definieren.
Auf der Seite können Sie mehrere <header> -Element verwenden.
Das folgende Beispiel definiert den Kopf des Artikels:
<Fußzeile> Element beschreibt den unteren Bereich des Dokuments.
<Fußzeile> Element sollte die Elemente enthalten, es enthält
Eine Fußzeile der Regel des Autors Dokument enthält, Copyright-Informationen, Links Nutzungsbedingungen, Kontaktinformationen, usw.
Das Dokument können Sie mehrere <footer> -Element verwenden.
<Figure> -Tag angegeben separater Strom Inhalte (Bilder, Grafiken, Fotografien, Code, etc.).
Inhalt <Zahl> Element sollte mit dem Hauptinhalt in Verbindung gebracht werden, aber wenn es entfernt wird, reagieren nicht auf den Belegfluss Auswirkungen.
<Figcaption> -Tag den Titel <Zahl> Element definiert.
<Figcaption> Element sollte in "Bild" Element des ersten oder letzten Child-Element Position gebracht werden.
Die obigen Elemente sind Blockelemente (mit Ausnahme von <figcaption>).
Für diese Blöcke und Elemente Effekt in allen Versionen des Browsers zu übernehmen, müssen Sie in der Stylesheet-Dateiattribute (im folgenden Stil-Code ermöglicht es älteren Browsern Block-Elemente in diesem Kapitel unterstützen) einzurichten:
IE8 und früheren Versionen von IE kann nicht in diesen Elementen, CSS Effekte gerendert werden, so kann man nicht <header> verwenden, <section>, <footer>, <beiseite>, <nav>, <article>, <Zahl>, oder andere die HTML5-Elemente.
Lösung: Sie können die HTML5 Shiv Javascript-Skript verwenden, um die Kompatibilitätsprobleme von IE zu lösen. HTML5 Shiv Download: http://code.google.com/p/html5shiv/
Einmal heruntergeladen, der folgende Code in die Seite:
Der obige Code, wenn der Browser-Version weniger als IE9 html5shiv.js Datei geladen werden soll, müssen Sie es an Stelle <head> -Element, weil der IE-Browser, den Kopf nach dem Laden dieser neuen HTML5-Elemente erforderlich ist, Rendering