Detaillierte Analyse der Verwendung und Attribute von HTML-Meta-Tags

Dieser Artikel bietet Ihnen eine detaillierte Analyse der Verwendung und der Eigenschaften von HTML-Meta-Tags. Ich hoffe, dass er für Sie hilfreich ist.

Seit ich selbst angefangen habe, Frontend zu lernen, habe ich nicht viel Kontakt mit Meta-Tags gehabt. Ich konzentriere mich hauptsächlich auf Tags, die angezeigt werden können, wie z. B. span, button, h1 usw. Manchmal überprüfe ich den Quellcode einiger bekannter Websites und finde viele Metadaten im Head-Tag.

Heute lernen wir die Verwendung von Meta kennen und sehen, welche Attribute sie hat.

1. Definition und Funktion

Meta, das heißt Metadaten (Metadaten) sind die Dateninformationen von Daten.

Dieses Tag stellt Metadaten für das HTML-Dokument bereit. Die Metadaten werden nicht auf dem Client angezeigt, sondern vom Browser analysiert.

wird normalerweise verwendet, um die Beschreibung, Schlüsselwörter, den Zeitpunkt der letzten Änderung der Datei, den Autor und andere Metadaten der Webseite anzugeben.

Metadaten können über Browser (wie Inhalte angezeigt oder Seiten neu geladen werden), Suchmaschinen (Schlüsselwörter) oder andere Webdienste aufgerufen werden.

2. Attribute

charset(htm5新增)	定义文档的字符编码
content	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	http响应头
name	属性名称
scheme (htm5废弃)	翻译 content 属性的值的方案

1. HTML5 neues Attribut, das die Zeichen der aktuellen Seite definiert Kodierung

Neue Schreibweise:

<meta charset="UTF-8">

Alte Schreibweise:

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

In HTML5 wird die neue Schreibweise bevorzugt

2. Namensattribut

a. Schlüsselwörter, Schlüsselwörter der aktuellen Webseite, leicht für Suchmaschinen zu identifizieren und Suchgenauigkeit zu verbessern

<meta name="keywords" content="cdn，网络加速，运营商">

b Aktuelle Webseite, wenn Sie die Baidu-Suche verwenden, wird der Beschreibungsinhalt unter jedem Titel der Ergebnisse angezeigt, um Benutzern das schnelle Auffinden von

<meta name="description" content="本公司专注提供CDN网络加速，同时也提供云计算服务">

c und viewport zu erleichtern. Dieses Meta ist etwas kompliziert und wird hauptsächlich verwendet in mobilen Webseiten. Ich werde es hier vorerst überspringen.

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

Die Werte von Inhalte sind all, none, index, noindex, follow, nofollow, der Standardwert ist all, die spezifischen Anweisungen sind wie in der Tabelle gezeigt:

e, Autor, der Autor des Dokuments

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

f, Copyright, die Copyright-Beschreibung des Dokuments

<meta name="author" content="liuhw，liuhuansir@126.com">

all	文档可以被索引，文档中的链接可以被查询
none	文档不能被索引，同时文档中的链接不能被查询
index	文档可以被索引
noindex	文档不能被索引，但是文档中的链接可以被查询
follow	文档中的链接可以被查询
nofollow	文档可以被索引，但是文档中的链接不能被查询

g, Revisit-After, Suchmaschinen-Crawler Das Zeitintervall für erneute Besuche. Wenn Ihre Website nicht häufig aktualisiert wird, können Sie diese Zeit auf einstellen etwas länger sein, was den Druck auf den Server etwas verringern und Bandbreitenressourcen sparen kann

<meta name="copyright" content="liuhw">

h, Renderer, Dual-Core-Browser Die Rendering-Methode gibt an, welcher Browser-Kernel standardmäßig zum Rendern verwendet wird, zum Beispiel 360 Browser:

<meta name="revisit-after" content="5 days" >

3, http-equiv

simuliert den Header in http und gibt einige Informationen an den Server weiter

a. die Ablaufzeit der Webseite.

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

b Für die Cache-Methode wird empfohlen, den Inhalt dieses Attributs unter „cache-control“ zu verwenden. URL

<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />

d, set-cookie, Cookie hinzufügen

<meta http-equiv="cache-control" content="no-cache">

e, Content-Type, die Zeichenkodierung des Dokuments, dasselbe wie Zeichensatz, es wird empfohlen, Zeichensatz zu verwenden

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳转向我自己的域名

f, x-ua-kompatibel, teilt dem Browser mit, welche Version zum Rendern des Dokuments verwendet werden soll

<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">

Zusammenfassend sind oben nur einige häufig verwendete Attribute aufgeführt, bitte Überprüfen Sie das Dokument, wenn Sie sie verwenden müssen

【Verwandte Empfehlungen:

HTML5-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Verwendung und Attribute von HTML-Meta-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!