HTML5 -Vorlage: Ein Basisstarter HTML -Boilerplate für jedes Projekt-CSS-Tutorial-php.cn

Erstellen Sie Ihre eigene HTML5 -Vorlage: eine kurze Anleitung

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

In diesem Artikel wird Sie begleitet, wie Sie Ihre eigene HTML5 -Vorlage erstellen. Wir werden Schritt für Schritt die Schlüsselelemente der HTML -Basisvorlage erläutern und schließlich eine einfache Vorlage bereitstellen, die Sie verwenden und weiter erstellen können.

Nach dem Lesen dieses Artikels haben Sie Ihre eigene HTML5 -Vorlage. Wenn Sie jetzt den HTML -Vorlagencode erhalten möchten, lesen Sie diesen Artikel später, hier ist unsere letzte HTML5 -Vorlage.

Schlüsselpunkte

HTML5 -Vorlagen als wiederverwendbare Vorlagen enthalten die erforderlichen HTML -Elemente und vermeiden Sie das Schreiben von wiederholtem Code zu Beginn jedes Projekts.
Eine grundlegende HTML5 -Vorlage sollte Dokumenttypdeklarationen, Elemente mit Sprachattributen, Zeichencodierung über <meta charset="utf-8"> und Ansichtsfenster für reaktionsschnelles Design enthalten.
HTML5 -Vorlage enthalten normalerweise Metadaten für SEO, Links zu CSS -Stylesheets und optionale JavaScript -Dateien.
Für die Optimierung in sozialen Medien kann das Hinzufügen offener Diagramm -Meta -Tags den Anzeigentffekt von Inhalten verbessern, wenn sie auf sozialen Plattformen gemeinsam genutzt werden.
einschließlich Favicon- und Apple -Touch -Symbole in der Vorlage hilft, die Markenidentität aufzubauen und die Benutzererfahrung über Geräte hinweg zu verbessern.
JavaScript -Dateien vor geschlossenem Tags können die Seitenladegeschwindigkeiten verbessern, da Browser die Seiten schneller rendern, indem das Ladungsskript verzögert wird.

Was ist eine HTML -Vorlage?

Jede Website ist anders, aber von einer Website zur anderen sind viele Dinge im Grunde gleich. Erstellen Sie Ihre eigene "Vorlage", anstatt immer wieder denselben Code zu schreiben. Eine Vorlage ist eine Vorlage, die Sie jedes Mal verwenden, wenn Sie ein Projekt starten, mit der Sie verhindern können, dass Sie von vorne anfangen.

Wikipedia beschreibt die Vorlage als:

Code -Snippets werden wiederholt an mehreren Stellen angezeigt, wobei sich wenig geändert hat.

Wenn Sie HTML5 lernen und Ihrem Toolbox neue Technologien hinzufügen, möchten Sie möglicherweise eine HTML -Vorlage für sich selbst erstellen, um alle zukünftigen Projekte zu starten. Es lohnt sich auf jeden Fall, und es gibt viele Ausgangspunkte online, mit denen Sie Ihre eigenen HTML5 -Vorlagen erstellen können.

Ein sehr einfaches Beispiel für die HTML5 -Vorlage

Die vollständige Vorlage am Ende dieses Artikels enthält viele Inhalte. Aber Sie müssen es nicht so schick machen - besonders wenn Sie gerade erst lernen, zu lernen. Hier ist eine sehr einfache "Anfänger" -HTML5 -Vorlage, die wahrscheinlich das einzige ist, was Sie brauchen:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Wenn Sie den obigen Code in eine .html -Datei einfügen, haben Sie eine Webseite! Diese grundlegende HTML5 -Vorlage enthält einige der im nächsten Abschnitt aufgeführten Elemente sowie ein einfaches Titelelement, das in Ihrem Webbrowser angezeigt wird.

Schauen wir uns seine Struktur genauer an.

Struktur der HTML5 -Vorlage

HTML -Vorlagen enthalten normalerweise die folgenden Teile:

