HTML5 semantische Elemente
Semantics = Bedeutung.
Semantische Elemente = Erfassungselement.
Was ist semantische Elemente?
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.
Browser-Unterstützung
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.
HTML5 neue semantische Elemente
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:
- <Header>
- <Nav>
- <Section>
- <Article>
- <Neben>
- <Figcaption>
- <Figure>
- <Fußzeile>
HTML5 <section> -Element
<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.
Beispiele
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Versuchen »
HTML5 <article> -Element
<Article> Tag definiert unabhängige Inhalte. .
<Article> Element Beispiel:
- Forum Post
- Blog-Beitrag
- Nachrichten Geschichte
- Kommentar
Beispiele
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
Versuchen »
HTML5 <nav> -Element
<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!
Beispiele
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Versuchen »
HTML5 <beiseite> -Element
<Neben> Tag definiert den Seiteninhalt über den Hauptbereich von Inhalten (wie der Sidebar).
Inhalt beiseite das Etikett sollte mit dem Hauptinhaltsbereich zugeordnet werden.
Beispiele
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Versuchen »
HTML5 <header> -Element
<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:
Beispiele
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>
Versuchen »
HTML5 <footer> -Element
<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.
Beispiele
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
Versuchen »
HTML5 <Zahl> und <figcaption> -Element
<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.
Beispiele
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
Versuchen »
Wir können mit diesen semantischen Elemente tun beginnen?
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:
{
display: block;
}
Internet Explorer 8 und frühere Versionen von IE Probleme
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:
<script src="html5shiv.js"></script>
<![endif]-->
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