Eine vollständige Sammlung von häufig verwendeten HTML -Metas (empfohlen)

Meta -Tags sind ein Hilfsschild im Kopfbereich der HTML -Sprache. Sie befinden sich zwischen dem Kopf -Tag und dem Titel -Tag am Kopf des HTML -Dokuments. Sie bieten Informationen, die dem Benutzer nicht sichtbar sind.

Meta: Das heißt, Metadaten sind die Dateninformationen der Daten.

Metadaten können von einem Browser aufgerufen werden (wie Sie Inhalte anzeigen oder eine Seite neu laden), Suchmaschinen (Schlüsselwort) oder einen anderen Webdienst.

In unseren einfachen Worten ist es ein nutzloses Tag selbst, aber sobald einige Effekte durch andere Eigenschaften darin eingestellt sind, funktioniert es, also nennen wir es Metadaten.

 <!-Definieren Sie die Charaktercodierung des Dokuments-> <meta charset = utf-8 /> <!-den Chromkern, der auf inländische Dual-Core-Browser wie 360 ​​Browser, QQ-Browser usw. wirkt, usw. Name = Force-Rendering Content = Webkit/> <!-Wenn das Google Chrome-Frame-Plug-In installiert ist, ist es gezwungen, der Chromkern zu sein, ansonsten wird die höchste Version des IE-Kernels, das von der Maschine unterstützt wird, gezwungen, auf dem IE-Browser zu verwenden. Das Layout-Ansichtsfenster zu einer positiven Ganzzahl oder der anfängliche Skalierung des anfänglichen Skalierungswerts der Seite von String Breite kann als Zahl den minimalen Skalierungswert des Benutzers als Zahl erfolgen, kann es den maximalen Skalierungswert des Benutzers, das Maximal-Skalierungswert einnimmt. Shrink-to-Fit = Nein In iOS9, wenn das vorherige Attribut verwendet werden muss, muss diese Höhe hinzugefügt werden, um die Höhe des Layout-Ansichtsfensters festzulegen. Dieses Attribut ist uns nicht wichtig. Es wird selten verwendet, um Benutzer skalierbar zu verwenden, ob der Benutzer skaliert werden darf, der Wert nein oder ja, nein bedeutet nicht zulässig. Zeichen/> <!-Seitenschlüsselwörter-> <meta name = keywords content =/> <!-Webautor-> <meta name = author content = name, [email protected]/> <!-Suchmaschinenkriechend: Die Datei wird abgerufen, und die Links auf der Seite können gefragt werden. Keine: Die Datei wird nicht abgerufen, und die Links auf der Seite können nicht abgefragt werden. Index: Die Datei wird abgerufen. Folgen Sie: Die Links auf der Seite können abgefragt werden; noIndex: Die Datei wird nicht abgerufen; Nofollow: Der Link auf der Seite kann nicht abgefragt werden. --><meta name=robots content=index,follow/><!-- Ignore the number in the page to be recognized as a phone, ignore email recognition--><meta name=format-detection content=telphone=no, email=no/><!-- IOS begin --><!-- Title after adding to the home screen (new in iOS 6) --><meta name=apple-mobile-web-app-title content=title><!-- When the website is Hinzu kommt, dass die Adressleiste versteckt werden kann, und nur für iOS-Safari (nach iOS7.0-Version ist der Effekt auf Safari nicht mehr sichtbar)-> <meta name = Apple-Mobile-Web-app-Appable Content = Ja/> <!-Ob Sie den Standard-TOLBAR-BARBAR-BARBAR-BARBAR-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-NAME-. Add Smart App Ad Bar Smart App Banner (iOS 6+ Safari) --><meta name=apple-itunes-app content=app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL><!-- Set Apple toolbar color: the default value is default (white), which can be set to black (black) and black-translucent (gray translucent) --><meta Name = Apple-Mobile-Web-App-Status-Bar-Stil inhalt = schwarz /> <!-Baidu nicht transkodieren-> <meta http-äquiv = cache-kontrollinhalte = no-siteApp /> <! content=true><!-- Microsoft's old browser--><meta name=MobileOptimized content=320><!-- uc force vertical screen--><meta name=screen-orientation content=portrait><!-- QQ force vertical screen--><meta name=x5-orientation content=portrait><!-- UC force full screen--><meta name=full-screen content=yes><!-- QQ force full screen -> <meta name = x5-fullscreen content = true> <!-UC-Anwendungsmodus-> <meta name = browsmode content = application> <!-qq Anwendungsmodus-> <meta name = x5-page-mode content = App> <!-Windows Phone Click ohne Highlights-> <meta-name = msaplication-tap-tap-h-Highllight-Inhalt. -> <!-iPhone und itouch, Standard 57x57 Pixel, muss-> <link rel = Apple-touch-icon-preecomponierte Größen = 57x57 href = table_ico57.png> <!-retina iPhone und Retina itina itouch, 114x114 Pixel, können ohne 22-Link-Link-Souchs-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch-Souch. href=table_ico72.png><link rel=apple-touch-icon-precomposed sizes=114x114 href=table_ico114.png><!-- Retina iPad, 144x144 pixels, can be without, but it is recommended to have --><link rel=apple-touch-icon-precomposed sizes=144x144 href = table_ico144.png> <!-iOS-Startbildschirm begin-> <!-iPad vertikaler Bildschirm 768 x 1004 (Standardauflösung)-> <link rel = Apple-Touch-Startup-Image Größen = 768x1004 HREF =/Splash-Screen-768x1004.png/> <!-IPAD Horizontal Screen 1024x10048 (Horizontal 224x100488 (Horizontal). -> <link rel = Apple-Touch-Startup-Image-Größen = 1024x748 href =/default-portrait-1024x748.png/> <!-iPad vertikaler Bildschirm 1536x2008 (Retina)-> <Link HREF =/Splash-Screen-1536x2008.png/> <!-iPad Horizontaler Bildschirm 2048x1496 (Retina)-> <Link Rel = Apple-Touch-Startup-Immage-Größen = 2048x1496 HREF =/SPROSH-SCREEN-220-SCRACTION 320.PNG/> <!-iPhone/iPhone-SCRECRE 320). -> <link rel = Apple-Touch-Startup-Image href =/splash-screen-320x480.png/> <!-iPhone/iPod touch vertikaler Bildschirm 640x960 (retina)-> <link rel = Apple-Touch-Startup-IMAGE-Größen = 640x960 HREF =/SLITSCOD-IPHOD-IPHOD-IPHOD-640x960.png/> <-iPl. vertical screen 640x1136 (Retina) --><link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png/><!-- IOS end --><!-- Windows 8 tile color --><meta name=msapplication-TileColor content=#000/><!-- Windows 8 tile icon --><meta name = msapplication-tileMage content = icon.png/> <!-RSS-Abonnement hinzufügen-> <link rel = alternativer Typ = Anwendung/RSS+xml title = RSS href =/rss.xml/> <!-SNS Social Tag Beginn-> <! Adresse/> <Meta-Eigenschaft = OG: Titel content = title/> <meta Eigenschaft = OG: Bildinhalt = Bildinhalt = Bild/> <meta Eigenschaft = OG: Beschreibung Inhalt = Beschreibung/> <!-SNS Social Tag End->