Dokumenttyperklärung (oder docType)
<html> Element
Zeichenkodierung
Ansichtsfenster -Element
<title>, Beschreibung und Autor
Grafikelement für soziale Karten öffnen
Favicon und Touch -Symbole
CSS Stylesheet Link
JavaScript -Datei -Link

Zusätzlich zu den Deklarationen und Elementen von Dokumenttypen <html> finden sich die meisten der oben aufgeführten Elemente im Abschnitt <head> der HTML -Vorlage.

HTML5 Dokumenttyp Anweisung

Ihre HTML5 -Vorlage muss mit einer Deklaration von Dokumenttypen oder docType beginnen. docType ist nur eine Möglichkeit, den Browser oder einen anderen Parser mitzuteilen, welche Art von Dokument er betrachtet. Für HTML -Dateien bedeutet dies eine bestimmte Version und Art von HTML. docType sollte immer der erste Element oben in jeder HTML -Datei sein. Vor vielen Jahren war die DocType -Erklärung eine hässliche und schwer zu erinnerne Verwirrung, die normalerweise als "xhtml streng" oder "html transitional" bezeichnet wurde.

Mit dem Aufkommen von HTML5 verschwanden diese unverständlichen nervigen Dinge, und jetzt brauchen Sie nur Folgendes:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Einfach und klar. "5" verschwand deutlich aus der Aussage. Obwohl die aktuelle Version des Web -Tags als "HTML5" bezeichnet wird, ist sie wirklich nur eine Entwicklung früherer HTML -Standards - die zukünftigen Spezifikationen werden nur die Entwicklung sein, die wir heute haben. Es wird niemals "HTML6" geben, daher wird das Web -Tag des aktuellen Status normalerweise einfach "HTML" bezeichnet.

Da der Browser alte Inhalte im Web unterstützen muss, beruht er nicht auf docType, um dem Browser mitzuteilen, welche Funktionen in einem bestimmten Dokument unterstützt werden sollten. Mit anderen Worten, nur docType macht Ihre Seite nicht mit modernen HTML -Funktionen einverstanden. Tatsächlich bestimmt der Browser unabhängig vom verwendeten DocType den Merkmalsunterstützungsfall nach Fall. Tatsächlich können Sie den alten DocType mit dem neuen HTML5 -Element auf der Seite verwenden, und die Seite macht genauso wie bei der Verwendung des neuen DocType.

<html> Element Das Element

<html> ist das Element der obersten Ebene in einer HTML -Datei - was bedeutet, dass es alles außer DocType im Dokument enthält. Das <html> -Element ist in zwei Teile unterteilt: <head> und <body> Teile. Alle anderen Inhalte in der Webseitendatei werden in oder im <html> -Element platziert. Der folgende Code zeigt das <html> -Element, das sich nach der DocType -Deklaration befindet und die Elemente <html> und <head> enthält: <body>

&lt;!DOCTYPE html&gt;

Nach dem Login kopieren

wie man Tags in html verwendet Der Abschnitt

enthält wichtige Informationen zum Dokument, das nicht dem Endbenutzer angezeigt wird - z. B. Zeichenkodierung und Links zu CSS -Dateien und möglicherweise JavaScript -Dateien. Diese Informationen werden von Maschinen wie Browsern, Suchmaschinen und Bildschirmlesern verwendet: <head> Alle Elemente, die zwischen den obigen

<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

Nach dem Login kopieren

…

-Tags enthalten sind, sind wichtig, aber Endbenutzer sehen es nicht - mit Ausnahme des Textes <head>, es wird in Online -Such- und Browser -Tags angezeigt. </head>

wie man Tags in html verwendet Der Abschnitt

<body> enthält alles, was im Browser angezeigt wird - z. B. Text, Bilder usw. Wenn Sie dem Endbenutzer etwas anzeigen möchten, stellen Sie sicher, dass Sie es zwischen ein und aus <body>… </body> Tags: platzieren:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

lang Was sind die Attribute?

