Detaillierte Erläuterung der Meta-Tags und deren Verwendung in HTML

Kein Unsinn mehr, fangen wir mit dem heutigen Thema an.

html/11675.html">Meta-Tag in HTML

Das <meta>-Element stellt Metainformationen über die Seite bereit, z. B. Beschreibung und Schlüsselwörter für Suchmaschinen und Aktualisierungshäufigkeit.

Das <meta>-Tag befindet sich am Kopf des Dokuments und enthält keinen Inhalt.

Die Attribute des <meta>-Tags definieren die mit dem Dokument verknüpften Name/Wert-Paare.

1. charset (Zeichensatz)

Beschreibung: Gibt die Zeichenkodierung von HTML-Dokumenten an.

Verwendung: <meta charset=UTF-8>

2. Ansichtsfenster (Ansichtsfenster)

Beschreibung: Es handelt sich um den sichtbaren Bereich der Webseite des Benutzers. Jeder weiß, dass der Bildschirm von Mobilgeräten im Allgemeinen viel kleiner ist als der von PCs. Der Webkit-Browser ordnet dem Bildschirm des Mobilgeräts ein größeres virtuelles Fenster zu. Das virtuelle Standardfenster ist 980 Pixel breit (die aktuelle Standardbreite der meisten Websites). ) und dann entsprechend einem bestimmten Verhältnis (3:1 oder 2:1) skalieren.

Das heißt, wenn wir eine normale Webseite laden, lädt Webkit zunächst die Webseite mit dem Browserstandard von 980 Pixeln und reduziert sie dann auf eine Breite von 490 Pixeln. Beachten Sie, dass es sich bei dieser Reduzierung um eine globale Reduzierung handelt, d. h. alle Elemente auf der Seite werden reduziert.

Verwendung:

 <meta id=viewport name=viewport content=width=device-width; maximum-scale=1;>

(1)Breite

width steuert die Größe des Ansichtsfensters und wird für Anpassungszwecke normalerweise auf device-width eingestellt

(2) Anfangsmaßstab

Anfangsskalierung: Das anfängliche Skalierungsverhältnis, also das Skalierungsverhältnis, wenn die Seite zum ersten Mal geladen wird.

(3) Maximalmaßstab

Maximum-Scale Maximale Skalierung. Das heißt, der maximal zulässige Skalierungsgrad. Dies ist ebenfalls ein Gleitkommawert, der den maximalen Multiplikator der Seitengröße im Vergleich zur Bildschirmgröße angibt.

(4) Mindestmaßstab

Mindestmaßstab: Der Mindestmaßstab, auf den der Benutzer zoomen darf. Ähnlich wie bei maximaler Nutzung.

(5) Vom Benutzer skalierbar

Vom Benutzer skalierbar. Vom Benutzer anpassbare Skalierung. Das heißt, ob der Benutzer die Zoomstufe der Seite ändern kann. Wenn es auf „Ja“ gesetzt ist, darf der Benutzer es ändern, andernfalls ist es „Nein“.

3. Schlüsselwörter

Beschreibung: Eine Liste von Schlüsselwörtern, die für Suchmaschinen bereitgestellt werden. Verwenden Sie Kommas, um die einzelnen Schlüsselwörter zu trennen. Geben Sie Schlüsselwörter an, die Suchmaschinen verwenden, um die Suchqualität zu verbessern.

Verwendung: <Metaname=Keywords Content=Keywords 1, Keywords 2, Keywords 3, Keywords 4,…>

4. Beschreibung (Beschreibung, Einleitung)

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

Verwendung ：<Meta name=Description Content=你网页的简述>

5. Formaterkennung (Formaterkennung)

Beschreibung: Formaterkennung wird verwendet, um einige Formate in HTML zu erkennen.

Verwendung: Das Formaterkennungsattribut von Meta hat hauptsächlich die folgenden Einstellungen:

 Metaname=Formaterkennungsinhalt=Telefon=Nein Metaname=Formaterkennungsinhalt=E-Mail=Nein Metaname=Formaterkennungsinhalt=Adresse=Nein

Sie können es auch nacheinander schreiben: meta name=format-detection content=telephone=no,email=no,adress=no

(1)Telefon

Sie haben eindeutig eine Zahlenfolge geschrieben, ohne einen Link-Stil hinzuzufügen, aber das iPhone fügt Ihrem Text automatisch einen Link-Stil hinzu, und wenn Sie auf die Nummer klicken, wird die Nummer automatisch gewählt! Wie entferne ich diesen DFÜ-Link? Zu diesem Zeitpunkt sollte unser Meta erneut seine magische Kraft unter Beweis stellen. Der Code lautet wie folgt:

phone=no deaktiviert die Umwandlung von Nummern in DFÜ-Links!

phone=yes ermöglicht die Konvertierung von Nummern in DFÜ-Links. Um die Konvertierungsfunktion zu aktivieren, ist es nicht erforderlich, dieses Meta zu schreiben. Es ist standardmäßig aktiviert.

(2)E-Mail

Weisen Sie das Gerät an, die E-Mail-Adresse nicht zu erkennen und sie nach dem Klicken nicht automatisch zu senden.

email=no ist als E-Mail-Adresse verboten!

email=yes aktiviert den Text und verwendet standardmäßig die E-Mail-Adresse. Es ist nicht erforderlich, dieses Meta zu schreiben. Es ist standardmäßig aktiviert.

(3)Adresse

adress=no verbietet das Springen zur Karte!

adress=yes aktiviert die Funktion, durch Klicken auf die Adresse direkt zur Karte zu springen. Sie ist standardmäßig aktiviert!

6. Apple-Touch-Vollbild

Beschreibung: Nach dem Hinzufügen zum Startbildschirm wird es im Vollbildmodus angezeigt.

Verwendung: <meta name=apple-touch-fullscreen content=yes>

7. Apple-Mobile-Web-App-fähig

Beschreibung: Die Funktion besteht darin, die standardmäßige Apple-Symbolleiste und Menüleiste zu löschen. Der Inhalt hat zwei Werte: Ja und Nein. Wenn wir die Symbolleiste und die Menüleiste anzeigen müssen, ist es nicht erforderlich, diese Metazeile hinzuzufügen.

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

8. App-Konfiguration

Beschreibung: Verlaufsaufzeichnungen und Animationseffekte aufbewahren

Verwendung: <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>

9. msapplication-tap-highlight

Beschreibung: Klicken Sie auf „Keine Hervorhebung“ (Hervorheben).

Verwendung: <meta name=msapplication-tap-highlight content=no>

Das Obige ist die detaillierte Erklärung der vom Herausgeber eingeführten Meta-Tags und deren Verwendung. Ich hoffe, dass sie Ihnen hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!