Fügen Sie Code hinzu, der den Webkit -Kernel erzwingt. Es gibt kein IE -Kompatibilitätsproblem bei der Verwendung von Inlandsbrowsern, um auf Websites zuzugreifen, und die Anzahl der IE -Besucher wird stark reduziert. Es ist jedoch immer noch unvermeidlich, dass über die untere Version des IE -Browsers auf einige alte Computer zugegriffen werden. Wenn wir CSS -Hack speziell für diese kleine Anzahl von Benutzern durchführen, wird dies unsere Arbeitsbelastung ernsthaft erhöhen.

Darüber hinaus hat Microsoft seit Januar 2016 Support und Updates auf IE11 im Folgenden eingestellt. Es wurde so lange nicht aktualisiert. Der dh niedrige Version hat nicht nur Probleme mit der Unterstützung von CSS3 und HTML5, sondern auch Sicherheitsprobleme.

Wenn wir also keine niedrige Version unterstützen, was sollte diese kleine Anzahl von Benutzern tun?

Wir können die IF -Anweisung verwenden, um IE -Upgrade -Eingabeaufforderungen zur Website hinzuzufügen, um Benutzer zu verfolgen, ihren Browser zu aktualisieren oder vor dem Zugriff auf fortschrittlichere Browser zu wechseln.

Wir können gerade jetzt einen Code zum IE -Upgrade -Eingabeaufforderung unter dem Meta -Tag hinzufügen (springen Sie, wenn die IE -Version niedriger als IE11 ist), damit Benutzer von niedrigeren Versionen von IE sie zum Upgrade oder Ändern des Browsers beim Zugriff auffordern.

Erzwingen Sie den Webkit-Kernel und fordern Sie den Benutzer auf, den vollständigen Code des Niedrigversions-IE-Zugriffs zu verbessern, wie unten gezeigt. Fügen Sie diesen Code der Head -Vorlagendatei <Head> Tag hinzu: Tag:

 <meta name = renderer content = webkit/> <meta name = force-rendering content = webkit/> <meta http-äquiv = x-ua-kompatibler content = IE = Edge, Chrome = 1/> <script>/*@cc_on window.location.href = http: //support.dmeng.net/upgrade-your-browser.html? referrer =+cododuricomponent (window.location.href); @*/</script>

(@cc_on ist eine bedingte Zusammenstellungserklärung, die nur für IE10 und ältere Versionen von IE einzigartig ist. Sie kann verwendet werden, um festzustellen, ob andere IE -Versionen außer IE11.)

Da der IE mit niedriger Version bei den CSS3- und HTML5-Websites beim Zugriff häufig nicht kompatibel ist, wird der oben genannte Code hinzugefügt. Wenn der Benutzer mit niedrigem Version IE-Benutzer zugreifen, wird er zur Upgrade-Eingabeaufforderung übernommen, um unnötige Ressourcenladen zu vermeiden und den Overhead des Website-Servers zu reduzieren.

 <! DocType html> <html Lang = en> <pead> <meta charset = utf-8/> <meta name = viewPort content = width = Geräte-Width, initial-scale = 1.0/> <title> document </title> <meta name = renderer content = webkit/> <meta name = Kraft-render content = webkit/webkit/webkit/<meta <meta/> <meta/> <meta/> <meta/> < http-äquiv = x-ua-kompatibler Inhalt = IE = Edge, Chrome = 1/> <Script>/*@cc_on window.location.href = http: //support.dmeng.net/upgrade-your-browser.html? referrer =+codericomponent (Windows.Location.Location.Location.Location.Location.Location.Location.Location.Location.Location.Location.Location.Location. @*/</script> </head> <body> <h1> Hallo Welt </h1> </body> </html>

Dh 11 wird normal ausgeben

Dh 10 wird die folgende Seite sehen

Eine Zusammenfassung der Front -End -Meta -Nutzung - MR_LIXP

Erzwingen Sie den Browser, den Webkit-Kernel-Geschwindigkeitsmodus über den Metacode zu verwenden (Lösen Sie, dass Meta name = Renderer content = Webkit nicht funktioniert)- [ai huanhuan]

Meta -Einstellungen für mobile Webseiten - Tianya Passerby

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.