Einfache HTML5-Vorlage für jedes Projekt

Blog

Einfache HTML5-Vorlage für jedes Projekt

Wenn Sie HTML5 lernen und Ihrer Toolbox neue Technologien hinzufügen, möchten Sie vielleicht selbst einen Boilerplate erstellen, um alle HTML5-basierten Projekte zu starten. Wir empfehlen dies, und Sie können auch eine der Online-Ressourcen verwenden, die Ihnen einen grundlegenden Ausgangspunkt für HTML5 bietet.



In diesem Artikel erfahren Sie, wie Sie beginnen. Beginnen wir mit einer einfachen, einfachen HTML5-Seite:

Ruby-Projekte für Anfänger
The HTML5 Herald

Lassen Sie uns mit der grundlegenden Vorlage einige der wichtigen Teile des Markups untersuchen und untersuchen, wie sie sich von der Art und Weise unterscheiden, wie HTML vor HTML5 geschrieben wurde.



Dokumententyp

Zuerst haben wir eine Dokumenttyp-Deklaration oder Doctype. Dies ist nur eine Möglichkeit, dem Browser (oder einem anderen Parser) mitzuteilen, welcher Dokumenttyp angezeigt wird. Bei HTML-Dateien stellt es eine bestimmte Version und einen bestimmten HTML-Stil dar.

Der Dokumenttyp sollte immer das erste Element am Anfang jeder HTML-Datei sein. Vor vielen Jahren war die Doctype-Deklaration ein hässliches und schwer zu merkendes Durcheinander. Für XHTML 1.0 Streng:



HTML4-Konvertierung:

Obwohl uns die lange Textfolge am Anfang des Dokuments nicht wirklich geschadet hat (abgesehen davon, dass Besucher unserer Website gezwungen sind, einige zusätzliche Bytes herunterzuladen), hat HTML5 die obskuren undurchsichtigen Dinge beseitigt. Was Sie jetzt brauchen ist:

Einfach und gerecht. doctype kann in Groß-, Klein- oder gemischter Schreibweise geschrieben werden. Sie werden feststellen, dass die 5 offensichtlich in der Aussage fehlt. Obwohl die aktuelle Version des Web-Markups als HTML5 bezeichnet wird, handelt es sich in Wirklichkeit nur um eine Weiterentwicklung des vorherigen HTML-Standards – zukünftige Spezifikationen werden nur eine Weiterentwicklung dessen sein, was wir heute haben.

Da Browser häufig alle vorhandenen Inhalte im Web unterstützen müssen, müssen Sie sich nicht auf Dokumenttypen verlassen, um ihnen mitzuteilen, welche Funktionen ein bestimmtes Dokument unterstützen soll. Mit anderen Worten, doctype allein macht Ihre Seite nicht mit HTML5 kompatibel. Es hängt alles vom Browser ab.

Tatsächlich können Sie einen dieser beiden alten Dokumenttypen mit neuen HTML5-Elementen auf der Seite verwenden, und die Seite sieht genauso aus wie bei der Verwendung des neuen Dokumenttyps.

HTML-Element

Das nächste HTML-Dokument ist ein HTML-Element, das sich in HTML5 nicht wesentlich geändert hat. In unserem Beispiel setzen wir |_+_| den Wert des Attributs auf |_+_|, was angibt, dass das Dokument in Englisch vorliegt. In der basierenden |_+_|-Syntax, |_+_| Attribute müssen enthalten sein. In HTML5 ist dies nicht mehr nötig und sogar |_+_| Attribute sind für die Validierung oder den korrekten Betrieb des Dokuments nicht erforderlich.

Das haben wir bisher, einschließlich geschlossener |_+_| Stichworte:

lang

Kopfelement

Der nächste Teil der Seite ist der Abschnitt |_+_|. |_+_| Die erste Zeile in definiert die Zeichenkodierung des Dokuments. Dies ist ein weiteres Element, das seit XHTML und HTML4 vereinfacht wurde und eine optionale Funktion ist, die jedoch empfohlen wird. Früher konnte man schreiben:

en

HTML5 verbessert dies durch Minimierung der Zeichencodierung |_+_| Stichworte:

xhtml

In fast allen Fällen ist UTF-8 der Wert, den Sie im Dokument verwenden. Eine vollständige Erklärung der Zeichencodierung würde den Rahmen dieses Artikels sprengen und Sie sind möglicherweise nicht daran interessiert. Wenn Sie jedoch tiefer graben möchten, können Sie Themen lesen über W3C oder WASWG .

Hinweis: Damit alle Browser die Zeichenkodierung korrekt lesen können, muss die gesamte Zeichenkodierungsdeklaration in den ersten 512 Zeichen des Dokuments enthalten sein. Es sollte auch vor allen inhaltsbasierten Elementen erscheinen (wie dem Element |_+_|, das auf unserer Beispiel-Site darauf folgt).

Wir haben noch viel zu diesem Thema zu schreiben, aber wir wollen euch wach halten – deshalb verraten wir euch diese Details nicht! Nun begnügen wir uns damit, diese vereinfachte Aussage zu akzeptieren und gehen dann zum nächsten Teil des Dokuments über:

xmlns

In diesen Zeilen ist HTML5 kaum von der vorherigen Syntax zu unterscheiden. Die Deklaration des Seitentitels (das einzige erforderliche Element in der Kopfzeile) ist dieselbe wie zuvor, und die von uns eingefügten Meta-Tags sind nur einige optionale Beispiele, um die Position dieser Tags anzugeben; Sie können hier beliebig viele gültige Metaelemente einfügen.

