Heim > Artikel > Web-Frontend > Tutorial zum Erstellen von Webseiten mit HTML5.0_html5-Tutorial-Kenntnissen
Tutorial zum Erstellen von Webseiten mit HTML5.0_html5-Tutorial-Kenntnissen
- WBOYOriginal
- 2016-05-16 15:51:261736Durchsuche
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
1.
2.
3.
1.
2.
3.
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:
head-Tag ist als Container für einleitende Informationen zu einem Kapitel oder einer gesamten Webseite konzipiert. Das In Verbindung stehende Artikel
Mehr sehen