Das <html> lang Element sollte idealerweise das Attribut <html lang="en"> enthalten, wie im obigen Code () gezeigt. Sein Hauptzweck ist es, assistierende Technologien wie Bildschirmleser zu erzählen, wie sie beim Vorlesen sie aussprechen. (Diese Eigenschaft ist für die Seitenüberprüfung nicht erforderlich, aber die meisten Validatoren geben Warnungen aus, wenn Sie sie nicht einschließen.)

lang Der oben gezeigte Wert des oben gezeigten en -attributs ist fr, wodurch das Dokument in englischer Sprache geschrieben ist. Alle anderen gesprochenen Sprachen haben Werte wie de in Französisch, hi in Deutsch, in Hindi usw. (Sie finden eine vollständige Liste von Sprachcodes auf Wikipedia.)

HTML -Dokument Zeichenkodierung

Die erste Zeile im Abschnitt <head> HTML -Dokument ist die Zeile, die die Zeichencodierung des Dokuments definiert. Die Buchstaben und Symbole, die wir auf Webseiten lesen, werden als eine Reihe von Zahlen definiert, und einige Zeichen (z. B. Buchstaben) werden in vielerlei Hinsicht codiert. Daher ist es nützlich, Ihren Computer mitzuteilen, auf welche Codierung Ihre Webseite sich beziehen sollte. Anzeigencharaktercodierung ist eine optionale Funktion, die keine Warnungen im Validator hervorruft. Auf den meisten HTML -Seiten wird jedoch empfohlen:

&lt;!DOCTYPE html&gt;

Nach dem Login kopieren

<title> Hinweis: Um sicherzustellen, dass einige ältere Browser die Charakter -Codierung korrekt lesen, muss die gesamte Erklärung für die Codierungskodierung von Charakteren irgendwo in die ersten 512 Zeichen des Dokuments aufgenommen werden. Es sollte auch vor einem inhaltsbasierten Element angezeigt werden (wie das -Element, das später in unserem Beispiel angezeigt wird).

Warum verwenden Sie die UTF-8-Zeichencodierung in HTML5-Vorlagen?

utf-8 Das obige Zeichen-Codierungsbeispiel verwendet den UTF-8-Zeichensatz. In fast allen Fällen ist der Wert, den Sie in Ihrem Dokument verwenden sollten. Diese Codierung deckt verschiedene Zeichen ab, die nicht in anderen Codierungen enthalten sind. Möglicherweise haben Sie beispielsweise auf seltsame Charaktere im Web gestoßen, was offensichtlich ein Fehler ist. Dies liegt normalerweise daran, dass der Browser die erwarteten Zeichen in dem im Dokument angegebenen Zeichensatz nicht finden kann.

UTF-8 deckt eine Vielzahl von Charakteren ab, darunter viele Charaktere in verschiedenen Sprachen auf der ganzen Welt sowie viele nützliche Symbole. Wie die World Wide Web Alliance erklärt:

Unicode-basierte Codierungen (z. B. UTF-8) können mehrere Sprachen unterstützen und an alle Sprachmischseiten und -formen angepasst werden. Die Verwendung kann auch die serverseitige Logik beseitigen, wodurch die Zeichenkodierung für jede Serviceseite oder für jede Einreichungsformulareingabe individuell bestimmt wird. Dies verringert die Komplexität der Umgang mit mehrsprachigen Websites oder Anwendungen erheblich.

Die vollständige Erklärung der Charaktercodierung liegt außerhalb des Rahmens dieses Artikels. Wenn Sie jedoch tiefer graben möchten, können Sie in der HTML -Spezifikation über die Charaktercodierung lesen. Was bedeutet

X-UA-Compatible?

Sie sehen diese Zeile manchmal in <head> Ihres HTML -Dokuments:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Mit diesem Meta -Tag können Webautoren die Version von Internet Explorer auswählen, die die Seite rendern sollte. Jetzt, da Internet Explorer größtenteils nur ein schlechter Speicher ist, können Sie diese Zeile sicher aus Ihrem Code entfernen. (Wir haben es aus der HTML5 -Vorlage entfernt.) Wenn Sie sicher sind, dass Ihre Seite in einer älteren Version von IE angezeigt wird, ist es möglicherweise eine Einbeziehung wert. Weitere Informationen zu diesem Meta -Tag finden Sie auf der Microsoft -Website.

