Tutorial zum Erstellen von Webseiten mit HTML5.0_html5-Tutorial-Kenntnissen-H5-Tutorial-php.cn

Je nachdem, wen Sie fragen, ist HTML 5 entweder der nächste große Schritt zur Schaffung eines semantischeren Webs, oder es ist nur ein unvollständiges Sammelsurium von Tags und Markup in Schwierigkeiten.

Das Problem für beide Seiten des Arguments besteht darin, dass nur sehr wenige Websites HTML 5 in einer natürlichen Umgebung verwenden, sodass theoretische Lösungen für die jetzt erkannten Probleme weitgehend ungetestet bleiben.

Dennoch ist es nicht schwer, die Vorteile und potenziellen Fallstricke der Web-Markup-Tools der nächsten Generation zu erkennen.

Inhalt

1. Was ist anders an HTML 5?

2. Endlich ein Dokumenttyp, an den sich jeder erinnern kann

3. Die grundlegendste semantische Struktur

4. Füge sie zusammen

5. Schreibstile für neue Elemente

6. Kompatibel mit alten Browsern

7. Jetzt können Sie HTML 5 verwenden, aber werden Sie es verwenden?

Was ist an HTML 5 anders?

Was drücken wir zunächst mit HTML 5 aus? Zunächst einmal: Was meinen wir mit HTML 5? Theoretisch drücken wir alles aus – neue semantische Struktur-Tags, wie etwa Canvas- oder Offline-Speicher-API-Spezifikationen, und neue semantische Inline-Tags. Wir beschränken den eigentlichen Grund (PS: Probleme mit der Browserunterstützung) jedoch nur auf Struktur-Tags. Canvas-, Offline-Speicher-, lokale Video- oder Geolokalisierungs-APIs sind alle großartig, werden jedoch noch nicht von allen Browsern einheitlich unterstützt.

„Aber warten Sie“, sagen Sie, „die meisten Browser unterstützen die neuen Strukturelemente auch nicht!“ Es stimmt, aber die überwiegende Mehrheit von ihnen akzeptiert gerne alles, was Sie als Label erstellen möchten. Sogar IE6 kann mit neuen Tabs umgehen, wenn Sie es jedoch mit CSS formatieren möchten, benötigen Sie ein wenig Hilfe von JavaScript.

Eine Sache, die Sie beim Gestalten neuer Tags beachten müssen, ist, dass unbekannte Tags in den meisten Browsern keinen Standardstil haben. Sie werden auch als Elemente auf Zeilenebene betrachtet. Da die meisten neuen HTML 5-Tags jedoch erstellt werden können, geben wir ihnen das Verhalten von Elementen auf Blockebene. Die Lösung besteht darin, sicherzustellen, dass Sie display:block; in Ihren CSS-Stil einbinden.

Um einige der Neuerungen in HTML 5 heute besser zu verstehen, machen wir uns jetzt an die Arbeit und beginnen mit der Verwendung einiger neuer Strukturelemente.

Endlich ein Dokumenttyp, an den sich jeder erinnern kann

Das erste, was wir tun müssen, um ein HTML 5-Dokument zu erstellen, ist die Verwendung des neuen Dokumenttyps. Wenn Sie sich nun genau an die Dokumenttypen HTML 4 oder XHTML 1.x erinnern, sind Sie ein noch schlimmerer Kerl als wir. Immer wenn wir eine neue Seite erstellen, müssen wir eine alte Datei öffnen, die Dokumenttypdefinition ausschneiden und einfügen.

Das ist wirklich mühsam und warum wir den neuen HTML 5-Dokumenttyp lieben. Sind Sie bereit? Er erscheint:

Es wird nicht allzu schwer sein, sich daran zu erinnern. Einfach und leicht verständlich. Nicht zwischen Groß- und Kleinschreibung unterscheiden.

Die Idee besteht darin, die HTML-Versionierung zu stoppen und die Abwärtskompatibilität zu erleichtern. Ob es auf lange Sicht erfolgreich ist, steht auf einem anderen Blatt, aber es spart Ihnen zumindest die durchschnittliche Zeit beim Tippen.

Die grundlegendste semantische Struktur

Wir haben unsere Seite als HTML 5-Dokument definiert. So weit, ist es gut. Was genau sind nun diese neuen Labels, von denen wir gehört haben?

Bevor wir uns mit neuen Tags befassen, denken Sie über die Struktur Ihrer durchschnittlichen Webseite nach, etwa so:

Für Präsentationszwecke ist das in Ordnung, aber was ist, wenn wir etwas darüber wissen möchten, was das Seitenelement enthält?

