Wissenswertes über Meta-Tags in HTML

Das Meta-Tag ist ein Hilfs-Tag im Head-Bereich der HTML-Sprache. Es befindet sich zwischen dem Head-Tag und dem Title-Tag am Kopf des HTML-Dokuments. Es stellt für den Benutzer unsichtbare Informationen bereit. Es kann von Browsern (wie Inhalte angezeigt oder Seiten neu geladen werden), Suchmaschinen (Schlüsselwörter) oder anderen Webdiensten verwendet werden.

Ich habe jetzt den Inhalt von Meta-Tags, die häufig bei der Front-End-Seitenentwicklung verwendet werden, in einem Dokument zusammengestellt und bei Bedarf Metainformationen für die mobile Webentwicklung als Referenz hinzugefügt.

​1. Beschreiben Sie die im Dokument verwendete Zeichenkodierung

<meta charset=&#39;utf-8&#39;>

oder

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Das Meta-Tag definiert den von der HTML-Seite verwendeten Zeichensatz als utf-8, also Unicode. Es kann vereinfachtes Chinesisch, traditionelles Chinesisch und andere Sprachen (wie Japanisch, Koreanisch) auf derselben Seite anzeigen. Natürlich können Sie auch andere Zeichensätze wie gb2312 (vereinfachtes Chinesisch), big5 (traditionelles Chinesisch) usw. verwenden.

Derzeit empfehlen wir generell die Verwendung der ersten Schreibmethode, die auch die von HTML5 verwendete Schreibmethode ist.

​2. Geben Sie den verwendeten Browser und die verwendete Version an

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Wenn der angegebene Inhaltswert IE=edge,chrome=1 ist, wird zuerst die neueste Version von IE und Chrome verwendet. Vorausgesetzt, dass auf dem Client Google Chrome Frame installiert ist, wird die Chrome-Rendering-Engine im IE zum Rendern der Seite verwendet. Andernfalls wird der höchste Standardmodus des Client-IE zum Rendern der Seite verwendet.

Es gibt auch folgende Einstellungsmethoden:

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

​3. SEO-Optimierung im Zusammenhang

Seitenbeschreibung: Jede Webseite sollte ein Beschreibungs-Tag mit nicht mehr als 150 Zeichen haben, das den Inhalt der Webseite genau wiedergibt.

<meta name="description" content="不超过150个字符" />

Seitenschlüsselwörter: Jede Webseite sollte über einen eindeutigen Satz von Schlüsselwörtern verfügen, die den Inhalt der Webseite beschreiben.

Verwenden Sie beschreibende und repräsentative Schlüsselwörter und Phrasen, nach denen die Leute wahrscheinlich suchen, und beschreiben Sie die auf der Seite bereitgestellten Informationen genau.

<meta name="keywords" content="html5, css3, 关键字"/>

Definieren Sie den Autor der Webseite, optional

<meta name="author" content="月光光" />

​4. Seitenumleitung und Aktualisierung: Die Zahl im Inhalt gibt die Zeit (Sekunden) an, also wie lange die Aktualisierung dauert. Wenn Sie eine URL hinzufügen, wird auf die angegebene Webseite weitergeleitet.

<meta http-equiv="Refresh"  contect="5;url=http://www.php.cn" />

Der obige Code bedeutet, dass er nach 5 Sekunden automatisch aktualisiert wird und zur URL http://www.php.cn

springt 5. Läuft die Ablaufzeit der Webseite ab

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

Legen Sie die Ablaufzeit der Webseite fest. Nach Ablauf muss diese erneut auf dem Server aufgerufen werden. Dabei ist zu beachten, dass das GMT-Zeitformat verwendet oder direkt auf 0 gesetzt werden muss (kein Caching).

​6. Pragma verbietet lokales Caching

<meta http-equiv="Pragma" contect="no-cache" />

Stellen Sie ein, dass die Webseite nicht im Cache gespeichert wird, und aktualisieren Sie die Seite bei jedem Besuch. Mit dieser Einstellung können Besucher nicht offline surfen.

​7. Sichtbarer Bereich auf dem Bildschirm des Mobilgeräts

Da sich die Bildschirmbreite mobiler Geräte von der des herkömmlichen Webs unterscheidet, müssen wir den Wert des Ansichtsfensters ändern.

Die Ansichtsbreite der meisten 4,7-5-Zoll-Geräte ist auf 360 Pixel eingestellt; das iPhone 6 ist auf 375 Pixel eingestellt; das iPhone 6 Plus ist auf 414 Pixel eingestellt.

Breite – Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard 980 Pixel)

Höhe – die Höhe des Ansichtsfensters (im Bereich von 223 bis 10.000)

initial-scale – anfängliche Skalierung (im Bereich von > 0 bis 10)

​minimaler Maßstab – Der minimale Maßstab, auf den der Benutzer zoomen darf

​maximaler Maßstab – Das maximale Verhältnis, auf das der Benutzer zoomen darf

​Benutzerskalierbar – ob der Benutzer manuell skalieren kann (nein, ja)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Erzwingen Sie, dass die Breite des Dokuments und des Geräts 1:1 bleibt.

Das maximale Breitenverhältnis des Dokuments beträgt 1,0 (anfänglicher Skalierungswert und maximaler Skalierungswert); Benutzerskalierbar definiert, ob der Benutzer manuell zoomen kann (nein bedeutet keine Skalierung), sodass die Seite auf die Größe des Geräts festgelegt ist

Hinweis: Bei tatsächlichen Tests wurde festgestellt, dass einige Android-Browser diese Regel nicht unterstützen und die Seite vergrößern können. Sobald das Feld vergrößert wird, wird auch das Antwortfeld vergrößert, was zu Verwirrung auf der Seite führt : Definieren Sie die Mindestbreite der Seite.

Beachten Sie, dass viele Leute initial-scale=1 auf nicht reagierenden Websites verwenden, was dazu führt, dass die Website mit 100 % Breite gerendert wird und der Benutzer die Seite manuell verschieben oder zoomen muss. Wenn „user-scalable=no“ oder „maximum-scale=1“ zusammen mit „initial-scale=1“ verwendet wird, kann der Benutzer die Webseite nicht vergrößern/verkleinern, um den gesamten Inhalt anzuzeigen.

body { 
    min-width: 320px; 
}

Es gibt auch die folgenden Einstellungen für Meta auf mobilen Geräten.

​

8. WebApp-Vollbildmodus: Tarn-App, Offline-Anwendung.

​

<meta name="apple-mobile-web-app-capable" content="yes" />

9. Statusleiste ausblenden/Farbe der Statusleiste festlegen: Dies wird nur wirksam, wenn der WebApp-Vollbildmodus aktiviert ist. Der Wert des Inhalts ist standardmäßig |. black |.

​

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

10. Titel zum Startbildschirm hinzugefügt

​

<meta name="apple-mobile-web-app-title" content="标题" />

11. Nummern ignorieren und automatisch als Telefonnummern erkennen

​

<meta content="telephone=no" name="format-detection" />

12. Identifizierung von E-Mail-Adressen ignorieren

Das obige ist der detaillierte Inhalt vonWissenswertes über Meta-Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!