Ansichtsfenster -Element

Ansichtsfensterelement ist eine Funktion, die Sie in fast jeder HTML5 -Vorlage sehen werden. Es ist sehr wichtig für das reaktionsschnelle Webdesign und das mobile Design:

&lt;!DOCTYPE html&gt;

Nach dem Login kopieren

Dieses <meta> Element enthält zwei Eigenschaften, die als Name/Wert -Set zusammenarbeiten. In diesem Fall wird der Name auf viewport gesetzt und der Wert ist width=device-width, initial-scale=1. Dies gilt nur für mobile Geräte. Sie werden feststellen, dass es zwei Teile des Wertes gibt:

width=device-width: Die Pixelbreite des Ansichtsfensters soll die Website vorstellen.
initial-scale: Dies sollte eine positive Zahl zwischen 0,0 und 10,0 sein. Der Wert von "1" zeigt ein Verhältnis von 1: 1 zwischen der Gerätebreite und der Ansichtsfenstergröße an.

Sie können mehr über diese Meta-Element-Eigenschaften auf MDN lesen, aber jetzt müssen Sie nur wissen, dass in den meisten Fällen dieses Meta-Element und seine Einstellungen am besten für mobile reaktionsschnelle Websites geeignet sind.

<title>, Beschreibung und Autor

Der nächste Teil der HTML -Basisvorlage enthält die folgenden drei Zeilen:

<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

Nach dem Login kopieren

<title> ist das, was in der Titelleiste des Browsers angezeigt wird (z. B. wenn Sie über die Registerkarte Browser schweben), der auch in den Suchergebnissen angezeigt wird. Dieses Element ist das einzig erforderliche Element im Abschnitt <head>. Beschreibung und Autor -Metaelements sind optional, bieten jedoch wichtige Informationen für Suchmaschinen. In den Suchergebnissen werden der Titel und die Beschreibung im obigen Codebeispiel unten angezeigt.

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Sie können eine beliebige Anzahl gültiger Elementelemente in <head> platzieren.

Graph -Element für soziale Karten öffnen

Wie oben erwähnt, sind alle Meta -Elemente optional, aber viele sind gut für SEO- und Social -Media -Marketing. Der nächste Teil der HTML5-Vorlage enthält einige dieser Meta-Elementoptionen:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
  <🎜>  
</head>

Nach dem Login kopieren

Diese <meta> Elemente verwenden das sogenannte Open-Graph-Protokoll, und es gibt viele andere Elemente, die Sie verwenden können. Dies sind die Elemente, die Sie am häufigsten verwenden. Sie können eine vollständige Liste der verfügbaren Open -Graph -Meta -Optionen auf der Website Open Graph anzeigen.

Diese hier enthaltenen Elemente verbessern das Erscheinungsbild der Webseite, wenn sie mit Social -Media -Posts verknüpft sind. Beispielsweise werden die fünf hier enthaltenen Elemente in einer sozialen Karte angezeigt, die mit den folgenden Daten eingebettet ist: <meta>

zugeordnet ist

Wenn Sie Beiträge in sozialen Medien teilen sehen, werden diese Datenbits in der Regel automatisch zu Social -Media -Posts hinzugefügt. Wenn Sie beispielsweise einen Link zur GitHub -Homepage angeben, wird im Tweet Folgendes angezeigt.

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Favicon und Berührungssymbole Der nächste Teil der HTML5 -Vorlage enthält

Elemente, die die Ressourcen als Favicon- und Apple -Touch -Symbole angeben: <link>

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Favicon wird auf der Registerkarte Browser angezeigt, wenn jemand Ihre Website überprüft.

