Zusammenfassung der Meta-Tags in HTML, Zusammenfassung der Meta-Attribute in HTML5-Heads

Zusammenfassung der Meta-Tags in HTML, Zusammenfassung der Meta-Attribute in HTML5-Heads

Vorwort

Meta ist ein Hilfstag im Kopfbereich der HTML-Sprache. Vielleicht denken Sie, dass diese Codes unnötig sind. Wenn Sie Meta-Tags sinnvoll einsetzen, können Sie tatsächlich unerwartete Ergebnisse erzielen. Zu den Funktionen von Meta-Tags gehören: Suchmaschinenoptimierung (SEO), Definition der von der Seite verwendeten Sprache, automatisches Aktualisieren und Verweisen auf neue Seiten, Erzielen dynamischer Effekte beim Konvertieren von Webseiten, Steuern des Seitenpufferns, Bewerten und Bewerten von Webseiten, Steuern des Fensters, in dem die Webseite angezeigt wird usw.!

HTML-Meta-Zusammenfassung

Zusammensetzung des Meta-Tags: Das Meta-Tag hat zwei Attribute, nämlich das http-equiv-Attribut und das Name-Attribut. Unterschiedliche Attribute haben unterschiedliche Parameterwerte, und diese unterschiedlichen Parameterwerte realisieren unterschiedliche Webseitenfunktionen.

<!DOCTYPE html> <!-- HTML5-Dokumenttyp verwenden, Groß-/Kleinschreibung nicht beachten -->
<html lang="zh-cmn-Hans"> <!-- Eine standardisiertere Art, das Attribut „lang“ zu schreiben http://zhi.hu/XyIa -->
<Kopf>
    <!-- Geben Sie die vom Dokument verwendete Zeichenkodierung an -->
    <meta charset='utf-8'>
    <!-- Geben Sie der neuesten Version von IE und Chrome den Vorzug -->
    <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1"/>
    <!-- Seitenbeschreibung -->
    <meta name="description" content="Nicht mehr als 150 Zeichen"/>
    <!-- Seitenschlüsselwörter-->
    <meta name="Schlüsselwörter" content=""/>
    <!-- Seitenautor-->
    <meta name="Autor" content="Name, [email protected]"/>
    <!-- Suchmaschinen-Crawl -->
    <meta name="robots" content="index,follow"/>
    <!-- Ansichtsfenster für Mobilgeräte hinzufügen -->
    <meta name="viewport" content="Anfangsmaßstab=1, Maximalmaßstab=3, Minimalmaßstab=1, benutzerdefiniert skalierbar=nein">
    <!-- `width=device-width` führt dazu, dass beim Öffnen der Seite im WebApp-Vollbildmodus ein schwarzer Rand erscheint, nachdem sie zum Home-Bildschirm auf dem iPhone 5 hinzugefügt wurde upload/2022/web/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone und iTouch, Standard 57 x 57 Pixel, erforderlich -->
    <link rel="apple-touch-icon-precomposed" Größen="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone und Retina iTouch, 114 x 114 Pixel, optional, aber empfohlen -->
    <link rel="apple-touch-icon-precomposed" Größen="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad, 144x144 Pixel, optional, aber empfohlen -->
    <!-- iOS-Symbol Ende -->
 
    <!-- iOS-Startbildschirm beginnt -->
    <link rel="apple-touch-startup-image" Größen="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung) -->
    <link rel="apple-touch-startup-image" Größen="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad-Hochformatbildschirm 1536 x 2008 (Retina) -->
    <link rel="apple-touch-startup-image" Größen="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad horizontaler Bildschirm 1024x748 (Standardauflösung) -->
    <link rel="apple-touch-startup-image" Größen="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad horizontaler Bildschirm 2048x1496 (Retina) -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch vertikaler Bildschirm 320x480 (Standardauflösung) -->
    <link rel="apple-touch-startup-image" Größen="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch vertikaler Bildschirm 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" Größen="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 vertikaler Bildschirm 640x1136 (Retina) -->
    <!-- Ende des iOS-Startbildschirms -->
 
    <!-- iOS-Geräte Ende -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 Kachelfarbe -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Kachelsymbole von Windows 8-->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- RSS-Abonnement hinzufügen -->
    <link rel="Verknüpfungssymbol" type="image/ico" href="/favicon.ico"/>
    <!-- Favicon-Symbol hinzufügen -->

    <!-- Beginn des SNS-Social-Tags -->
    <!-- Siehe Weibo-API -->
    <meta property="og:type" content="Typ" />
    <meta property="og:url" content="URL-Adresse" />
    <meta property="og:title" content="Titel" />
    <meta property="og:image" content="Bild" />
    <meta property="og:description" content="Beschreibung" />
    <!-- sns social tag end -->
 
    <title>Titel</title>
