Maison >interface Web >Tutoriel H5 >Comment utiliser les méta-attributs dans les conseils du didacticiel HTML5_html5

Comment utiliser les méta-attributs dans les conseils du didacticiel HTML5_html5

WBOYoriginal: 2016-05-16 15:45:551720parcourir

L'attribut méta occupe une position très importante en HTML. Par exemple : SEO pour les moteurs de recherche, encodage des caractères des documents, paramétrage du cache de rafraîchissement, etc. Bien que certaines pages Web n'utilisent pas de méta, en tant que soldats ordinaires, nous devons néanmoins comprendre certaines propriétés des méta et être capables de les utiliser habilement.

1. Déclarez l'encodage des caractères utilisé dans le document

Code XML/HTMLCopier le contenu dans le presse-papiers

<méta charset='utf-8'>

2. Déclarer le mode de compatibilité du document

Code XML/HTMLCopier le contenu dans le presse-papiers

<méta http-equiv="X-UA -Compatible" contenu="IE=edge" /> Demande à IE d'afficher le contenu dans le mode le plus élevé actuellement disponible
<méta http-equiv=" " /> demande à IE d'utiliser la directive > pour déterminer comment restituer le contenu. Les commandes du mode Standards sont affichées en mode standards IE7, tandis que les commandes du mode Quirks sont affichées en mode IE5. 3. Optimisation du référencement
Copier le contenu dans le presse-papiers

méta nom