Dateien werden in älteren Browsern verwendet und müssen nicht in den Code aufgenommen werden. Solange Ihre favicon.ico -Datei im Stammverzeichnis des Projekts enthalten ist, findet der Browser sie automatisch. favicon.ico Dateien werden in modernen Browsern verwendet, die SVG -Symbole unterstützen. Sie können stattdessen auch .png -Dateien verwenden. favicon.svg Das letzte Element bezieht sich auf das auf Apple -Geräten verwendete Symbol beim Hinzufügen der Seite zum Startbildschirm des Benutzers.

Sie können hier zusätzliche Optionen einfügen, einschließlich Webanwendungsmanifestdateien, die auf andere Symbole verweisen. Für die vollständige Diskussion empfehlen wir Ihnen, Andrey Sitniks Artikel zu diesem Thema zu lesen. Aber die hier enthalten sind ausreichend für einfache HTML -Anfängervorlagen.

enthält CSS -Stylesheets und JavaScript -Dateien Die letzten beiden wichtigen Teile der HTML -Erste -Start -Vorlage sind Verweise auf ein oder mehrere Stylesheets und möglicherweise JavaScript -Dateien. Natürlich sind beide optional, obwohl nur wenige Websites nicht zumindest einige CSS -Stile haben.

CSS -Stylesheet in die HTML -Vorlage

integrieren

Stylesheets können überall in das Dokument aufgenommen werden, aber Sie werden es normalerweise im Abschnitt <head> sehen:

&lt;!DOCTYPE html&gt;

Nach dem Login kopieren

Das Element

<link> zeigt den Webbrowser auf ein externes Stylesheet, damit diese CSS -Stile auf die Seite anwenden können. Das <link> Element erfordert, dass das Attribut rel stylesheet ist. In der Vergangenheit gab es normalerweise auch ein type -Merkmals, aber es wurde nie wirklich benötigt. Wenn Sie also den alten Code finden, der ihn im Web enthält, löschen Sie ihn einfach.

Beachten Sie, dass wir die ?v=1.0 -Anterfragezeichenfolge am Ende des CSS -Links hinzugefügt haben. Dies ist völlig optional. Dies ist ein praktischer Trick, wenn Sie das Stylesheet aktualisieren, um diese Abfragezeichenfolge zu aktualisieren (z. B. Aktualisierung auf 1.1 oder 2.0), da dies sicherstellt, dass der Browser eine alte, zwischengespeicherte Kopie von CSS -Dateien verurteilt und die neue Version lädt.

Es ist erwähnenswert, dass Sie das <link> -Element nicht verwenden müssen, um CSS auf der Webseite aufzunehmen, da Sie stattdessen alle Stile in das <style>… </style> -Tag der Seite selbst einfügen können, die sich in befinden der Abschnitt <head>. Dies ist sehr bequem, wenn Sie mit Layouts experimentieren, dies wird jedoch im Allgemeinen nicht an aktiven Stellen empfohlen, da diese Stile auf anderen Seiten nicht zugänglich sind, was zu ineffizienten und/oder doppelten Code führt.

Integrieren Sie JavaScript -Dateien in HTML -Vorlagen

JavaScript -Code übergibt normalerweise ⋮

</body> 

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Das Skript in das

-Tag: einbetten:

<article> Anweisungen zu alten Browsern und neuen Elementen <aside> <recipe> <ziggy> Als HTML5 eingeführt wurde, enthielt es viele neue Elemente wie und . Sie könnten denken, dass die Unterstützung für nicht identifizierte Elemente ein wichtiges Problem für ältere Browser ist - aber das ist nicht der Fall! Die meisten Browser kümmern sich eigentlich nicht darum, welche Tags Sie verwenden. Wenn Sie ein HTML -Dokument haben, das ein Element (oder sogar ein -Element) enthält und Ihr CSS bestimmte Stile an diesem Element anhält .

