suchen

Heim >Web-Frontend >HTML-Tutorial >Detaillierte Einführung in die Erstellung von HTML-Header-Tags_HTML/Xhtml_Webseiten

Detaillierte Einführung in die Erstellung von HTML-Header-Tags_HTML/Xhtml_Webseiten

WBOY
WBOYOriginal
2016-05-16 16:36:352290Durchsuche

Im HTML-Kopfteil gibt es viele Tags und Elemente, die das Browser-Rendering von Webseiten, SEO usw. betreffen. Jeder Browserkern und jeder inländische Browserhersteller verfügt über eigene Tag-Elemente, was zu vielen Unterschieden führt. Im Zeitalter des mobilen Internets sind die Kopfstruktur und die Metaelemente mobiler Endgeräte noch wichtiger. Der Zweck dieses Artikels besteht darin, die Bedeutung jedes Tags zu verstehen und einen Head-Tag zu schreiben, der Ihren eigenen Anforderungen entspricht. Dieser Artikel basiert auf Yishis Artikel und bietet eine erweiterte Zusammenfassung, um die Bedeutung und Verwendungsszenarien jedes Tags und Elements in häufig verwendeten Überschriften vorzustellen.

DOCTYPE

DOCTYPE (Dokumenttyp), diese Deklaration befindet sich an der vordersten Position im Dokument, vor dem HTML-Tag. Dieses Tag teilt dem Browser mit, um welche Art von Dokument es sich handelt HTML, das das Dokument verwendet, oder die XHTML-Spezifikation.

Die DTD-Deklaration (Document Type Definition) beginnt mit , unterscheidet nicht zwischen Groß- und Kleinschreibung und hat keinen Inhalt davor. Wenn andere Inhalte vorhanden sind (außer Leerzeichen), öffnet der Browser ein seltsames Fenster Der Modus unter IE (Quirks-Modus) rendert Webseiten. Öffentliche DTD, das Namensformat ist Registrierung // Organisation // Typ-Tag // Sprache, Registrierung bezieht sich darauf, ob die Organisation bei der International Organization for Standardization (ISO) registriert ist, was „Ja“ bedeutet, – „Nein“ bedeutet. Organisation ist der Name der Organisation, z. B. W3C. Der Typ ist normalerweise DTD. Ein Tag gibt eine Beschreibung des öffentlichen Texts an, d. h. einen eindeutigen beschreibenden Namen für den referenzierten öffentlichen Text, dem eine Versionsnummer folgen kann. Die endgültige Sprache ist die ISO 639-Sprachkennung der DTD-Sprache, z. B. EN für Englisch, ZH für Chinesisch. XHTML 1.0 kann drei DTD-Typen deklarieren. Stellt eine strikte Version, eine Übergangsversion bzw. ein rahmenbasiertes HTML-Dokument dar.

●HTML 4.01 streng

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
●HTML 4.01 Übergangsversion

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. > 
●HTML 4.01 Frameset

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. > 
●Das neueste HTML5 führt eine prägnantere Schrift ein, die vorwärts- und rückwärtskompatibel ist und zur Verwendung empfohlen wird.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >

Der Doctype hat in HTML zwei Hauptzwecke.

●Überprüfen Sie die Gültigkeit der Dokumente.

Es teilt dem Benutzeragenten und Validator mit, nach welcher DTD dieses Dokument geschrieben ist. Diese Aktion ist passiv. Der Browser lädt die DTD nicht herunter und überprüft die Gültigkeit. Sie wird nur aktiviert, wenn die Seite manuell überprüft wird.

●Bestimmen Sie den Rendering-Modus des Browsers

Für tatsächliche Vorgänge teilen Sie dem Browser mit, welcher Parsing-Algorithmus beim Lesen des Dokuments verwendet werden soll. Wenn es nicht geschrieben wird, analysiert der Browser den Code nach seinen eigenen Regeln, was das HTML-Layout ernsthaft beeinträchtigen kann. Browser haben drei Möglichkeiten, HTML-Dokumente zu analysieren.