"description" content="Pas plus de 150 caractères" />Description des pages <méta nom
"mots-clés" contenu="html5, css3, mot clé"/>Mots clés de la page <méta nom
"auteur" content="Magic Inn" />Définir l'auteur web <méta nom
"robots" contenu="indexer, suivre" />Définissez la méthode d'indexation du moteur de recherche Web. Robotterms est un ensemble de valeurs séparées par des virgules anglaises ",". Il a généralement les valeurs suivantes : none, noindex, nofollow, all, index et follow.
4. Ajouter une fenêtre d'affichage pour les appareils mobiles
Code XML/HTMLCopier le contenu dans le presse-papiers
1. <méta nom ="portée" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user- évolutif=non">
2. Explication des paramètres de contenu :
3. largeur largeur de la fenêtre d'affichage (valeur/largeur de l'appareil)
4. hauteur hauteur de la fenêtre d'affichage (valeur/hauteur de l'appareil)
5. initial-scale Rapport de mise à l'échelle initial
6. échelle maximale Rapport de zoom maximal
7. rapport de zoom minimum à l'échelle minimale
8. évolutif par l'utilisateur S'il faut autoriser la mise à l'échelle de l'utilisateur (oui/non)
9. minimal-ui Il existe un nouvel attribut dans iOS 7.1 bêta 2 qui peut minimiser les barres d'état supérieure et inférieure lors du chargement de la page. Il s'agit d'une valeur booléenne et peut être écrite directement comme ceci :
10. <méta nom="portée" content="width=device-width, initial-scale=1, minimal-ui"> ;
5. Appareil iOS
Code XML/HTMLCopier le contenu dans le presse-papiers
1. <méta nom="apple-mobile-web -app-title" content="title"> ajouté à Titre après l'écran d'accueil (nouveau dans iOS 6)
2. <méta nom="pomme- compatible avec les applications Web mobiles" contenu="oui" / >S'il faut activer le mode plein écran WebApp
3. <méta nom="pomme- mobile-web-app-status-bar-style" content="noir-translucide" />Définissez la couleur d'arrière-plan de la barre d'état
4. Ne prend effet que lorsque "apple-mobile-web-app-capable" contenu="oui"
5. paramètre de contenu :
6. valeur par défaut par défaut.
7. noir L'arrière-plan de la barre d'état est noir.
8. noir-translucide Le fond de la barre d'état est noir et translucide.
9. Défini par défaut ou noir, le contenu de la page Web commence par le bas de la barre d'état.
10. S'il est défini sur noir-translucide, le contenu Web remplira tout l'écran et le haut sera bloqué par la barre d'état.
6. Paramètre relatif à l'icône iOS
Code XML/HTMLCopier le contenu dans le presse-papiers
1. Les images d'icônes Apple Touch sont automatiquement traitées en coins arrondis et en surbrillance.
2. apple-touch-icon-precomposed interdit au système d'ajouter automatiquement des effets et affiche directement le design original.
3. <lien rel="pomme- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone et iTouch, 57x57 pixels par défaut, doivent avoir
4. <lien rel="pomme- touch-icon-precomposed" tailles="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad, 72x72 pixels , vous ne pouvez pas l'avoir, mais il est recommandé de l'avoir
5. <lien rel="pomme- icône tactile-précomposée" tailles="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone et Retina iTouch, 114x114 pixels, optionnel mais recommandé
6. <lien rel="pomme- icône tactile-précomposée" tailles="144x144" href="/apple-touch-icon-144x144-precomposed.png" />iPad Retina, 144x144 Les pixels sont facultatifs, mais il est recommandé à tout le monde d'utiliser
7. <méta nom="pomme- mobile-web-app-title" content="titre">Il est préférable de limiter le titre à six caractères chinois. Le contenu extra long sera masqué et ajouté au titre après l'écran d'accueil (nouveau dans iOS 6)
7. Écran de démarrage iOS
Code XML/HTMLCopier le contenu dans le presse-papiers
1. L'écran de démarrage de l'iPad n'inclut pas la zone de la barre d'état.
2. Écran portrait iPad 768 x 1004 (résolution standard)
3. <lien rel="pomme- touch-startup-image" tailles="768x1004" href="/splash-screen-768x1004.png" />Écran vertical iPad 1536x2008 (Retina)
4. <lien rel="pomme- touch-startup-image" tailles="1536x2008" href="/splash-screen-1536x2008.png" />Écran paysage iPad 1024x748 (résolution standard)
5. <lien rel="pomme- touch-startup-image" tailles="1024x748" href="/Default-Portrait-1024x748.png" />iPad paysage 2048x1496 (Retina)
6. <lien rel="pomme- touch-startup-image" tailles="2048x1496" href="/splash-screen-2048x1496.png" />
7. L'écran de démarrage de l'iPhone et de l'iPod touch comprend la zone de la barre d'état.
8. Écran portrait iPhone/iPod Touch 320x480 (résolution standard)
9. <lien rel="pomme- touch-startup-image" href="/splash-screen-320x480.png" />Écran vertical iPhone/iPod Touch 640x960 (Retina)
10. <lien rel="pomme- touch-startup-image" tailles="640x960" href="/splash-screen-640x960.png" />Écran vertical iPhone 5/iPod Touch 5 640x1136 (Rétine)
11. <lien rel="pomme- touch-startup-image" tailles="640x1136" href="/splash-screen-640x1136.png" />
12. <lien rel="pomme- touch-startup-image" href="Startup.png" / > Lorsque l'utilisateur clique sur l'icône de l'écran d'accueil pour ouvrir la WebApp, le système affichera l'écran de démarrage. S'il n'est pas défini, le système affichera la capture d'écran de la page d'accueil du site Web par défaut. Bien sûr, cette expérience n'est pas très bonne
8, Windows 8
Code XML/HTMLCopier le contenu dans le presse-papiers
1. <méta nom="msapplication-TileColor" content="#000"/> Couleur des vignettes Windows 8
2. <méta nom="msapplication- TileImage" content="icon.png"/>Windows 8 Icône de tuile
9. Peu utilisé
Code XML/HTMLCopier le contenu dans le presse-papiers
1. <lien rel="alternatif" type="application/rss xml" titre="RSS" href="/rss.xml" />Ajouter un abonnement RSS
2. <link rel="icône de raccourci " type="image/ico" href="/favicon.ico" />Ajouter une icône favicon
3. <méta nom="format- détection" contenu="telephone=no" />Interdire que la reconnaissance des chiffres soit automatiquement reconnue comme un numéro de téléphone
4. <méta nom="format- détection" content="email=no" />Ne laissez pas Android reconnaître les e-mails
5. <méta nom="rendu" content="webkit">Activer le mode vitesse du navigateur 360 (webkit)
6. <méta http-equiv=" " >Évitez IE d'utiliser le mode de compatibilité <méta nom
7. "HandheldFriendly" content="true">Optimisé pour les appareils portables, principalement pour certains anciens navigateurs qui ne reconnaissent pas la fenêtre d'affichage, comme BlackBerry <méta nom
8. "MobileOptimisé" content="320">Ancien navigateur de Microsoft <méta nom
9. "x5- orientation" content="portrait">QQ écran vertical forcé
10. <méta nom="full- écran" contenu="oui">UC forcé plein écran
11. <méta nom="x5- fullscreen" content="true">QQ plein écran forcé
12. <méta nom="mode navigateur" content="application">Mode application UC
13. <méta nom="x5- page-mode" content="app">Mode d'application QQ
14. <méta http-equiv=" Cache-Control" content="no-siteapp" /> Le transcodage Baidu est interdit
15. <méta nom="msapplication- appuyez sur surligner" contenu="non">cliquez sur Windows Phone Aucun temps fort
16. <méta nom="mots-clés" contenu="" /> Clé Mots
17. <méta nom="description" contenu="" /> Description
18. <méta nom="titre" contenu="" /> titre
19. <méta nom="auteur" contenu="-06" /> Auteur
20. <méta nom="Copyright" content="" /> Société
21. <méta http-equiv=" " 🎜> Laissez le navigateur IE utiliser le noyau le plus avancé pour afficher les pages, et les pages utilisant le framework Chrome utilisent le noyau webkit <méta nom
22. ="pomme- compatible avec les applications Web mobiles" contenu="oui"> IOS6 plein écran <méta nom
23. ="mobile- compatible avec les applications Web" contenu="oui"> Chrome Version haute plein écran <méta nom
24. ="rendu" content="webkit"> Laissez le navigateur 360 dual-core utiliser Page de rendu du noyau du webkit <méta nom
25. ="pomme- itunes-app" content="app-id=myAppStoreID, filiale-data=myAffiliateData, app-argument=myURL"> Ajouter une bannière d'application intelligente Bannière d'application intelligente (iOS 6 Safari) 10. Balise sociale sns
26. Code XML/HTMLCopier le contenu dans le presse-papiers
1. meta property=property= > content="類型" />
2. meta property=property=property= " content="URL位址"
3. > meta property=property=property=property=
4. property= " content="標題" / //
5. property=property=property= " content="圖片" /
meta
property=
property
=
property== content

="描述" /

11、條件註解判斷IE瀏覽器
XML/HTML Code
複製內容到剪貼簿

🎜> > 以上就是本文的全部內容，希望對大家的學習有所幫助。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyser la fonction de stockage de HTML5 et les méthodes de fonctionnement associées des compétences du didacticiel Web SQL_html5Article suivant：Analyser la fonction de stockage de HTML5 et les méthodes de fonctionnement associées des compétences du didacticiel Web SQL_html5

Articles Liés

Voir plus