Natürlich überprüfen solche Annahmen nicht und es kann zu Barrierefreiheitsproblemen kommen, aber es wird in fast allen Browsern korrekt erledigt - die Ausnahme ist eine ältere Version von Internet Explorer (dh). Vor Version 9 blockierte der IE unerkannte Elemente aus den Empfangsstilen. Der Rendering -Motor behandelt diese mysteriösen Elemente als "unbekannte Elemente", sodass Sie ihr Aussehen oder ihr Verhalten nicht ändern können. Dies schließt nicht nur die Elemente ein, die wir uns vorgestellt haben, sondern auch alle Elemente, die zum Zeitpunkt der Entwicklung dieser Browserversionen, einschließlich neuer HTML5 -Elemente, nicht definiert wurden. Zum Glück sind ältere Browser, die den neuen Elementstil nicht unterstützen, heutzutage kaum vorhanden, sodass Sie in fast jedem Projekt sicher ein neues HTML -Element verwenden können, ohne sich darüber Sorgen zu machen. Das heißt, wenn Sie wirklich alte Browser unterstützen müssen, können Sie immer noch das zuverlässige HTML5 Shiv verwenden, ein einfaches JavaScript -Snippet, das ursprünglich von John Ressig entwickelt wurde. Es wurde von Sjoerd Visschers Arbeit inspiriert, die neue HTML5 -Elemente in älteren Versionen von IE stilbar machte. Tatsächlich ist dies heute jedoch nicht notwendig. Wie Caniuse.com zeigt, werden HTML5 -Elemente in allen verwendeten Browsern unterstützt.

Vollständige HTML5 -Vorlage

Dies ist unsere letzte HTML5 -Vorlage - eine einfache Vorlage, die Sie für jedes Projekt verwenden können:

&lt;!DOCTYPE html&gt;

Nach dem Login kopieren

<body> Sie können diesen einfachen und benutzerfreundlichen HTML5-Vorlagencode noch heute in jedes Projekt einfügen! Auf dieser Basis können Sie zwischen den </body> und -Tags hinzufügen, was Sie wollen.

Schlussfolgerung

Es gibt viele HTML-Anfänger-Vorlagen und Frameworks online mit vorbereiteten CSS und JavaScript-Dateien und vielen Inhalten vor dem Schreiben, die Sie verwenden und ändern können, wie Sie möchten. Dies ist nicht unser Ziel. Die grundlegenden Vorlagen, die wir hier bereitstellen, enthalten alles, was Sie beim Entwerfen einer Webseite benötigen, damit Sie nicht jedes Mal von vorne anfangen müssen.

Sie können die grundlegenden HTML -Seitenvorlagen, die wir zu Beginn anzeigen, oder die vollständigen Vorlagen, die wir oben angezeigt haben, kopieren und verwenden sie in Ihrem Projekt. Im Laufe der Zeit stellen Sie möglicherweise fest, dass es Inhalte gibt, die Sie nicht oft benötigen, und einige der Dinge, die wir hier nicht erwähnt haben, die Sie häufig verwenden, sodass Sie Ihre Vorlagen so aktualisieren können, dass Sie Ihren Workflow entsprechen.

Nächste Schritte

Eine gute Möglichkeit, Ihr Web -Layout auf die nächste Ebene zu bringen, besteht darin, schöne Webdesignprinzipien zu verwenden, die vierte Ausgabe. In diesem Buch werden Ihnen Designprinzipien und und gezeigt, wie Sie sie im Internet implementieren können. Es wurde im September 2020 komplett umgeschrieben und enthält modernste Technologie, die Sie nirgendwo anders gelesen haben.

Um Ihr CSS -Wissen zu verbessern, helfen Ihnen unsere modernen CSS -Projektkurse, die neuesten fortgeschrittenen Versionen von CSS3 zu beherrschen.

