Dieser Artikel basiert auf Yisis Artikel und bietet eine erweiterte Zusammenfassung, um die Bedeutung und Verwendungsszenarien jedes Tags und Elements in häufig verwendeten Überschriften vorzustellen.
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(Dokument Typ), diese Deklaration befindet sich an der vordersten Position im Dokument, vor dem HTML-Tag, diesem Tag informiert den Browser Welche HTML- oder XHTML-Spezifikation verwendet das Serverdokument?
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, + bedeutet Ja, - bedeutet Nein. 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 Code Inhalt in die Zwischenablage kopieren
>
●HTML 4.01 Transitional
XML/HTML-CodeInhalt in die Zwischenablage kopieren
>
●HTML 4.01 Frameset
XML/HTML-CodeInhalt in die Zwischenablage kopieren
>
XML/HTML-CodeInhalt in die Zwischenablage kopieren
●Seltsamer Modus
●Teilweise seltsamer (fast Standard-)Modus Informationen zum Dokumentmodus, Browsermodus und strikten Modus des
IE-Browsers , seltsamer Modus, DOCTYPE-Tag, ausführlicher Modus? Standard! Inhalt.
charset
deklariert die im Dokument verwendete Zeichenkodierung,XML/HTML-Code Inhalt in die Zwischenablage kopieren
<meta charset="utf-8">
html5 Die vorherige Webseite würde so schreiben:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta http-equiv="Inhalt - Geben Sie „ content=“text/html; charset=utf-8“>
lang-Attribut
Vereinfachtes Chinesisch
XML/HTML-Code Inhalt in die Zwischenablage kopieren
<html lang=" zh -cmn-Hans">
XML / HTML-CodeInhalt in die Zwischenablage kopieren
<html lang= "zh-cmn-Hant">
Bevorzugen Sie die neueste Version von IE und Chrome
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
XML/HTML-CodeInhalt in die Zwischenablage kopieren
< ; Meta Name="Renderer" Inhalt="Webkit"> 🎜>
Inhalt in die Zwischenablage kopieren
meta http-equiv="X-UA-Compatible" content= "IE =Edge,chrome=1"> Der Effekt, der durch diese Schreibweise erzielt werden kann, besteht darin, dass, wenn Google Chrome Frame installiert ist, dann Verwenden Sie GCF zum Rendern der Seite. Wenn GCF nicht installiert ist, verwenden Sie zum Rendern die höchste Version des IE-Kernels.
Wenn Sie eine Webseite über ein Baidu-Mobiltelefon öffnen, kann Baidu Ihre Webseite transkodieren oder Ihre Kleidung ausziehen und eine Werbung für Hundehautpflaster auf Ihren Körper kleben. Zu diesem Zweck können Sie
XML/HTML-Code
hinzufügen Inhalt in die Zwischenablage kopieren
<meta http-equiv="Cache-Control" Inhalt="no-siteapp" />
Verwandte Links: SiteApp Transcoding Statement
SEO-Optimierungsteil
Seitentitel
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<Titel> Ihr TitelTitel>
SeitenschlüsselwörterSchlüsselwörter
XML/HTML-CodeInhalt in die Zwischenablage kopieren
< ;meta name="keywords" content="your keywords"> ;
Inhaltsbeschreibung der Seitenbeschreibung
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name=" Beschreibung" Inhalt="Ihre Beschreibung">
Definieren Sie den Autor der Webseite
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<Meta Name="Autor" Inhalt="Autor, E-Mail-Adresse">
Definieren Sie die Indexierungsmethode für Websuchmaschinen als eine Reihe von Werten, die durch englische Kommas "," getrennt sind, normalerweise mit den folgenden Werten Zur Verfügung stehen: none, noindex, nofollow, all, index und follow.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="robots" content="index,follow">
Verwandte Links: WEB1038 – Tag enthält ungültigen Wert
Ansichtsfenster
Viewport kann die Layoutdarstellung in mobilen Browsern verbessern. Schreiben Sie normalerweise
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="viewport" content="width=device-width , initial -scale=1.0">
width=device-width führt dazu, dass das iPhone 5 die Seite nach dem Hinzufügen im WebApp-Vollbildmodus öffnet zum Startbildschirm Es erscheinen schwarze Ränder (http://bigc.at/ios-webapp-viewport-meta.orz)
content Parameters:
width viewport width (value/device-width )
Höhe des Ansichtsfensters (numerischer Wert/Gerätehöhe)
anfängliches Skalierungsverhältnis
maximales Skalierungsverhältnis maximales Skalierungsverhältnis
minimales Skalierungsverhältnis minimales Skalierungsverhältnis
vom Benutzer skalierbar, ob dies der Fall sein soll Benutzerskalierung zulassen (ja/nein)
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:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<Meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
Und wenn Ihre Website nicht reagiert, verwenden Sie bitte nicht die Anfangsskalierung oder deaktivieren Sie die Skalierung.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="viewport" content="width=device-width,user- scalable =ja">
Verwandte Links: Nicht-responsives Design-Ansichtsfenster
An iPhone 6 und iPhone 6plus angepasst, dann erforderlich Schreiben Sie:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="viewport" content="width=375" >
<meta name="viewport" Inhalt="width=414">
Meistens 4,7~5 Zoll Die Breite des Ansichtsfensters von Bei Android-Geräten ist die Auflösung auf 360 Pixel eingestellt, auf dem iPhone 6 jedoch auf 375 Pixel. Die Ansichtsbreite der meisten 5,5-Zoll-Android-Geräte (z. B. Samsung Note) beträgt 400 Pixel und auf dem iPhone 6 Plus 414 Pixel.
iOS-Geräte
Titel zum Startbildschirm hinzugefügt (neu für iOS 6)
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<Meta Name="apple-mobile-web-app-title" content="title"> < -- Titel zum Startbildschirm hinzugefügt (neu in iOS 6) -->
Ob der WebApp-Vollbildmodus aktiviert werden soll
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="apple-mobile-web-app-capable" content="yes" />
Hintergrundfarbe der Statusleiste festlegen
XML/HTML-CodeInhalt in die Zwischenablage kopieren
< ; meta name="apple-mobile-web-app-status-bar-style" content="schwarz- durchscheinend" />
Wird nur wirksam, wenn „apple-mobile-web-app-capable“ content="yes"
Inhaltsparameter:
Standardwert.
schwarz Der Hintergrund der Statusleiste ist schwarz.
schwarz-durchscheinend Der Hintergrund der Statusleiste ist schwarz und durchscheinend. 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.
Ziffernerkennung als Telefonnummer deaktivieren
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="format-erkennung" content="telephone=no" /> 🎜>
rel-Parameter: apple-touch-icon
Bildwird automatisch in Effekte wie 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, standardmäßig 57 x 57 Pixel, müssen den folgenden -Code haben:
iPad, 72x72 Pixel, optional, aber empfohlen
Der Code lautet wie folgt:
Retina iPhone und Retina iTouch, 114x114 Pixel, optional, aber empfohlen
Der Code lautet wie folgt:
! -- Retina iPhone und Retina iTouch, 114x114 Pixel, optional, aber empfohlen -->
Retina iPad, 144x144 Pixel, optional, aber empfohlen
Der Code lautet wie folgt :
Retina iPad, 144 x 144 Pixel, optional, aber empfohlen –>
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
-Code wie folgt hinzufügen:
Offizielle Dokumentation:
https://developer.apple.com/ Bibliothek /ios/qa/qa1686/_index.html Referenzartikel: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
Der Startbildschirm des iPad ist Mit Ausnahme des Statusleistenbereichs.
iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung)
Der Code lautet wie folgt:
iPad vertikaler Bildschirm 1536x2008 ( Netzhaut
Der Code lautet wie folgt:
iPad-Querformatbildschirm 1024x748 (Standardauflösung)
Der Code lautet wie folgt:
< ;link rel="apple-touch-startup-image" size="1024x748" href="/Default-Portrait-1024x748.png" />
Der Start Bildschirm von iPhone und iPod touch ist enthalten
iPhone/iPod Touch-Hochformatbildschirm 320x480 (Standardauflösung)
Der Code lautet wie folgt:
iPhone 5/iPod Touch 5 vertikaler Bildschirm 640x1136 (Retina)
Der Code lautet wie folgt:
Smart App Advertising Banner hinzufügen Smart App Banner (iOS 6+ Safari)
Der Code lautet wie folgt:
Die entsprechende Bildgröße für das iPhone 6 ist 750×1294, und für das iPhone 6 Plus beträgt das entsprechende 1242×2148.
Der Code lautet wie folgt:
Windows 8
Windows 8-Kachelfarbe
Der Code lautet wie folgt:
Windows 8-Kachelsymbol
Der Code lautet wie folgt:
RSS-Abonnement
Der Code lautet wie folgt:
< link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"
Eine detailliertere Einführung in Favicon finden Sie unter https://github.com/audreyr/favicon -Spickzettel
Mobile-Version-Meta
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<meta name="viewport" content="width= device-width, initial-scale=1, user-scalable= no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web -app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, E-Mail=nein" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= nein" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar- style" content="black" />
<Meta Name="Formaterkennung" Inhalt="telphone=no, email=no" />
<meta name="renderer" content="webkit ">
<meta http-equiv="X-UA-Compatible" Inhalt="IE=edge">
<meta Name="HandheldFriendly" Inhalt="true">
<Meta Name ="MobileOptimized" Inhalt="320">
<Meta Name ="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta Name="Vollbild" Inhalt="Ja">
<Meta Name="x5-fullscreen" Inhalt="true">
<meta name="browsermode" content="Anwendung">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" Inhalt="nein">