Im obigen Beispiel haben wir allen unseren strukturellen Divs IDs hinzugefügt. Dies ist bei sachkundigen Designern üblich. Der Zweck ist zweifach: Erstens stellt die ID einen Anker bereit, der zum Anwenden von Stilen auf bestimmte Absätze der Seite verwendet werden kann, und zweitens fungiert die ID als grundlegende pseudosemantische Struktur. Ein ausgefeilter Parser prüft das ID-Attribut des Tags und versucht zu erraten, was es bedeutet. Dies ist jedoch schwierig, wenn die ID-Namen für jede Site unterschiedlich sind.

Hier kommt das neue Struktur-Tag ins Spiel.

Da die Entwickler von HTML 5 erkannten, dass diese IDs zu einer Konvention geworden waren, gingen sie noch einen Schritt weiter und machten einige dieser Elemente zu eigenen Tags. Hier ist eine kurze Zusammenfassung der neuen Tags, die in HTML 5 in Kraft treten:

Das

head-Tag ist als Container für einleitende Informationen zu einem Kapitel oder einer gesamten Webseite konzipiert. Das

-Tag kann alles enthalten, von Ihrem typischen Logo oder Slogan oben auf den meisten Seiten bis hin zu Slogans und Eröffnungszeilen, die ein Kapitel einleiten. Wenn Sie auf Ihrer Seite immer noch

verwenden, können Sie

verwenden

Das

nav-Element ist ziemlich offensichtlich, es ist Ihr Navigationselement. Natürlich gibt es einige Debatten darüber, was als Navigation gilt. Es gibt eine grundlegende Seitennavigation, aber in manchen Fällen kann es auch Seitennavigationselemente geben. Die Entwickler von HTML5, WHATWG, haben kürzlich die Erklärung von

geändert, um zu zeigen, wie es zweimal auf derselben Seite verwendet werden kann.

Weitere Informationen zur Navigation und der hitzigen Debatte über HTML5 finden Sie in

Jeffrey Zeldmans Artikel über das Navigationselement .

Wenn Sie immer noch das Tag

verwenden, um Ihre Seitennavigation einzuschließen, können Sie stattdessen das prägnante Tag

verwenden.

Der Abschnitt ist wahrscheinlich der dunkelste der neuen Tags. Gemäß der

HTML 5-Definition ist ein Kapitel eine Themensammlung von Inhalten, normalerweise nach dem Header-Tag und vor dem Footer-Tag. Abschnitte können jedoch bei Bedarf ineinander verschachtelt werden.

In unserem Beispiel oben ist das mit „Inhalt“ gekennzeichnete Div eine gute Wahl, um ein Abschnitt zu werden. Darüber hinaus können wir innerhalb dieses Abschnitts Abschnitte entsprechend dem Inhalt hinzufügen.

Im Gegensatz zum Kommentar von WHATWG kann das Artikelelement „einen Inhalt enthalten, der einen separaten Teil eines Dokuments oder einer Website bildet, zum Beispiel einen Zeitschriften- oder Nachrichtenartikel oder einen Blogeintrag.“

Denken Sie daran, dass eine Seite mehrere Artikel-Tags haben kann; eine Blog-Homepage kann beispielsweise die neuesten zehn Artikel enthalten, die jeweils in einem Artikel-Tag enthalten sind. Mithilfe des Abschnitts-Tags können Artikel auch in mehrere Absätze unterteilt werden. Allerdings müssen Sie bei der Planung Ihrer Struktur etwas vorsichtig sein, sonst kann es leicht zu einem hässlichen Sammelsurium von Tags kommen.

Ein weiterer eher obskurer Tag, das aside-Element, wird für Inhalte verwendet, die „für den Inhalt des Hauptteilflusses, aus dem das Dokument besteht, irrelevant sind“. Das bedeutet einen zusätzlichen Kommentar, Inline-Fußnoten, Zitate, Anmerkungen oder typischere Seitenleisteninhalte wie den, den Sie auf der rechten Seite dieses Artikels sehen.

Den WHATWG-Kommentaren zufolge kann

in all diesen Situationen verwendet werden, obwohl sich die Zitate in Ihrer Seitenleiste stark von der Tag-Cloud unterscheiden.

Niemand hat gesagt, dass HTML 5 perfekt ist!

Verwandte Etiketten：

html 制作网页

Quelle：php.cn

Vorheriger Artikel：Analyse der HTML5-Parsing-Regeln_HTML5-Tutorial-Fähigkeiten Nächster Artikel：HTML5-Mikroformate und verwandte Attributnamen_HTML5-Tutorial-Tipps

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors