Detaillierte Erklärung der Meta-Tags und ihrer Verwendung in HTML

Ich werde keine weitere Zeit mit Unsinnsgerede verschwenden. Beginnen wir mit dem heutigen Thema.

Meta-Tags in HTML

1. Bedeutung des Meta-Tags

Das <meta>-Element liefert Metainformationen über die Seite, beispielsweise eine Beschreibung und Schlüsselwörter für Suchmaschinen sowie die Aktualisierungshäufigkeit.

Der <meta>-Tag wird im Kopf des Dokuments platziert und enthält keinen Inhalt.

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

2. Gemeinsame Attribute in Meta

1. Zeichensatz

Beschreibung: Gibt die Zeichenkodierung von HTML-Dokumenten an.

Verwendung: <meta charset="UTF-8">

2. Ansichtsfenster

Beschreibung: Dies ist der sichtbare Bereich der Webseite des Benutzers. Wie wir alle wissen, sind die Bildschirme von Mobilgeräten im Allgemeinen viel kleiner als die von PCs. Webkit-Browser bilden ein größeres „virtuelles“ Fenster auf dem Bildschirm des Mobilgeräts ab. Das standardmäßige virtuelle Fenster ist 980 Pixel breit (die Standardbreite der meisten Websites zurzeit) und wird dann in einem bestimmten Verhältnis (3:1 oder 2:1) skaliert.

Das heißt, wenn wir eine normale Webseite laden, lädt WebKit die Webseite zuerst entsprechend dem Browserstandard von 980 Pixeln und reduziert sie dann auf eine Breite von 490 Pixeln. Beachten Sie, dass es sich hierbei um eine globale Verkleinerung handelt, d. h. alle Elemente auf der Seite werden verkleinert.

Verwendung:

<meta id="Ansichtsfenster" name="Ansichtsfenster" content="Breite=Gerätebreite; Anfangsmaßstab=1,0; Maximalmaßstab=1; Benutzerskalierung=nein;">

(1) Breite

Die Breite steuert die Größe des Ansichtsfensters. Im Allgemeinen wird sie für eine adaptive Anzeige auf die Gerätebreite eingestellt.

(2) Anfangsskala

initial-scale: Das anfängliche Zoomverhältnis, d. h. das Zoomverhältnis beim ersten Laden der Seite.

(3) Maximalmaßstab

maximum-scale Maximaler Zoom. Dies ist die maximal zulässige Zoomstufe. Dies ist ebenfalls ein Gleitkommawert, der den maximalen Multiplikator der Seitengröße im Vergleich zur Bildschirmgröße angibt.

(4) Mindestmaß

Mindestmaßstab: Der Mindestmaßstab, auf den der Benutzer zoomen darf. In der Verwendung ähnlich wie Maximum-Scale.

(5) benutzerdefiniert skalierbar

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

3. Schlüsselwörter

Beschreibung: Eine Liste mit Schlüsselwörtern für Suchmaschinen. Jedes Schlüsselwort wird durch ein englisches Komma „,“ getrennt. Geben Sie Schlüsselwörter an, die die Suchmaschine verwendet, um die Qualität Ihrer Suchvorgänge zu verbessern.

Verwendung: <Metaname="Keywords" Content="Keyword 1, Keyword 2, Keyword 3, Keyword 4, ...">

4. Beschreibung

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

Verwendung ：<Meta name="Description" Content="你網頁的簡述">

5. Formaterkennung

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

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

 Metaname = "Formaterkennung" Inhalt = "Telefonnummer"
    Metaname = "Formaterkennung" Inhalt = "E-Mail = nein"
    Metaname = "Formaterkennung" Inhalt = "Adresse = nein"

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


(1) Telefon

Sie haben offensichtlich eine Zahlenfolge geschrieben, ohne einen Linkstil hinzuzufügen, aber das iPhone fügt Ihrem Text automatisch einen Linkstil hinzu und wählt automatisch, wenn Sie auf die Nummer klicken! Wie entferne ich diesen DFÜ-Link? Jetzt kommt unser Meta ins Spiel. Der Code lautet wie folgt:

telephone=no deaktiviert die Umwandlung von Rufnummern in DFÜ-Links!
Telephone=yes aktiviert die Konvertierung von Nummern in DFÜ-Links. Um die Konvertierungsfunktion zu aktivieren, müssen Sie diese Metadaten nicht schreiben. Sie sind standardmäßig aktiviert!

(2) E-Mail

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

email=no ist als E-Mail-Adresse nicht zulässig!
email=yes aktiviert den Text standardmäßig als E-Mail-Adresse. Sie müssen diese Metadaten nicht schreiben, sie sind standardmäßig aktiviert!

(3) Anschrift

Adresse=nein. Springen zur Karte verboten!
adress=yes aktiviert die Funktion, mit der man durch Klicken auf die Adresse direkt zur Karte springen kann. Standardmäßig ist dies aktiviert!

6. Apple-Touch-Vollbild

Hinweis: Nach dem Hinzufügen zum Home-Bildschirm wird es im Vollbildmodus angezeigt.

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

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

Beschreibung: Die Funktion dient zum Löschen der standardmäßigen Apple-Symbolleiste und Menüleiste. content hat zwei Werte: „yes“ und „no“. Wenn wir die Symbolleiste und die Menüleiste anzeigen müssen, müssen wir diese Metadatenzeile nicht hinzufügen. Sie wird standardmäßig angezeigt.

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

8. App-Konfiguration

Beschreibung: Verlauf und Animationseffekte beibehalten

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

9. msapplication-tap-highlight

Beschreibung: Klicken ohne Hervorhebung (Hervorhebung)

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

Zusammenfassen

Oben finden Sie eine ausführliche Einführung in die Meta-Tags und ihre Verwendung in HTML. Ich hoffe, dass sie Ihnen weiterhelfen wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!