●Nicht-seltsamer (Standard-)Modus
●Seltsamer Modus
●Teilweise seltsamer (fast Standard-)Modus Über den Dokumentmodus, den Browsermodus, den strikten Modus, den seltsamen Modus und das DOCTYPE-Tag des IE-Browsers können Sie mehr erfahren Lesemodus? Standard! Inhalt.

Zeichensatz

Deklarieren Sie die vom Dokument verwendete Zeichenkodierung,

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta charset="utf-8"> 

Vor HTML5 würde die Webseite so lauten:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="Content-Type " content="text/html; charset=utf-8">

Diese beiden sind gleichwertig, bitte lesen Sie die Details unten: vs. , also Es wird empfohlen, kürzere zu verwenden, die leichter zu merken sind.

lang-Attribut

Vereinfachtes Chinesisch

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html lang="zh-cmn-Hans "> 

Traditionelles Chinesisch

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html lang="zh-cmn-Hant "> 

Warum ist lang="zh-cmn-Hans" anstelle von lang="zh-CN", das wir normalerweise schreiben? Bitte lesen Sie: Sollte die Aussage am Kopf der Seite lang="zh" sein? lang="zh-cn".

Priorisieren Sie die Verwendung der neuesten Version von IE und Chrome

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="X-UA -Kompatibel" Inhalt="IE=edge,chrome=1" />

　360 mit Google Chrome Frame

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta name="renderer" Inhalt="webkit">

　Der 360-Browser wechselt nach dem Lesen dieses Tags sofort zum entsprechenden Geschwindigkeitskern. Um auf der sicheren Seite zu sein, schließen Sie sich außerdem

an
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="X-UA -Kompatibel" Inhalt="IE=Edge,chrome=1">

Durch diese Schreibweise kann GCF zum Rendern der Seite verwendet werden, wenn Google Chrome Frame installiert ist. Wenn GCF nicht installiert ist, wird zum Rendern die höchste Version des IE-Kernels verwendet.

Verwandte Links: Browser-Kernel-Control-Meta-Tag-Dokumentation

Baidu verbietet Transkodierung

Wenn Sie eine Webseite über ein Baidu-Mobiltelefon öffnen, kann Baidu die Transkodierung Ihrer Webseite ändern. Ziehen Sie Ihre Kleidung aus und kleben Sie Hundehautpflaster auf Ihren Körper. Zu diesem Zweck können Sie

auf den Kopf auftragen
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="Cache-Control " content="no-siteapp" />

Verwandte Links: SiteApp-Transkodierungserklärung


SEO-Optimierungsteil

