Der HTML5 -Standard fügt viele neue semantische Elemente hinzu.
Hier führen wir hauptsächlich neue Elemente auf der Seitenstruktur ein.
Was ist ein semantisches ElementIn einfachen Worten sollen semantische Elemente dem Element eine Bedeutung geben (Etikett).
Wie <Weader>, die den Header darstellen, <Nooth>, um die Fußzeile anzuzeigen.
Merkmal① Einfache Wartung: Die Verwendung semantischer Elemente verfügt über klarere Seitungsstrukturinformationen, die die folgende Wartung der Seite leicht aufrechterhalten können. Sie müssen den Code nicht erneut anzeigen: Suchen Sie die Abteilung, bevor Sie den spezifischen Klassennamen finden.
② Kabinett -FREE: Es hilft, den Bildschirmleser und andere Hilfswerkzeuge zu lesen.
③ Optimierte Suchmaschinenoptimierung: Nach der Überprüfung einiger semantischer Elemente von HTML5 können Suchroboter Informationen auf seiner Indexseite sammeln.
Original -SchnittstellenlayoutIm Layout der Seite ist <div> ein sehr häufiges Element.
Um die Wartung zu erleichtern, geben Designer diese <div> -Klassname (Stilkategorie) oder ID häufig mit besonderen Namen an.
Zum Beispiel kann ein <div> -Element, das den Header, seinen Klassennamen oder seine ID darstellt, Seitenüberschriften, Header usw. sein.
Beispiel:
Seitenstruktur semantisches Element veranschaulichenDie semantischen Elemente der Seitenstruktur werden hauptsächlich für das Gesamtlayout der Seite verwendet.
Und es hat keinen besonderen Stil, es muss noch mit CSS verwendet werden.
Detaillierte Einführung <header>: Definieren Sie den Kopfbereich der Webseite oder des Artikels. Es kann Logo, Navigation, Suchleiste und so weiter enthalten.Die niedrigste Version des Browsers: dh 9, Chrome 5
Anweisungen zur Verwendung:
① Wenn es zum Beschriftung der Webseite verwendet wird, können Informationen wie Logo, Navigation und Suchleiste enthalten.
② Wenn der Titel zum Markieren des Inhalts verwendet wird, wird nur dann in Betracht gezogen, wenn der Titel an andere Informationen beigefügt ist.
<Ain>: Definieren Sie den Hauptinhalt der Webseite.Die niedrigste Version des Browsers: IE unterstützt nicht, Chrome 35
<fouter>: Definieren Sie den Schwanzbereich der Webseite oder des Artikels. Es kann Urheberrecht und Einreichung beinhalten.Die niedrigste Version des Browsers: dh 9, Chrome 5
Anweisungen zur Verwendung:
① Als Webseite enthält es in der Regel das Copyright, rechtliche Beschränkungen und Links von Websites.
② Als Fußnote des Artikels enthält es normalerweise die relevanten Informationen des Autors.
<Av>: Markieren Sie den Link der Seitennavigation. Enthält mehrere überbelegte Bereiche.Die niedrigste Version des Browsers: dh 9, Chrome 5
Anweisungen zur Verwendung:
① Eine Seite kann mehrere <AV> -Elemente enthalten, z. B. Navigation und verwandte Artikelempfehlungen.
② Die Kontaktinformationen und Zertifizierungsinformationen im Bereich <FoSE> müssen nicht in das <AV> -Element enthalten sein.
<abschnitt>: Es wird normalerweise als unabhängiger Bereich auf der Webseite gekennzeichnet.Die niedrigste Version des Browsers: dh 9, Chrome 5
Anweisungen zur Verwendung:
① kann als unabhängiger Bereich in der Webseite verwendet werden, z. B. als Abschnitt im Artikel.
<artticle>: Vollständige und unabhängige Inhaltsblöcke; Wie Nachrichten, Blog -Artikel und andere unabhängige Inhalte (ohne Kommentare oder Autorprofile).Die niedrigste Version des Browsers: dh 9, Chrome 5
<ABER>: Definieren Sie die Inhaltsblöcke außerhalb des Hauptinhaltes der Umgebung. Wie: Annotation.Die niedrigste Version des Browsers: dh 9, Chrome 5
<Abus>: Es stellt einen Abschnitt unabhängiger Inhalt dar und wird häufig mit <Figcaption> (repräsentiert) verwendet, der für Bilder, Illustrationen, Formulare, Codesegmente usw. verwendet werden kann.Die niedrigste Version des Browsers: IE 9, Chrom 8 <FigCaption>: Definieren Sie den Titel des <Abus> -Elements.
Die niedrigste Version des Browsers: dh 9, Chrome 8
Beispieldiagramm
Alte Version des Browser -Supports IE8 obenDer Browser wird als internes Element für Elemente verwendet, die nicht wissen. Die semantischen Semantikelemente von Seite sind Block -Level -Elemente, sodass Sie nur die Browser festlegen müssen, die diese Elemente nicht unterstützen, um sie als Block -Level -Elemente anzuzeigen.
Fügen Sie dem Stil den folgenden Code hinzu:
Artikel, beiseite, Details, Figcaption, Figur, Fußzeile, Header, Hgroup, Main, NAV, Abschnitt, Zusammenfassung {Anzeige: Block;} IE8 und IE8 untenBrowser unten IE8 und IE8 unterstützen den nützlichen Element -Anwendungsstil nicht, der nicht erkannt werden kann.
Erstellen Sie diese semantischen Elemente durch JS und fügen Sie grundlegende Stile hinzu.
Nehmen Sie als Beispiel den Kopfball <Script> document.createelement ('Header'); Anwendung externer DateiDiese mühsamen Kreationen haben Lei Feng geschrieben, die gerade auf die alte Version von IE geladen wurden.
<!