Abgesehen davon können Sie Ihre Website oder Webanwendungsentwicklung mit interaktiven und programmatischen, reaktiven Benutzeroberfläche auf die nächste Ebene bringen. Schauen Sie sich beispielsweise die riesigen Ressourcen von SitePoint auf JavaScript an und reagieren Sie. Und erfahren Sie, wie Sie ein neues Projekt schneller mit unserem Leitfaden zu den besten Gerüst -Web -Tools und -Bibliotheken starten. Oder, wenn Sie ein Web -Erlebnis ohne Lerncodierung erstellen möchten, lesen Sie unseren Starter -Leitfaden zur codeless Bewegung. Das neueste codeloses Tool ist ein Game-Changer. Zum ersten Mal haben sie in vielen Fällen eine leistungsstarke Alternative zur Codierung.

HTML5 -Template FAQ Schließlich werden wir häufig gestellte Fragen zum HTML5 -Vorlagencode beantworten.

Was sind Vorlagen in HTML?

Vorlage ist eine HTML -Seitenvorlage, die jedes Mal verwendet wird, wenn Sie ein Projekt starten, wodurch vermeiden wird, dass sie von vorne anfangen. Es enthält gemeinsame Elemente wie Deklarationen vom Dokumenttyp und grundlegende HTML -Elemente, die auf jeder Webseite angezeigt werden.

Ist eine Vorlage eine Vorlage?

Ja. Eine Vorlage ist eine sehr einfache HTML -Anfängervorlage, die Links zu grundlegenden Elementen enthält, die auf jeder Webseite angezeigt werden, z. B. Zeichencodierung,

und <head> Elemente sowie CSS und JavaScript -Dateien. <body> Wie erstelle ich eine Vorlage in HTML?

Eine Möglichkeit, eine eigene HTML -Vorlage zu erstellen, besteht darin, eine Webseite zu erhalten, ihren Quellcode zu kopieren und dann alles außer den grundlegendsten Elementen zu löschen, die auf jeder Webseite angezeigt werden. Oder Sie können unsere vorgefertigte HTML5-Vorlage erhalten und in die .html-Datei einfügen, und Sie können bereit sind zu gehen!

Wofür wird die HTML5 -Vorlage verwendet?

Beim Entwerfen einer Webseite gibt es nichts Schlimmeres, als den gesamten Bohrcode von Grund auf neu schreiben zu müssen, beginnend mit einer leeren .html -Seite. Unsere HTML5 -Vorlagen bieten Ihnen alle HTML -Vorlagencode, die Sie zum Ausführen benötigen, damit Sie sofort an Ihren einzigartigen Designs und Inhalten arbeiten können.

Was ist das Vorlage Beispiel?

Es gibt viele Beispiele für HTML5 -Vorlagen im Internet. Im Laufe der Zeit können Sie Ihre eigenen Vorlagen erstellen, basierend auf der Art und Weise, wie Sie HTML selbst schreiben. Unser Beispiel für HTML5 -Vorlage enthält alle grundlegenden Elemente, die Sie auf den meisten Webseiten benötigen.

Als sehr einfacher Start können Sie dies nur verwenden:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Was ist der Startcode für HTML?

HTML -Dokumente beginnen immer mit einer Deklaration vom Dokumenttyp: <!DOCTYPE html>. Dann gibt es das -Tag, das alle anderen Inhalte auf der Webseite enthält. Die beiden Kinderelemente von sind die Elemente und . Unsere HTML5 -Vorlage enthält den für jede Webseite erforderlichen grundlegenden Startcode.

Benötigt jede HTML -Datei eine Vorlage?

Idealerweise ja. HTML -Vorlagen bieten die Mindestmenge an Code für HTML -Seiten, um nützliche Aktionen in einem Webbrowser auszuführen. Auf jeder Seite Ihrer Website können Sie HTML -Vorlagencode verwenden. In der Regel werden die gängigen Elemente der Vorlage von einer einzelnen Quelle in Ihre Seite injiziert, z. B. ein Framework oder die Datei einbeziehen, damit Sie die Vorlagen für alle Seiten gleichzeitig aktualisieren können. Unsere HTML5 -Vorlage enthält allen HTML -Vorlagencode, die Sie für den Einstieg benötigen.

Das obige ist der detaillierte Inhalt vonHTML5 -Vorlage: Ein Basisstarter HTML -Boilerplate für jedes Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!