Seitentitel-Tag (Kopfzeile (Erforderlich). ) <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3566')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_3566"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">Titel</span><span class="tag">></span><span>Ihr Titel</span><span class="tag"></</span><span class="tag-name">Titel </span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Seitenschlüsselwörter <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5916')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_5916"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"keywords"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"Ihre Schlüsselwörter"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p><br>Inhaltsbeschreibung der Seitenbeschreibung <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8699')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_8699"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">Meta</span><span> </span><span class="attribute">Name</span><span>=</span><span class="attribute-value">"Beschreibung"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"Ihre Beschreibung"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Webautor-Autor definieren <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2733')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_2733"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">Name</span><span>=</span><span class="attribute-value">"Autor"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"Autor,E-Mail-Adresse"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Definieren Sie die Indexierungsmethode für Websuchmaschinen. Robotterms ist eine durch Kommas getrennte Reihe von Werten. Sie hat normalerweise die folgenden Werte: none, noindex, nofollow, all, index und follow. <br><br><span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_1191')">Inhalt in die Zwischenablage kopieren</span></p> <div class="codeText"> <div id="code_1191"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"Roboter"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"index,follow"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Verwandte Links: <a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/ff724037(v=expression.40).aspx">WEB1038 – Tag enthält ungültigen Wert</a> <br><br><strong>Ansichtsfenster</strong></p> <p>　Viewport kann die Layoutdarstellung in mobilen Browsern verbessern. Schreiben Sie normalerweise </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2172')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_2172"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>width=device-width führt dazu, dass schwarze Ränder angezeigt werden, wenn das iPhone 5 zum Startbildschirm hinzugefügt und im WebApp-Vollbildmodus geöffnet wird (<a href="http://bigc.at/ios-webapp-viewport-meta.orz">http://bigc.at/ios-webapp-viewport- meta.orz</a> )</p> <p>Inhaltsparameter: </p> <p>Breite, Breite des Ansichtsfensters (numerischer Wert/Gerätebreite)<br>Höhe, Höhe des Ansichtsfensters (numerischer Wert/Gerätehöhe)<br>Anfängliches Skalierungsverhältnis, anfängliches Skalierungsverhältnis<br>Maximales Skalierungsverhältnis, maximales Skalierungsverhältnis<br>Minimum -scale Minimales Zoomverhältnis<br>Benutzerskalierbar Ob Benutzerskalierung zugelassen werden soll (ja/nein)<br>minimal-ui Ein neues Attribut in iOS 7.1 Beta 2 kann die obere und untere Statusleiste beim Laden der Seite minimieren. Dies ist ein boolescher Wert und kann direkt wie folgt geschrieben werden: </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4407')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_4407"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, minimal-ui"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Und wenn Ihre Website nicht reagiert, verwenden Sie bitte nicht die anfängliche Skalierung oder deaktivieren Sie die Skalierung. </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8954')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_8954"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=device-width,user-scalable=yes"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Verwandte Links: <a target="_blank" href="http://www.qianduan.net/non-responsive-design-viewport.html">Ansichtsfenster mit nicht responsivem Design</a> <br><br> Zur Anpassung an iPhone 6 und iPhone 6plus müssen Sie Folgendes schreiben: <br><span class="lantxt"><br>XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4250')">Inhalt in die Zwischenablage kopieren</span></p> <div class="codeText"> <div id="code_4250"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=375"</span><span class="tag">></span><span> </span></span></li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport" </span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=414"</span><span class="tag">></span><span> </span> </li> </ol> </div> </div> <p>Die Ansichtsfensterbreite der meisten 4,7- bis 5-Zoll-Android-Geräte ist auf 360 Pixel eingestellt, auf dem iPhone 6 beträgt sie jedoch 375 Pixel. Die Ansichtsfensterbreite der meisten 5,5-Zoll-Android-Geräte (z. B. Samsung Note) beträgt 400 Pixel, und das ist auch der Fall 414px auf dem iPhone 6 plus. <br><br><strong> iOS-Gerät <br><br></strong> Titel zum Startbildschirm hinzugefügt (neu in iOS 6) </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7738')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_7738"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-title"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"title"</span><span class="tag">></span><span> </span><span class="comments"><!-- Titel zum Startbildschirm hinzugefügt (neu in iOS 6) --></span><span> </span></span></li> </ol> </div> </div> <p><br>Ob der WebApp-Vollbildmodus aktiviert werden soll</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5148')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_5148"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-fähig"</span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"ja"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- Ob der WebApp-Vollbildmodus aktiviert werden soll --></span><span> </span></span></li> </ol> </div> </div> <p>Legen Sie die Hintergrundfarbe der Statusleiste fest</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5979')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_5979"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black-translucent"</span><span> </span><span class="tag">/></span><span> </span></span></li> <li> <span></span><span class="comments"><!-- Legen Sie die Hintergrundfarbe der Statusleiste fest, die nur wirksam wird, wenn „apple-mobile-web-app-capable“ content="yes"` - -> </span><span> </span> </li> </ol> </div> </div> <p>Wird nur wirksam, wenn „apple-mobile-web-app-capable“ content="yes" <br><br>　Inhaltsparameter: <br><br>Standardwert. <br>schwarz Der Hintergrund der Statusleiste ist schwarz. <br>schwarz-transluzent Der Hintergrund der Statusleiste ist schwarz und transluzent. Bei der Einstellung „Standard“ oder „Schwarz“ beginnt der Webinhalt unten in der Statusleiste. Bei der Einstellung Schwarz-Transluzent füllt der Webseiteninhalt den gesamten Bildschirm aus und der obere Teil wird durch die Statusleiste verdeckt. <br><br><strong>Ziffernerkennung als Telefonnummer deaktivieren</strong></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3828')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_3828"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-erkennung"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telephone=no"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!--Ziffernerkennung als Telefonnummer deaktivieren --></span><span> </span></span></li> </ol> </div> </div> <p>iOS-Symbol</p> <p>　rel-Parameter: apple-touch-icon Das Bild wird automatisch in abgerundete Ecken und Hervorhebungen verarbeitet. apple-touch-icon-precomposed verhindert, dass das System automatisch Effekte hinzufügt, und zeigt das ursprüngliche Design direkt an. iPhone und iTouch, Standard 57x57 Pixel, erforderlich </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode60'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode60"> <br><link rel=" apple-touch -icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone und iTouch, Standard 57x57 Pixel, müssen--><br> </div> iPad, 72x72 Pixel, optional, aber empfohlen <p> </p> <p><br></p> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));">Code kopieren<u></u></span>Der Code lautet wie folgt:</div></div> <div class="msgborder" id="phpcode61"><link rel=" apple-touch -icon-precomposed" size="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad, 72x72 Pixel, optional, aber empfohlen--><br><br> </div> Retina iPhone und Retina iTouch, 114 x 114 Pixel, optional, aber empfohlen <p> </p> <p><br></p> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode62'));">Code kopieren<u></u></span>Der Code lautet wie folgt:</div></div> <div class="msgborder" id="phpcode62"><link rel=" apple-touch -icon-precomposed" size="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone und Retina iTouch, 114x114 Pixel, optional, aber empfohlen - -><br><br> </div> Retina iPad, 144 x 144 Pixel, optional, aber empfohlen <p> </p> <p><br></p> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode63'));">Code kopieren<u></u></span>Der Code lautet wie folgt:</div></div> <div class="msgborder" id="phpcode63"><link rel=" apple-touch -icon-precomposed" size="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad, 144x144 Pixel, optional, aber empfohlen--> <br><br> </div> 　Die iOS-Symbolgröße beträgt 180 x 180 auf dem iPhone 6 Plus und 120 x 120 auf dem iPhone 6. Zur Anpassung an das iPhone 6 Plus müssen Sie diesen Absatz <p> hinzufügen </p> <p><br></p> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode64'));">Code kopieren<u></u></span>Der Code lautet wie folgt:</div></div> <div class="msgborder" id="phpcode64"><link rel=" apple-touch -icon-precomposed" size="180x180" href="retinahd_icon.png"><br><br> </div> <p>iOS-Begrüßungsbildschirm<strong><br><br>Offizielle Dokumentation: </strong>https://developer.apple.com/library/ios/qa/qa1686/_index.html<a target="_blank" href="https://developer.apple.com/library/ios/qa/qa1686/_index.html"> </a>Referenzartikel: <br>http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/<a target="_blank" href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/"> </a><br>Der iPad-Startbildschirm enthält nicht den Statusleistenbereich. <br> </p> iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung) <p> </p> <p><br></p> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode65'));">Code kopieren<u></u></span>Der Code lautet wie folgt:</div></div> <div class="msgborder" id="phpcode65"><link rel=" apple-touch -startup-image" size="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung) --><br> <br> <p>iPad-Porträt 1536x2008 (Retina) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode66'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode66"> <br><link rel=" apple-touch -startup-image" size="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- Vertikaler iPad-Bildschirm 1536x2008 (Retina) --><br> </div> <p>iPad Querformat 1024x748 (Standardauflösung) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode67'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode67"> <br><link rel=" apple-touch -startup-image" size="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad Querformat 1024x748 (Standardauflösung) --><br> </div> <p>iPad Querformat 2048x1496 (Retina) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode68"> <br><link rel=" apple-touch -startup-image" size="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad-Querformatbildschirm 2048x1496 (Retina) --><br> </div> <p> Der Startbildschirm von iPhone und iPod touch enthält den Statusleistenbereich. </p> <p>　iPhone/iPod Touch-Hochformatbildschirm 320x480 (Standardauflösung)<br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode69"> <br><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch-Hochformatbildschirm 320x480 ( Standardauflösungsrate) --><br> </div> <p>　iPhone/iPod Touch-Porträtbildschirm 640 x 960 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode70"> <br><link rel=" apple-touch -startup-image" size="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch Hochformatbildschirm 640x960 (Retina) --><br> </div> <p>　iPhone 5/iPod Touch 5 vertikaler Bildschirm 640 x 1136 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode71"> <br><link rel=" apple-touch -startup-image" size="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 vertikaler Bildschirm 640x1136 (Retina) --><br> </div> <p> Smart-App-Banner hinzufügen Smart-App-Banner (iOS 6 Safari) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode72'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode72"> <br><meta name=" apple-itunes -app" content="app-id=myAppStoreID, academic-data=myAffiliateData, app-argument=myURL"> <!-- Smart-App-Banner hinzufügen Smart-App-Banner (iOS 6 Safari) --> <br> </div> <p> Die entsprechende Bildgröße für das iPhone 6 beträgt 750×1294 und die entsprechende Bildgröße für das iPhone 6 Plus beträgt 1242×2148. </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode73'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode73"> <br><link rel=" apple-touch -startup-image" href="launch6.png" media="(device-width: 375px)"><br><link rel="apple-touch-startup-image" href="launch6plus. png" media ="(device-width: 414px)"><br> </div> <p><strong>Windows 8<br></strong>　Windows 8-Kachelfarbe</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode74'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode74"> <br><meta name=" msapplication-TileColor " content="#000"/> <!-- Windows 8 Tile Color--><br> </div> <p>　Windows 8-Kachelsymbol</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode75'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode75"> <br><meta name=" msapplication-TileImage " content="icon.png"/> <!-- Windows 8-Kachelsymbol--><br> </div> <p> RSS-Abonnement </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode76'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode76"> <br><link rel="alternate" type="application/rss xml" title="RSS" href="/rss.xml" />!-- RSS-Abonnement hinzufügen--> <br> </div> <p>　Favicon-Symbol</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode77"> <br><link rel=" Verknüpfungssymbol" type="image/ico" href="/favicon.ico" /> <!-- Favicon-Symbol hinzufügen --><br> </div> <p>Eine detailliertere Einführung in Favicon finden Sie unter <a target="_blank" href="https://github.com/audreyr/favicon-cheat-sheet">https://github.com/audreyr/favicon-cheat-sheet<br></a><br><strong>Mobile Meta <br><br></strong><span class="lantxt">XML/HTML-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8641')">Inhalt in die Zwischenablage kopieren</span></p> <div class="codeText"> <div id="code_8641"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span></span></li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple- mobile-web-app-fähig“</span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"ja"</span><span> </span><span class="tag">/ ></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple- mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span> <span class="tag">/></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>="format-erkennung"</span><span class="attribute-value">Inhalt</span><span>="</span><span class="attribute">Telefon</span><span>=</span><span class="attribute-value">nein</span><span>, </span><span class="attribute">E-Mail</span><span>=</span><span class="attribute-value">nein</span><span>" </span><span class="tag">/></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport" </span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple- mobile-web-app-fähig“</span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"ja"</span><span> </span><span class="tag">/ ></span><span class="comments"><!-- 删除苹果默认的工具栏和菜单栏 --></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple- mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span> <span class="tag">/></span><span class="comments"><!-- 设置苹果工具栏颜色 --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format- Erkennung"</span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"Telefon=Nein, E-Mail=Nein"</span><span> </span><span class="tag">/ ></span><span class="comments"><!-- 忽略页面中的数字识别为电话,忽略email识别 --></span><span>  </span> </li> <li class="alt"> <span></span><span class="comments"><!-- 启用360浏览器的极速模式(webkit) --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"Renderer" </span><span> </span><span class="attribute">Inhalt</span><span>=</span><span class="attribute-value">"webkit"</span><span class="tag">></span><span>  </span> </li> <li class="alt"> <span></span><span class="comments"><!-- 避免IE使用兼容模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">" " > </span><span> </span><span class="attribute"></span><span><!-- Optimiert für Handheld-Geräte, hauptsächlich für einige alte Browser, die das Ansichtsfenster nicht erkennen, wie z. B. Blackberry --></span><span class="attribute-value"> </span> <span class="tag"> </span><span></span> </li><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"HandheldFriendly" </span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"wahr"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!--Microsofts Old-School-Browser --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"MobileOptimized" </span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"320"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- uc erzwungener vertikaler Bildschirm --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"screen- Ausrichtung"</span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"Porträt"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ erzwungener vertikaler Bildschirm --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"x5- Ausrichtung"</span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"Porträt"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- UC erzwungener Vollbildmodus --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"full- Bildschirm"</span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"ja"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ erzwungener Vollbildmodus --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"x5- Vollbild"</span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"true"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- UC-Anwendungsmodus --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"browsermode" </span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"Anwendung"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ-Anwendungsmodus --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"x5- Seitenmodus"</span><span class="tag"> </span><span class="tag-name">Inhalt</span><span>=</span><span class="attribute">"app"</span><span>><span class="attribute-value"> </span> <span><li class="alt"> <span></span><span class="comments"><!-- Windows Phone-Klick ohne Hervorhebung --></span><span> </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"msapplication- tap-highlight"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"no"</span><span class="tag">></span><span> </span> </li> <li class="alt"> <span></span><span class="comments"><!-- An mobiles Ende anpassen --></span><span> </span> </li> </span> </ol> </div> </div> <p><br>Dies ist eine Zusammenfassung der Beiträge von <a href="http://weibo.com/toooobug" target="_blank">toobug</a>. </p> <p>Weitere Meta-Tag-Referenzen</p> <ul> <li><a href="http://code.lancepollard.com/complete-list-of-html-meta-tags/" target="_blank">VOLLSTÄNDIGE LISTE DER HTML-META-TAGS</a></li> <li><a href="http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013" target="_blank">18 Meta-Tags, die jede Webseite im Jahr 2013 haben sollte</a></li> </ul> <p> Referenzartikel: </p> <ul> <li><a href="https://github.com/yisibl/blog/issues/1" target="_blank">Häufig verwendete HTML-Header-Tags</a></li> <li><a href="https://gist.github.com/paddingme/6182708733917ae36331" target="_blank">html5_header</a></li> <li><a href="http://amazeui.org/css/" target="_blank">Amazeui CSS</a></li> <li><a href="http://www.douban.com/note/170560091/" target="_blank">DOCTYPE</a></li> <li><a href="http://www.uisdc.com/ios8-ten-new-feature" target="_blank">10 neue Änderungen in IOS 8, die WEB-Ingenieure und Designer lernen müssen</a></li> </ul> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Detaillierte Zusammenfassung der HTML-Tag-Verschachtelungsregeln, die für unerfahrene Freunde geeignet sind_HTML/Xhtml_Webseitenproduktion" href="https://m.php.cn/de/faq/10967.html">Detaillierte Zusammenfassung der HTML-Tag-Verschachtelungsregeln, die für unerfahrene Freunde geeignet sind_HTML/Xhtml_Webseitenproduktion</a></span><span>Nächster Artikel：<a class="dBlack" title="Detaillierte Zusammenfassung der HTML-Tag-Verschachtelungsregeln, die für unerfahrene Freunde geeignet sind_HTML/Xhtml_Webseitenproduktion" href="https://m.php.cn/de/faq/10971.html">Detaillierte Zusammenfassung der HTML-Tag-Verschachtelungsregeln, die für unerfahrene Freunde geeignet sind_HTML/Xhtml_Webseitenproduktion</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>