Heim > Artikel > Web-Frontend > Was in den HTML-Header eingefügt werden soll
Was in den HTML-Header eingefügt werden soll
- 青灯夜游Original
- 2021-12-14 12:06:173567Durchsuche
Der HTML-Header muss Folgendes enthalten: 1. Titel-Tag, legen Sie den Dokumenttitel fest; 2. mehrere Meta-Tags, legen Sie die Kodierungsmethode, die Website-Beschreibung und den Ansichtsbereich fest; 3. Link-Tag, legen Sie das kleine Symbol des Webseitentitels fest; Einführung der Stildatei 4, Skript-Tag, Einführung der Skriptdateien.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Das ist eine Frage, die mir während des Interviews begegnet ist. Normalerweise verwende ich Plug-Ins! Ich füge Tabs hinzu, um die HTML5-Struktur zu generieren, aber mir fällt nichts anderes ein, außer CSS und JS. Dieses Problem scheint sehr einfach zu sein, aber es wird von uns leicht ignoriert, deshalb werde ich einen Artikel schreiben, um es zusammenzufassen, HTML-Kopf (Header) (Teil) Was soll darin stehen?
Notwendiger Titel
Der Titel ist erforderlich, aber wenn er nicht hinzugefügt wird, fügt der Browser ihn automatisch für Sie hinzu.
<head> <title>web</title> </head>
Encoding (Codierungsmethode)
Die Spezifikation der Codierungsmethode steht im Vordergrund. Wenn sie nicht angegeben wird, trifft der Browser auch eine Beurteilung basierend auf dem Header des Servers, diese ist jedoch möglicherweise nicht korrekt .
<head> <meta charset="UTF-8"> <title>web</title> </head>
Description (Website-Beschreibung)
Das ist mir noch nicht aufgefallen, es ist eine Beschreibung Ihrer Website, Suchmaschinen werden sie sehen, sie sollte sehr häufig in SEO verwendet werden
<meta name="description" content="这里是对网站的描述">
Viewport
Dies ist sehr häufig der Fall, da das Ansichtsfenster im Allgemeinen an das mobile Endgerät angepasst ist und die Seite in einem virtuellen Fenster platziert wird. Wenn die Webseite kein Ansichtsfenster verwendet, wird sie beim Öffnen des mobilen Browsers sehr klein angezeigt , und es ist auch extrem klein, Viewport ermöglicht es Webentwicklern, die Größe von Steuerelementen in ihren Webseiteninhalten dynamisch festzulegen, so dass der gleiche Effekt (Maßstabsverkleinerung) wie bei Webseiten erzielt wird kann über den Browser erreicht werden. , wird verwendet, um reaktionsfähige Websites besser zu unterstützen.
<meta name="viewport" content="width=device-width, initial-scale=1">
Breite: Steuern Sie die Größe des Ansichtsfensters. Im Allgemeinen wird sie als Gerätebreite angegeben (die Einheit ist CSS-Pixel skaliert auf 100 %).
height: und width Geben Sie entsprechend die Höhe an.
initial-scal: anfängliches Skalierungsverhältnis, das Skalierungsverhältnis, wenn die Seite zum ersten Mal geladen wird.
maximaler Maßstab: Der maximale Maßstab, auf den der Benutzer zoomen darf.
minimaler Maßstab: Der minimale Maßstab, auf den der Benutzer zoomen darf.
Benutzerskalierbar: Ob der Benutzer manuell zoomen kann.
Favicon
Dies ist das kleine Symbol auf der linken Seite des Webseitentitels. Wenn nicht angegeben, sucht der Browser nach
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
css
Verknüpfen Sie die Style-Datei über das Link-Tag
<link rel="stylesheet" href="css/test.css">
javascript (Hervorhebung)
Verknüpfen Sie Skriptdateien über Skript-Tags
<script src="js/test.js"></script>
Hier besprechen wir einige Punkte
1 Der Unterschied zwischen der Platzierung von js-Dateien im head und in the body
Wenn das Skript-Tag das Async-Attribut nicht hinzufügt, muss die js-Datei heruntergeladen werden, bevor mit der Datei fortgefahren wird Wenn es klein ist, ist es in Ordnung. Wenn es relativ groß ist, wird es einen Blockierungseffekt haben und die Benutzererfahrung beeinträchtigen.
Wenn der Browser die Webseite analysiert, analysiert er sie Zeile für Zeile, was bedeutet, dass er stoppt, wenn er die js-Datei im Kopf analysiert, und unsere Dom-Struktur im Body-Tag unter dem Kopf liegt, was bedeutet, dass wir es getan haben Warten Sie, bis die JS-Datei heruntergeladen ist. Wenn wir sie am Ende des Körpers platzieren, lädt der Browser sie erst herunter, nachdem die JS-Datei analysiert wurde Allerdings können wir den Inhalt des Körpers bereits vor dem Herunterladen sehen. Das Erlebnis wird besser sein.
Manche Leute fragen sich vielleicht, was der Unterschied zwischen der Platzierung am Kopf und am Boden des Körpers ist ? Tatsächlich ist das Platzieren in den Kopf des Körpers dasselbe wie das Platzieren in den Kopf. defer und async
defer :Wenn ein Skript das Defer-Attribut hinzufügt, wird es nach dem Parsen der HTML-Seite ausgeführt, auch wenn es im Kopf platziert ist, was dem Platzieren des Skripts am Ende der Seite ähnelt .
<script defer src="test.js"></script>
async:
Für async ist dies ein neues Attribut in HTML5. Seine Funktion besteht darin, Skripte asynchron zu laden und auszuführen, ohne das Laden der Seite durch das Laden von Skripten zu blockieren. Nach dem Laden wird es sofort ausgeführt. Bei Async erfolgt das Laden und Rendern nachfolgender Dokumentelemente parallel (asynchron) zum Laden und Ausführen von script.js. Es ist jedoch sehr wahrscheinlich, dass es nicht in der ursprünglichen Reihenfolge ausgeführt wird. Wenn vor und nach js Abhängigkeiten bestehen, führt die Verwendung von async wahrscheinlich zu Fehlern.
<script async src="test.js"></script>3 Wo kann ich JS-Dateien am besten ablegen?
Jetzt hat der Browser einige Optimierungen vorgenommen. Selbst wenn Sie JS in den Kopf einfügen, wird es kein großes Problem geben, sodass wir die erforderlichen JS in den Kopf einfügen können Kopf: Platzieren Sie relativ große Js an der Unterseite des Körpers, aber der einfachste und beste Weg ist, sie an der Unterseite des Körpers zu platzieren
Empfohlenes Tutorial: „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonWas in den HTML-Header eingefügt werden soll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!