Les balises Meta sont une balise auxiliaire dans la zone de tête de la langue HTML. Ils sont situés entre l'étiquette de tête et la balise de titre à la tête du document HTML. Ils fournissent des informations qui ne sont pas visibles pour l'utilisateur.
Meta: c'est-à-dire que les métadonnées sont les informations sur les données des données.
Les métadonnées peuvent être appelées par un navigateur (comment afficher le contenu ou recharger une page), le moteur de recherche (mot-clé) ou un autre service Web.
Dans nos mots simples, c'est une balise inutile elle-même, mais une fois que certains effets sont placés à l'intérieur par d'autres propriétés, cela fonctionne, nous l'appelons donc des métadonnées.
<! - Définissez le codage du caractère du document -> <Meta Charset = UTF-8 /> <! - Forcer le noyau de chrome, qui agit sur des navigateurs domestiques à double cœur tels que les navigateurs 360, les navigateurs QQ, etc. Name = Force-Rendaring Content = Webkit /> <! - Si le plug-in de trame Google Chrome est installé, il est forcé d'être le noyau de chrome, sinon la version la plus haut du noyau IE prise en charge par la machine est forcée d'être utilisée sur les navigateurs IE -> <meta http-equiv = x-ua compatible wide = ie = edge, chrome = 1 /> <! of layout viewport to a positive integer, or the string width-device initial-scale Set the initial scaling value of the page, as a number, it can take the minimum scaling value of the user, as a number, it can take the maximum scaling value of the user, as a number, it can take the maximum scaling value of the user, as a number, it can take the maximum scaling value of the user, as a number, it can take the decimal rétractation à ajustement = non dans iOS9, si l'attribut précédent doit être utilisé, cette hauteur doit être ajoutée pour définir la hauteur de la fenêtre de mise en page. Cet attribut n'est pas important pour nous. Il est rarement utilisé pour utiliser l'utilisateur à l'échelle de l'utilisateur, que l'utilisateur soit autorisé à évoluer, la valeur est non ou oui, non signifie non autorisé, oui signifie permettre -> <meta name = Viewport Content = width = Device-Width, Initial-Scale = 1.0, rétréci-to-fit = no, minimum-échelle = 1.0, maximum-échelle = 1.0, contenu de l'utilisable = non /> <! Caractères /> <! - Page Mots-clés -> <meta name = keywords contenu = /> <! - Web auteur -> <meta name = auteur contenu = name, [email protected] /> <! - Le moteur de recherche rampant tout: le fichier sera récupéré et les liens sur la page peuvent être interrogés; Aucun: le fichier ne sera pas récupéré et les liens sur la page ne peuvent pas être interrogés; Index: le fichier sera récupéré; Suivez: les liens sur la page peuvent être interrogés; NOINDEX: Le fichier ne sera pas récupéré; Nofollow: le lien sur la page ne peut pas être interrogé. -> <meta name = robots contenu = index, suivez /> <! - ignorez le numéro de la page à reconnaître comme un téléphone, Ignitore Recognition par e-mail -> <meta name = Format-Detection Content = telphone = no, e-mail = no /> <! - iOS Begin -> <! - Titre après avoir ajouté à l'écran d'accueil (New In iOS 6) est ajouté à l'écran d'accueil, la barre d'adresse peut être masquée et elle est uniquement pour iOS Safari (après la version iOS7.0, l'effet n'est plus visible sur Safari) -> <meta name = Apple-Mobile-Web-App-capable Content = Yes /> <! Ajouter une application intelligente AD Bar Banner Smart App (iOS 6+ Safari) -> <meta name = Apple-iTunes-App Content = App-id = MyAppstoreId, Affiliate-data = MyAffiliatedata, App-Argument = MyUrl> <! - Set Apple Toolar Color: La valeur par défaut est defaute name = Apple-Mobile-web-app-statu-statut-bar-style contenu = Black /> <! - Ne permettez pas à Baidu de transcoder -> <meta http-equiv = cache-control content = no-siapp /> <! - optimisé pour les appareils HandHeld, principalement pour certains vieux navigateurs qui ne reconnaissent pas les ViewPorts, comme BlackBerry -> <méta-name = Handhelde Content = True> <! - Old Browser de Microsoft -> <Meta Name = MobileOptimized Content = 320> <! - UC Force Screen Vertical Screen -> <Meta Name = Screen-Orientation Contentation = Portrait> <! - QQ Force Vertical Screen -> <Meta Name = X5-Orientation Content = Portrait> <! - UC Force Screen Full Screen = <META NAM -> <meta name = x5-fullScreen content = true> <! - UC Application Mode -> <meta name = BrowSermode content = application> <! - Qq Mode d'application -> <meta name = x5-page-mode contenu = app> <! - Windows Phone cliquez sans refus -> <meta name = msapplication-tap-highlight contenu = no> <! - ios icon icon commencez l'icien dans le site Web du site Web à la i iconi -> <! - iPhone et iTouch, par défaut 57x57 pixels, doivent avoir -> <link rel = Apple-Touch-icon-pré-composé tailles = 57x57 href = table_ico57.png> <! - Rétine iPhone et rétine iTouch, 114x114 pixels, peut être sans, mais il est recommandé de -> <lin href = table_ico72.png> <link rel = apple-touch-icon-pré-calcul tailles = 114x114 href = table_ico114.png> <! - Retina iPad, 144x144 pixels, peut être sans, mais il est recommandé d'avoir -> <lin href = table_ico144.png> <! - Écran de démarrage iOS Début -> <! - Écran vertical iPad 768 X 1004 (résolution standard) -> <lin -> <link rel = Apple-touch-startup-iMage tailles = 1024x748 href = / default-pertrait-1024x748.png /> <! - Ipad Vertical Screen 1536x2008 (rétine) -> <lin HREF = / Splash-Screen-1536x2008.png /> <! - Écran iPad Horizontal 2048x1496 (Retina) -> <Link Rel = Apple-Touch-Startup-Image Tailles = 2048X1496 HREF = / Splash-Screen-2048x1496.png /> <! Résolution) -> <link rel = Apple-Touch-Startup-Image Href = / Splash-Screen-320x480.png /> <! - IPhone / iPod Touch Scretical 640x960 (Retina) -> <lin 5 / iPod Touch 5 Écran vertical 640x1136 (rétine) -> <link rel = Apple-Touch-startup-iMage tailles = 640x1136 href = / splash-screen-640x1136.png /> <! - ios end -> <! - Windows 8 Tile Color -> <Meta name = MSApplication-TileColor -> <meta name = MSApplication-TileImage Content = icon.png /> <! - Ajouter un abonnement RSS -> <link rel = alternate type = application / rss + xml title = rss href = / rss.xml /> <! - SNS Social Tag Begin -> <! - Référence Weibo API -> <Meta Property = Og: Type Contenu = Type / Type / Type = Orl = OG: Url: Meta Property = Og: Type Contenu = Type / Type / Type = Orl = Og: Url: Meta Property = Og: Type Contenu = Type / Type / Type / Metl = Og: Url: Meta Property = Og: Type Contenu = Type / Type / Type) Content = URL Adresse /> <Meta Property = OG: Title Content = Title /> <Meta Property = OG: Image Content = Image Content = Picture /> <Meta Property = OG: Description Content = Description /> <! - SNS Social Tag End ->Problèmes d'accès avec la version inférieure du navigateur IE
Ajoutez du code qui force le noyau webkit. Il n'y a pas de problème de compatibilité IE avec l'utilisation de navigateurs domestiques pour accéder aux sites Web, et le nombre de visiteurs IE sera considérablement réduit. Mais il est toujours inévitable que certains anciens ordinateurs soient accessibles via la version inférieure du navigateur IE. Si nous effectuons CSS Hack spécifiquement pour ce petit nombre d'utilisateurs, cela augmentera sérieusement notre charge de travail.
De plus, depuis janvier 2016, Microsoft a cessé de fournir un support et des mises à jour à IE11 ci-dessous. Il n'a pas été mis à jour depuis si longtemps. La basse version IE a non seulement des problèmes avec le support CSS3 et HTML5, mais a également des problèmes de sécurité.
Donc, si nous ne prenons pas en charge la basse version, c'est-à-dire, que devrait faire ce petit nombre d'utilisateurs?
Nous pouvons utiliser l'instruction IF IE pour ajouter des invites de mise à niveau IE sur le site Web, incitant les utilisateurs à mettre à niveau leur navigateur ou à passer à des navigateurs plus avancés avant l'accès.
Nous pouvons ajouter un morceau de code pour sauter à la page d'invite de mise à niveau IE sous la balise Meta tout à l'heure (sautez lorsque la version IE est inférieure à IE11), de sorte que les utilisateurs de versions inférieures d'IE les incitent à mettre à niveau ou à modifier leur navigateur lors de l'accès.
Forcez le noyau WebKit et invitez l'utilisateur à mettre à niveau le code complet de l'utilisateur d'accès à basse version IE comme indiqué ci-dessous. Ajoutez ce code à la balise du fichier de gabarit de tête <éadfy:
<meta name = renderer contenu = webkit /> <meta name = force-redring contenu = webkit /> <meta http-equiv = x-ua-compatible contenu = ie = edge, chrome = 1 /> <cript> / * @ cc_on window.location.href = http: //support.dmeng.net/upgrade-your-browser.html? REFORRER = + EncodeuriComponent (Window.Location.href); @ * / </ script>
(@cc_on est une instruction de compilation conditionnelle unique aux versions IE10 et plus anciennes de IE, il peut donc être utilisé pour déterminer si d'autres versions IE autres que IE11.)
Étant donné que la basse version IE est souvent incompatible avec les sites Web CSS3 et HTML5 lors de l'accès, le code ci-dessus est ajouté, et lorsque les utilisateurs à IE à faible version accéderont, il passera à la page d'invite de mise à niveau pour éviter le chargement des ressources inutile et réduira le serveur de sites Web.
Code de test<! Doctype html> <html lang = en> <adre> <meta charset = utf-8 /> <meta name = w vuhport = width = device-width, initial-scale = 1.0 /> <itle> document </ title> <meta name = Renderer content = webkit /> <meta name = force-réviewing = webkit /> <méta http-equiv = x-ua-compatible contenu = ie = edge, chrome = 1 /> <cript> / * @ cc_on window.location.href = http: //support.dmeng.net/upgrade-your-browser.html? Referger = + EncodeuriConovent (Window.Location.href); @ * / </ script> </ head> <body> <h1> Bonjour le monde </h1> </ body> </html>
IE 11 sortira normalement
IE 10 verra la page suivante
se référer àUn résumé de la méta-utilisation frontale - MR_LIXP
Forcez le navigateur à utiliser le mode de vitesse du noyau webkit via Meta Code (résoudre que meta name = Renderer Content = webkit ne fonctionne pas) - [ai Huanhuan]
Meta Paramètres pour les pages Web mobiles - Tianya Passeurby
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.