</Kopf>

Oben sind einige häufig verwendete Metaattribute aufgeführt. Im Folgenden wird die Verwendung von Meta erläutert.

Meta ist ein Hilfstag im Kopfbereich der HTML-Sprache. Vielleicht denken Sie, dass diese Codes unnötig sind. Wenn Sie Meta-Tags sinnvoll einsetzen, können Sie tatsächlich unerwartete Ergebnisse erzielen. Zu den Funktionen von Meta-Tags gehören: Suchmaschinenoptimierung (SEO), Definition der von der Seite verwendeten Sprache, automatisches Aktualisieren und Verweisen auf neue Seiten, Erzielen dynamischer Effekte beim Konvertieren von Webseiten, Steuern des Seitenpufferns, Bewerten und Bewerten von Webseiten, Steuern des Fensters, in dem die Webseite angezeigt wird usw.!

Zusammensetzung des Meta-Tags: Das Meta-Tag hat zwei Attribute, nämlich das http-equiv-Attribut und das Name-Attribut. Unterschiedliche Attribute haben unterschiedliche Parameterwerte, und diese unterschiedlichen Parameterwerte realisieren unterschiedliche Webseitenfunktionen.

1. Namensattribut

Das Namensattribut wird hauptsächlich zur Beschreibung der Webseite verwendet. Der entsprechende Attributwert ist Inhalt. Der Inhalt im Inhalt wird hauptsächlich verwendet, um Suchmaschinenrobotern das Auffinden und Klassifizieren von Informationen zu erleichtern.

Die Syntax des Namensattributs des Meta-Tags lautet:

<meta name="parameter" content="spezifischer Parameterwert">.

Das Name-Attribut hat hauptsächlich die folgenden Parameter:

A. Schlüsselwörter

Beschreibung: Schlüsselwörter werden verwendet, um Suchmaschinen mitzuteilen, was die Schlüsselwörter Ihrer Webseite sind.

Beispiel:

<meta name="keywords" content="Meta-Zusammenfassung, HTML-Meta, Meta-Attribut, Meta-Sprung">

B. Beschreibung (Beschreibung des Webseiteninhalts)

Beschreibung: Die Beschreibung wird verwendet, um Suchmaschinen den Hauptinhalt Ihrer Website mitzuteilen.

Beispiel:

<meta name="description" content="haorooms blog, html-Meta-Zusammenfassung, Meta ist ein Hilfstag im Kopfbereich der HTML-Sprache.">

C. Roboter (Roboterführer)

Beschreibung: Roboter werden verwendet, um Suchrobotern mitzuteilen, welche Seiten indiziert werden müssen und welche nicht.

Die Inhaltsparameter sind „alle“, „keine“, „index“, „noindex“, „follow“ und „nofollow“. Die Standardeinstellung ist „alles“.

Beispiel:

<meta name="robots" content="keine">

Die spezifischen Parameter sind wie folgt:

Der Informationsparameter ist alles: Die Dateien werden abgerufen und die Links auf der Seite können abgefragt werden;

Der Informationsparameter ist „none“: Die Datei wird nicht abgerufen und die Links auf der Seite können nicht abgefragt werden;

Der Informationsparameter ist Index: Die Datei wird abgerufen;

Der Informationsparameter lautet: Die Links auf der Seite können abgefragt werden;

Der Informationsparameter lautet noindex: Die Datei wird nicht indexiert, die Links auf der Seite können aber abgefragt werden;

Der Informationsparameter lautet nofollow: Die Datei wird abgerufen, aber die Links auf der Seite werden nicht abgefragt;

D. Autor

Beschreibung: Markieren Sie den Autor der Webseite

Beispiel:

<meta name="autor" content="root,[email protected]">

E. Generator

<meta name="generator" content="Informationsparameter"/>

Der Generatorinformationsparameter des Meta-Tags gibt an, welche Software zum Erstellen der Website verwendet wurde.

F. URHEBERRECHT

<META NAME="COPYRIGHT"CONTENT="Informationsparameter">

Der COPYRIGHT-Informationsparameter des Meta-Tags stellt die Copyright-Informationen der Website dar.

G. erneut besuchen-nach

<META name="revisit-after"CONTENT="7days">

„revisit-after“ bedeutet erneuter Besuch der Website, „7days“ bedeutet 7 Tage usw.

2. http-equiv-Attribut