Kernstück dieses Markup-Blocks ist das Stylesheet, das im idiomatischen Link-Element enthalten ist. Außer href und rel erfordert link keine anderen Attribute. Das type-Attribut (in älteren HTML-Versionen üblich) ist nicht erforderlich und wird nicht benötigt, um den Inhaltstyp des Stylesheets anzugeben.

fairer Wettbewerb

Als HTML5 eingeführt wurde, enthielt es viele neue Elemente wie Artikel und Abschnitte. Sie denken vielleicht, dass dies das Hauptproblem bei der Unterstützung nicht erkannter Elemente in älteren Browsern ist, aber Sie irren sich. Dies liegt daran, dass es den meisten Browsern egal ist, welche Tags Sie verwenden.

Wenn Sie ein HTML-Dokument mit einem Rezept-Tag (oder sogar einem Ziggy-Tag) haben und Ihr CSS einige Stile an das Element anhängt, behandelt fast jeder Browser dies als völlig normale Operation, nichts Wenden Sie Ihren Stil ohne Beschwerden an.

Natürlich sind solche hypothetischen Dokumente nicht verifizierbar und es kann zu Problemen mit der Zugänglichkeit kommen, aber sie werden in fast allen Browsern korrekt gerendert – mit Ausnahme älterer Versionen des Internet Explorers (IE). Vor Version 9 verhinderte IE, dass nicht erkannte Elemente Stile empfangen.

Diese mysteriösen Elemente werden von der Rendering-Engine als unbekannte Elemente betrachtet, sodass Sie ihr Aussehen oder Verhalten nicht ändern können. Dazu gehören nicht nur die Elemente, die wir uns vorstellen, sondern auch alle Elemente, die bei der Entwicklung der Browserversion nicht definiert wurden. Das bedeutet neue HTML5-Elemente.

Holen Sie sich die Form eines numpy-Arrays

Die gute Nachricht ist, dass die Nutzung des IE zurückgegangen ist. Die weltweite Nutzung von IE11 ist auf etwa 2,7 % gesunken (Stand 2018), und die Vorgängerversion ist fast von der Landkarte verschwunden.

Wenn Sie jedoch alte Browser unterstützen müssen, können Sie immer noch das bewährte HTML5-Shiv verwenden, ein sehr einfaches JavaScript, das ursprünglich von John Resig entwickelt wurde. Inspiriert von der Idee von Sjoerd Visscher ermöglicht es das Stylen neuer HTML5-Elemente in älteren IE-Versionen.

In Wirklichkeit wird es jetzt jedoch nicht benötigt. Alle modernen Browser und sogar die neuesten älteren Versionen unterstützen HTML5-Elemente. Die einzige Ausnahme besteht darin, dass einige Browser die neueren Hauptelemente nicht erkennen. Für diese Browser können Sie dieses Element jedoch weiterhin verwenden, solange Sie den entsprechenden Stil hinzufügen (z. B. als Blockelement festlegen).

Als nächstes ist Geschichte

Wenn wir uns den Rest der Startvorlage ansehen, haben wir gemeinsame Body-Elemente mit ihren End-Tags und schließenden HTML-Tags. Wir verweisen auch auf eine JavaScript-Datei im script-Element.

Ähnlich wie das zuvor besprochene Link-Tag ist das |_+_| -Tag muss kein Typattribut deklarieren. Wenn Sie jemals XHTML geschrieben haben, erinnern Sie sich vielleicht daran, dass Ihre Skript-Tags so aussehen:

lang

Da JavaScript eigentlich die einzige echte Skriptsprache im Web ist und alle Browser davon ausgehen, dass Sie JavaScript verwenden, auch wenn Sie dies nicht explizit angeben, ist das type-Attribut in HTML5-Dokumenten unnötig:

Wir platzieren das script-Element am unteren Rand der Seite, um den Best Practices für die Einbettung von JavaScript zu entsprechen. Dies hat mit der Seitenladegeschwindigkeit zu tun; Wenn der Browser auf ein Skript stößt, wird der Download angehalten und der Rest der Seite gerendert, während das Skript geparst wird.

Dadurch wird die Seite viel langsamer geladen, wenn große Skripte oben auf der Seite eingefügt werden, bevor etwas geladen wird. Aus diesem Grund sollten die meisten Skripte ganz unten auf der Seite platziert werden, damit sie erst nach dem Laden des Rests der Seite geparst werden.

In einigen Fällen (z. B. bei der Verwendung von HTML5-Shiv) muss das Skript jedoch möglicherweise am Kopf des Dokuments platziert werden, da dies wirksam werden soll, bevor der Browser mit dem Rendern der Seite beginnt.

Nächster Schritt

Eine Möglichkeit, HTML5 auf die nächste Stufe zu heben, besteht darin, die HTML5 Boilerplate auszuprobieren. Diese regelmäßig aktualisierte Ressource bietet einen bequemen Ausgangspunkt für Ihr Projekt mit den neuesten Best Practices, die von Hunderten der besten Programmierer der Welt entwickelt wurden.

Auch wenn Sie nur den Code durchgehen und sehen möchten, wie bestimmte Elemente heutzutage verwendet werden, wie beispielsweise die verschiedenen Meta-Elemente im Dokumentkopf, lohnt es sich, herunterzuladen und auszuprobieren.

Eine andere Möglichkeit, die Entwicklung Ihrer Website oder Webanwendung auf die nächste Stufe zu heben, besteht darin, ein modernes Framework auszuprobieren, das heute weit verbreitet ist.

Das Obige ist der detaillierte Inhalt der grundlegenden HTML5-Vorlage, die für jedes Projekt geeignet ist.

#html #html5 #Vorlage