Der Dokumentteil, der Körperteil, enthält den Inhalt, den die Besucher sehen können. Herkömmliche HTML -Dokumente organisieren normalerweise Dokumentstrukturen über Divelemente und sind mit geeigneten Stiltabellen verbunden. Das Problem des Div -Elements fehlt jedoch semantische Informationen. Insbesondere wenn die Gewebestruktur der HTML -Seite nicht gut ist, wird sie leicht Verwirrung verursachen. In dieser Hinsicht werden HTML5 viele semantische Elemente hinzugefügt, um Divelelemente und separate Semantik und Präsentation zu ersetzen.
Alle semantischen Elemente haben ein bedeutendes Merkmal: Sie tun wirklich nichts, sie haben wenig Einfluss auf den Inhalt des Erscheinungsbilds und haben sogar überhaupt keine Auswirkungen. Es gibt mehrere Gründe für die Existenz semantischer Elemente:
1) Einfach zu ändern und zu warten. Durch das semantische Element von HTML5 können zusätzliche strukturierte Informationen vermittelt werden, was es den Menschen erleichtert, das Gesamtlayout des Dokuments und die Rolle verschiedener Blöcke zu verstehen.
2) Nicht -Oberflächen. Ein wichtiges Thema des modernen Webdesigns ist es, dass jemand auf die Webseite zugreifen kann, dh Personen, die Bildschirmleser und andere Hilfstools verwenden, können frei auf der Seite navigieren.
3) Suchmaschinenoptimierung. Mithilfe von HTML5 können Suchmaschinen Ihre Website besser verstehen und ihnen mehr Informationen zu ihren Indexseiten sammeln.
4) zukünftige Funktion. Neue Browser und Webbearbeitungswerkzeuge werden in Zukunft definitiv semantische Elemente verwenden. Zum Beispiel: Der Hauptteil des Dokuments wird vorgestellt.
Das Wichtigste ist, dass Sie, wenn Sie semantische Elemente korrekt verwenden, eine klarere Seitenstruktur erstellen und sich an den Entwicklungstrend zukünftiger Browser und Webdesign -Tools anpassen können. Im Folgenden werden semantische Elemente für Organisationsdokumentenstrukturen eingeführt.
HTML5 -DokumentstrukturDie alte HTML -Seite verwendet Divelemente, gepaart mit geeigneten Stiltabellen. Das Problem des Div -Elements besteht jedoch darin, dass sie keine Informationen auf die Seite widerspiegelt. Die HTML5 -Seite soll diese Divelemente durch beschreibende semantische Elemente ersetzen. Das folgende Beispiel enthält die in HTML5 verwendeten semantischen semantischen Elemente, um die Dokumentstruktur zu beschreiben.
<body> <Header> <hgroup> <h1> Dinge, die ich mag, </h1> <h2> von Adam Freeman </h2> </hgroup> <adresses> Fragen und Kommentare? > </address> <nav> <h1> Inhalt </h1> <li> <a href =#fruitsilike> fruits Ich mag </a> </li> <ul> <li> <a href =#morefruit> Zusätzlich von </a> </li> </ul> <li> <a href =#Aktivitäten Ich mag </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> Arten von Triathlon </a> </li> <li> <a href =#mytri> Die Art von Triathlon, auf die ich < /a> </li> </ul> </ul> </nav> </header> <caine Room = main> <Artadicle> <header> ...... </header> <beiseite> <H1 > Warum von gesund ist </h1> <abschnitt> Hier ist drei Gründe, warum jeder mehr Früchte essen sollte: <ol> <li> Frucht enthält viele Vitamine </li> <li> Frucht ist eine Faserquelle </li> <li> Frucht enthält W Callies </li> </ol> <Stichs> << Abschnitt> <p> Ich schwimmen, zyklus und renne /p> <summary> Arten von Triathlon </summary> Es gibt verschiedene Arten von Triathlon -print, Lympic und so weiter. li> <li> 40 km Zyklus </li> <li> 10 km Ausführen </li> </ol> </detail> </§> </article> </main> <nav> Weitere Informationen: <a href = http: // fruit .org> Weitere Informationen zu Obst </a> <a href = http://triathlon.org> Erfahren Sie mehr über Trithlons </a> </nav> <Foloter ID = Mainfooter> © 2011, Adam, Adam, Adam, Adam, Adam Freeman.
Das obige Dokument enthält viele HTML5 -Elemente.
TitelHTML definiert ein Titel -Element -System von H1 bis H6, und H1 ist das höchste. Der Titel derselben Ebene wird normalerweise verwendet, um den Inhalt in mehrere Teile zu teilen, jeweils ein Teil eines Themas. Der Titel auf allen Ebenen wird normalerweise verwendet, um alle Aspekte desselben Themas darzustellen. Sie bilden zusammen den Umriss des Dokuments, sodass Benutzer ihre Pflege und Struktur zunächst verstehen können, solange sie den Titel des Dokuments durchsuchen, und Benutzer schnell zu Interessensinhalten über das Titelsystem navigieren können.
<body> <h1> Früchte Ich mag </h1> ...... </body>Untertitel
Das HGroup -Element kann als Gesamtverarbeitung verwendet werden (wenn nicht HGROUP -Element verwendet wird, werden der Haupttitel und die Untertitel als zwei Titel verwendet, und nach der Verwendung von HGroup werden der Titel und Untertitel als Titel behandelt), um den Umriss von zu vermeiden Störungen des HTML -Dokuments.
<body> <hGroup> <h1> Früchte Ich mag </h1> <h2> Wie ich gelernt habe, Zitrusfrüchte </h2> </hGroup> ...... </body> </body> </body zu lieben >
Wie ich lerne, Zitrusfrüchte zu lieben, existiert ich als Untertitel von Früchten, die ich mag.
Der Hauptbereich der MarkseiteEs gibt normalerweise nur einen Teil der Seite, der seinen Hauptinhalt darstellt.
<body> ...... <Main Rolle = Main> <Artlicle> ...... </article> </main> ...... </body>
Rolle = Haupt kann den Hauptbereich der Bildschirmleserpositionierungsseite helfen.
Erstellen Sie einen ArtikelDas Artikelelement repräsentiert einen unabhängigen Inhalt im HTML -Element. Der Artikel kann in einem anderen Artikel verschachtelt werden. Eine Seite kann mehrere Artikelelemente haben, jeder Artikel kann unabhängig gebildet werden und ein Artikel kann ein oder mehrere Abschnittselemente enthalten (siehe den nächsten Abschnitt).
<body> ...... <Main Rolle = Main> <Artadicle> <header> ...... </heate> <beiseite> ... </beiseite> <Abschnitt> ... ... </§> </article> <künstler <artader> ...... </header> <beiseite> ...... </beiseite> <Abschnitt> .../Abschnitt> </article>. .. </main> ...... </body>Abschnitt
Das Abschnittselement ist neu hinzugefügt HTML5, um einen Abschnitt im Dokument darzustellen. Es gibt keine klare Spezifikation für die Verwendung des Abschnittselements. Normalerweise sollte das Abschnittselement verwendet werden, das in die Dokumentriss oder das Verzeichnis aufgenommen werden sollte. Der Abschnitt kann zu einem bestimmten Artikel gehören, und ein Artikel kann einen oder mehrere Abschnitte enthalten. Abschnittelemente enthalten normalerweise einen oder mehrere Absätze und einen Titel, der Titel ist jedoch nicht erforderlich.
<body> <Abschnitt <Hgroup> <h1> Früchte Ich mag </h1> <h2> Wie ich gelernt habe, Zitrusfrüchte zu lieben </H2> </hGroup> Ich mag Äpfel und Orangen. , Mangos, Kirschen, Aprikosen, Pflaumen, Pfirsiche und Trauben.
Das obige definiert 3 Abschnitte, verschachtelte Schichten, der Titel jedes Abschnitts ist H1. Bei verschiedenen Browsern unterscheidet sich jedoch das standardmäßige Erscheinungsbild der hierarchischen Struktur des Abschnitts, und dieses Problem kann durch Erstellen eines benutzerdefinierten Stils gelöst werden. Der Unterschied zwischen Abschnitt und Artikel besteht darin, dass der Abschnitt im Wesentlichen organisierter und struktureller ist und als unabhängiger Absatz angesehen werden kann, während Artikel einen Container darstellt.
Zuerst und SchwanzDas Header -Element repräsentiert den ersten Abschnitt, der den Header und das Logo enthalten kann. Das Header -Element enthält normalerweise ein Titelelement oder ein Hgroup -Element und kann auch die Navigationselemente dieses Abschnitts enthalten. Eine Seite kann eine willkürliche Anzahl von Header -Elementen enthalten, und ihre Bedeutung kann je nach Kontext unterschiedlich sein.
Das Foos -Element repräsentiert den Schwanz des Abschnitts, der normalerweise die zusammenfassenden Informationen des Abschnitts enthält, und kann auch die Einführung des Autors, die Copyright -Informationen, die Links zu verwandten Inhalten, Logo und Aussagen enthalten.
<body> <header> <hGroup> <h1> Dinge, die mir </h1> <h2> von Adam Freeman </h2> </hgroup> </header> <seader> <hGroup> <h1> Früchte i gefallen </Header> gefällt, </Header> <Seader> /H1> <h2> Wie ich gelernt habe, Zitrusfrüchte </h2> </hgroup> </header> ...... </Abschnitt> <seader> <h1> Aktivitäten Ich mag </h1> </header > ...... <Stichs> <Fooler ID = Mainfoter> © 2011, Adam Freeman.
Dieses Beispiel definiert 3 Header -Elemente. Das Header -Element von Körperelementen ist das erste des gesamten Dokuments.
HINWEIS: Sie können weder mit Header noch einer anderen Fußzeile im Fußzeilen verschachtelt werden, noch kann es im Kopf- oder Adresselement verschachtelt werden.
NavigationsbereichNAV -Elemente stellen den Navigationsbereich im Dokument dar, der Links zu anderen Teilen anderer Seiten oder anderer Teile derselben Seite enthält. Nicht alle Links müssen in NAV -Elementen platziert werden.
<body> <header> <hgroup> <h1> Dinge, die mir </h1> <h2> von Adam Freeman </h2> </hGroup> <nav> <h1> Inhalt </h1> <ul> <li> gefällt <A href =#fruitsilike> fruits ich mag </a> </li> <ul> <li> <a href =#morefruit> Zusätzliche Früchte </a> </li> </ul> <li> <a href =#acitySilike> Aktivitäten, die ich mag </a> </li> <li> <a href =#tritypes> Arten von Triathlon </a> </li> <li> <a href =#mytri> die Art von Triathlon Ich ziele auf </a> </li> </ul> </ul> </nav> </heate> <abschnitt> ...... </§> <Stich> .. ... . > </nav> <footer id = mainfooter> ...... </footer> </body>
Hier werden zwei NAV -Elemente verwendet.
Achten Sie darauf, nicht alle Links in den NAV -Block zu setzen. NAV sollte normalerweise nur im größten und wichtigsten Navigationsbereich der Seite verwendet werden. Beispielsweise ist die oben angegebene Dokumentnavigation erforderlich, um sie in den NAV -Block zu setzen. Wenn jedoch nur einige Informationen über die Lizenz- und Kontaktinformationen enthalten sind, müssen sie nicht in den NAV -Block aufgenommen werden.
AnnotationsleisteDas beiseite wird verwendet, um den Inhalt anzugeben, der leicht mit dem umgebenden Inhalt gefärbt ist, ähnlich der Seitenleiste im Buch oder in der Zeitschrift. Hauptinhalt.
<body> <header> ...... </heate> <Artadicle> <header> ...... </header> <Abrechtigkeit> <h1> Warum Obst gesund ist </h1> <abschnitt> hier ist AR Dreie Reasonyone Shuld essen mehr Früchte: <ol> <li> Frucht enthält viele Vitamine </li> <li> Frucht ist eine Faserquelle </li> <li> Frucht enthält nur wenige Ca Lories </li> </</ ol> <abschnitt> </asside> ...... </article> <footer id = mainfoter> ...... </footer> </body>
Sie können Elemente wie eine Notizbalken in einer gedruckten Angelegenheit beiseite verwenden. Sie können ein anderes verwandtes Thema durch sie vorstellen oder den im Hauptdokument vorgeschlagenen Standpunkt erläutern. Sie können auch Elemente beiseite verwenden, um Werbung, verwandte Inhaltsverbindungen usw. zu speichern.
KontaktinformationenDas Adresselement wird verwendet, um die Kontaktinformationen des Dokuments oder des Artikelelements darzustellen. Wenn das Adresselement eine Sub -Element des Artikelselements ist, werden die Kontaktinformationen als Artikel angesehen. Das Adresselement kann nicht verwendet werden, um die Adresse über die Kontaktinformationen des Dokuments oder des Artikels hinaus darzustellen, z.
<body> <Hace> ...... <adresse> Fragen und Kommentare?Detailbereich
Detailelemente generieren einen Bereich im Dokument, und Benutzer können damit beginnen, weitere Details zu einem Thema zu verstehen. Detailelemente enthalten normalerweise ein zusammenfassendes Element, um eine Beschreibung Etikett oder einen Titel für den Detailbereich zu generieren.
<body> <header> ...... </header> <artcticle> <header> ...... </header> <Stichs> <p> Ich schwimmen, zyklus und renne Training für meinen ersten Triathlon, aber es ist harte Arbeit. : <Ol> <li> 1,5 km schwimmen </li> <li> 40 km Zyklus </li> <li> 10 km run </li> </ol> </abschnitt> </</Abschnitt> </article> </body>
Details Elemente haben das Standard -Erscheinungsbild im Browser.
Details werden standardmäßig gefaltet.
<details öffnen> <Zusammenfassung> Arten von Triathlon < /Zusammenfassung> Es gibt verschiedene Arten von Triathlon -print, olympisch und so weiter. /li> <li> 10 km run </li> </ol> </Defails>
Der Effekt ist wie folgt:
ZusammenfassungDie semantischen Elemente von HTML5 sind auf der Grundlage seiner Erfinder auf der Untersuchung vorhandener Webseiten definiert. Wenn Sie interessiert sind, können Sie es hier anzeigen (die Website von Google können es nicht direkt anzeigen).
Gegenwärtig wurden die semantischen Elemente von HTML5 bei allen modernen Browsern unterstützt, aber für einige alte Versionen des Browsers (hauptsächlich IE9s Internet Explorer) sind einige Abhilfemaßnahmen erforderlich. Da die semantischen Elemente selbst nichts tun, müssen sie sie unterstützen, solange der Browser sie als gewöhnliche Divisionselemente behandeln darf, und der Rest der Aufgabe ist es, ihnen einige Stilregeln hinzuzufügen. problematisch. Glücklicherweise hat diese Arbeit Modernizr Ihnen geholfen, dies zu erreichen.