Wie der Name schon sagt, entspricht http-equiv dem Dateiheader von http. Es kann einige nützliche Informationen an den Browser zurücksenden, um den Inhalt der Webseite korrekt und genau anzuzeigen. Der entsprechende Attributwert ist content. Der Inhalt in content ist eigentlich der variable Wert jedes Parameters.

Das Syntaxformat des http-equiv-Attributs des Meta-Tags ist:

<meta http-equiv="Parameter" content="Parametervariablenwert">;

Das http-equiv-Attribut hat hauptsächlich die folgenden Parameter:

A. Läuft ab

Beschreibung: Kann verwendet werden, um die Ablaufzeit einer Webseite festzulegen. Wenn eine Webseite abläuft, muss sie erneut an den Server übertragen werden.

Verwendung:

<meta http-equiv="läuft ab" content="Fr,12Jan200118:18:18GMT">

Hinweis: Das Zeitformat muss GMT sein.

B. Pragma (Cache-Modus)

Beschreibung: Verhindert, dass der Browser auf Seiteninhalte aus dem Cache des lokalen Computers zugreift.

Verwendung:

<meta http-equiv="Pragma" content="kein-cache">

Hinweis: Mit dieser Einstellung können Besucher nicht offline surfen.

C. Aktualisieren

Beschreibung: Automatisch aktualisieren und auf eine neue Seite verweisen.

Verwendung:

<meta http-equiv="Refresh"content="2;URL=https://www.jb51.net"> //(Beachten Sie die Anführungszeichen am Ende, die vor den Sekunden und nach der URL stehen)

Hinweis: Die 2 bedeutet, dass die URL nach einem Aufenthalt von 2 Sekunden automatisch aktualisiert wird.

D. Set-Cookie (Cookie-Einstellung)

Hinweis: Nach Ablauf der Laufzeit der Webseite werden die gespeicherten Cookies gelöscht.

Verwendung:

<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Freitag,12.Jan.200118:18:18GMT;path=/">

Hinweis: Das Zeitformat muss GMT sein.

E. Fensterziel (Fenstereinstellungen anzeigen)

Beschreibung: Erzwingt, dass die Seite als unabhängige Seite im aktuellen Fenster angezeigt wird.

Verwendung:

<meta http-equiv="Fenster-Ziel" content="_top">

Hinweis: Dient dazu, das Aufrufen eigener Seiten durch Dritte im Frame zu verhindern.

F. content-Type (Einstellungen für den Anzeigezeichensatz)

Beschreibung: Legt den von der Seite verwendeten Zeichensatz fest.

Verwendung:

<meta http-equiv="Inhaltstyp" Inhalt="text/html;charset=gb2312">

Die Einzelheiten lauten wie folgt:

Wenn der Zeichensatzparameter des Meta-Tags GB2312 ist, bedeutet dies, dass die von der Website verwendete Kodierung vereinfachtes Chinesisch ist.

Wenn der Zeichensatzparameter des Meta-Tags BIG5 ist, bedeutet dies, dass die von der Website verwendete Kodierung traditionelles Chinesisch ist.

Wenn der Zeichensatzparameter des Meta-Tags iso-2022-jp ist, bedeutet dies, dass die von der Website verwendete Kodierung Japanisch ist.

Wenn der Zeichensatzinformationsparameter des Meta-Tags ks_c_5601 ist, bedeutet dies, dass die von der Website verwendete Kodierung koreanisch ist.

Wenn der Zeichensatzparameter des Meta-Tags ISO-8859-1 ist, bedeutet dies, dass die von der Website verwendete Kodierung Englisch ist.

Wenn der Zeichensatzinformationsparameter des Meta-Tags UTF-8 ist, stellt er die universelle Sprachkodierung dar.

G. content-Language (Einstellung der Anzeigesprache)

Verwendung:

<meta http-equiv="Inhaltssprache"content="zh-cn"/>

H. Cache-Control gibt den Cache-Mechanismus an, dem Anfragen und Antworten folgen.

Cache-Control gibt den Cache-Mechanismus an, dem Anforderung und Antwort folgen. Das Festlegen von Cache-Control in einer Anforderungs- oder Antwortnachricht ändert nicht die Cache-Verarbeitung der anderen Nachricht. Die Cache-Anweisungen während der Anfrage umfassen no-cache, no-store, max-age, max-stale, min-fresh, on
ly-if-cached, die Anweisungen in der Antwortnachricht umfassen „public“, „private“, „no-cache“, „no-store“, „no-transform“, „must-revalidate“, „proxy-revalidate“ und „max-age“. Die Anweisungen in den einzelnen Nachrichten bedeuten Folgendes:
Öffentlich bedeutet, dass die Antwort von jedem Cache zwischengespeichert werden kann
„Privat“ bedeutet, dass die gesamte oder teilweise Antwortnachricht für einen einzelnen Benutzer nicht vom gemeinsam genutzten Cache verarbeitet werden kann. Dadurch kann der Server dem aktuellen Benutzer nur einen Teil der Antwortnachricht beschreiben, der für die Anforderungen anderer Benutzer ungültig ist.
no-cache gibt an, dass die Anforderungs- oder Antwortnachricht nicht zwischengespeichert werden kann.
„no-store“ wird verwendet, um die unbeabsichtigte Veröffentlichung wichtiger Informationen zu verhindern. Das Senden in einer Anforderungsnachricht führt dazu, dass weder die Anforderungs- noch die Antwortnachrichten den Cache verwenden.
max-age gibt an, dass der Client Antworten akzeptieren kann, die nicht älter als die angegebene Zeit (in Sekunden) sind.
min-fresh gibt an, dass der Client Antworten empfangen kann, deren Antwortzeit kürzer ist als die aktuelle Zeit plus die angegebene Zeit
max-stale gibt an, dass der Client auch nach Ablauf der Zeitüberschreitung noch Antwortnachrichten empfangen kann. Wenn Sie einen Wert für die maximale Anzahl veralteter Nachrichten angeben, kann der Client Antwortnachrichten empfangen, die das angegebene Zeitlimit überschreiten.

J. http-equiv="Bildsymbolleiste"

<meta http-equiv="imagetoolbar" content="false"/>

Gibt an, ob die Bildsymbolleiste angezeigt werden soll. Wenn „false“ bedeutet dies, dass sie nicht angezeigt wird, und wenn „true“ bedeutet dies, dass sie angezeigt wird.

K. Inhalts-Skript-Typ

<Meta http-equiv="Inhalts-Skripttyp"Inhalt="text/javascript">

W3C-Webseitenspezifikation, die den Skripttyp auf einer Seite angibt.

HTML <base> Tag

Geben Sie die Standardöffnungsmethode für alle Links auf der Seite an:

Zum Beispiel:

<Basisziel="_self">

Alle Tabs der angegebenen Seite werden auf dieser Seite geöffnet!

<<:  Verhindern von SQL-Injection in Webprojekten

>>:  Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge

Artikel empfehlen

So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen

Standort / { Index Index.jsp; Proxy_next_upstream...

JS + AJAX realisiert die Verknüpfung von Dropdown-Listen für Provinzen, Städte und Bezirke

In diesem Artikel wird der spezifische Code von J...

So exportieren und importieren Sie SQL-Dateien unter einem Linux-Befehl

Dieser Artikel beschreibt, wie Sie SQL-Dateien mi...

Verschiedene Front-End-Druckmethoden des Webs: CSS steuert den Druckstil von Webseiten

CSS steuert den Druckstil von Webseiten : Verwende...

Detaillierte Schritte zur Installation der angegebenen Docker-Version (1.12.6) mit RPM

1. Gründe Wenn das System Centos7.3 ist, ist die ...

Einführung in den B-Tree-Einfügeprozess

Im vorherigen Artikel https://www.jb51.net/articl...

Ändern Sie die Startzeit von Grub in Ubuntu

Die Online-Suche zum Ändern der Grub-Startzeit be...

Verständnis und Anwendungsszenarien von Enumerationstypen in TypeScript

Inhaltsverzeichnis 1. Was ist 2. Verwendung Numer...

Detaillierte Erläuterung der Überwachung der NVIDIA GPU-Nutzung unter Linux

Bei der Verwendung von TensorFlow für Deep Learni...

So erstellen Sie ein Apr-Modul zur Tomcat-Leistungsoptimierung

Vorwort Tomcat ist ein weit verbreiteter Java-Web...

Detailliertes Installationstutorial für mysql-8.0.11-winx64.zip

Laden Sie das ZIP-Installationspaket herunter: Do...

Web-Standardanwendung: Neugestaltung der Tencent QQ-Homepage

Die Homepage von Tencent QQ wurde neu gestaltet un...

So installieren Sie Android x86 in einer virtuellen VMware-Maschine

Manchmal möchten Sie eine App testen, aber nicht ...

So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus

Phänomen: Führen Sie ein Image aus, zum Beispiel ...

MySQL-Export ganzer oder einzelner Tabellendaten

Exportieren einer einzelnen Tabelle mysqldump -u ...