Ce qu'il faut savoir sur les balises Meta en HTML

La balise Meta est une balise auxiliaire de la zone head du langage HTML. Elle se situe entre la balise head et la balise title en tête du document HTML. Il peut être utilisé par les navigateurs (comment le contenu est affiché ou les pages sont rechargées), les moteurs de recherche (mots-clés) ou d'autres services Web.

J'ai maintenant compilé le contenu des balises méta fréquemment utilisées dans le développement de pages frontales dans un document et ajouté des méta-informations de développement Web mobile à titre de référence si nécessaire.

​1. Décrivez le codage des caractères utilisé dans le document

<meta charset=&#39;utf-8&#39;>

ou

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

La balise méta définit le jeu de caractères utilisé par la page HTML comme utf-8, qui est Unicode. Il peut afficher le chinois simplifié, le chinois traditionnel et d'autres langues (comme le japonais, le coréen) sur la même page. Bien entendu, vous pouvez également utiliser gb2312 (chinois simplifié), big5 (chinois traditionnel) et d’autres jeux de caractères.

À l’heure actuelle, nous recommandons généralement d’utiliser la première méthode d’écriture, qui est également la méthode d’écriture utilisée par HTML5.

​2. Déclarer le navigateur et la version utilisés

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Lorsque la valeur de contenu spécifiée est IE=edge,chrome=1, la dernière version d'IE et de Chrome sera utilisée en premier. En supposant que Google Chrome Frame soit installé sur le client, le moteur de rendu Chrome est utilisé dans IE pour afficher la page. Sinon, le mode standard le plus élevé de l'IE client sera utilisé pour afficher la page.

Il existe également les méthodes de paramétrage suivantes :

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

​3. Lié à l'optimisation du référencement

Description de la page : chaque page Web doit avoir une balise de description de 150 caractères maximum qui reflète fidèlement le contenu de la page Web.

<meta name="description" content="不超过150个字符" />

Mots-clés de page, chaque page Web doit avoir un ensemble unique de mots-clés qui décrivent le contenu de la page Web.

Utilisez des mots-clés et des expressions descriptifs et représentatifs que les gens sont susceptibles de rechercher et décrivez avec précision les informations fournies sur la page.

<meta name="keywords" content="html5, css3, 关键字"/>

Définir l'auteur de la page web, facultatif

<meta name="author" content="月光光" />

​4. Redirection et actualisation de la page : le nombre dans le contenu représente le temps (en secondes), c'est-à-dire le temps nécessaire à l'actualisation. Si vous ajoutez une URL, elle sera redirigée vers la page Web spécifiée.

<meta http-equiv="Refresh"  contect="5;url=http://www.php.cn" />

Le code ci-dessus signifie qu'après être resté 5 secondes, il s'actualisera automatiquement et accédera à l'URL http://www.php.cn

5. Expire le délai d'expiration de la page Web

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

Définir l'heure d'expiration de la page Web. Une fois celle-ci expirée, elle doit être rappelée sur le serveur. A noter que le format d'heure GMT doit être utilisé, ou directement mis à 0 (pas de mise en cache).

​6. Pragma interdit la mise en cache locale

<meta http-equiv="Pragma" contect="no-cache" />

Définissez la page Web pour qu'elle ne soit pas enregistrée dans le cache et actualisez la page à chaque fois que vous la visitez. Avec ce paramètre, les visiteurs ne pourront pas naviguer hors ligne.

​7. Zone visible de l'écran de l'appareil mobile de la fenêtre d'affichage

Étant donné que la largeur de l'écran des appareils mobiles est différente de celle du Web traditionnel, nous devons modifier la valeur de la fenêtre d'affichage.

La largeur de la fenêtre d'affichage de la plupart des appareils de 4,7 à 5 pouces est définie sur 360 px ; celle de l'appareil de 5,5 pouces est définie sur 400 px ;

width – la largeur de la fenêtre d'affichage (plage de 200 à 10 000, 980 pixels par défaut)

hauteur – la hauteur de la fenêtre (plage de 223 à 10 000)

échelle initiale – mise à l'échelle initiale (allant de > 0 à 10)

​minimum-scale – L'échelle minimale à laquelle l'utilisateur est autorisé à zoomer

​échelle maximale – Le rapport maximum sur lequel l'utilisateur est autorisé à zoomer

​évolutif par l'utilisateur – si l'utilisateur peut évoluer manuellement (non, oui)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Forcer la largeur du document et de l'appareil à rester 1:1

 ; Le rapport de largeur maximum du document est de 1,0 (valeur d'échelle initiale de l'échelle initiale et valeur d'échelle maximale de l'échelle maximale

) ; Adaptable à l'utilisateur définit si l'utilisateur peut zoomer manuellement (non signifie pas de mise à l'échelle), de sorte que la page soit fixée à la taille de l'appareil

 ; Remarque : lors de tests réels, il a été constaté que certains navigateurs Android ne prennent pas en charge cette règle et peuvent zoomer sur la page. Une fois la zone agrandie, la zone de réponse sera également zoomée, ce qui entraînera une confusion sur la page. : Définit la largeur minimale de la page.

body { 
    min-width: 320px; 
}

Notez que de nombreuses personnes utilisent initial-scale=1 sur des sites Web non réactifs, ce qui entraîne un affichage du site Web à une largeur de 100 %, obligeant l'utilisateur à déplacer manuellement la page ou à zoomer. Si user-scalable=no ou maximum-scale=1 est utilisé avec initial-scale=1, l'utilisateur ne pourra pas zoomer/dézoomer sur la page Web pour voir l'intégralité du contenu.

Il existe également les paramètres suivants pour les méta sur les appareils mobiles.

​8. Mode plein écran WebApp : application de déguisement, application hors ligne.

<meta name="apple-mobile-web-app-capable" content="yes" />

​9. Masquer la barre d'état/définir la couleur de la barre d'état : cela ne prend effet que lorsque le mode plein écran de la WebApp est activé. La valeur du contenu est par défaut noir | noir-translucide.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

​10. Titre ajouté à l'écran d'accueil

<meta name="apple-mobile-web-app-title" content="标题" />

​11. Ignorer les numéros et les reconnaître automatiquement comme des numéros de téléphone

<meta content="telephone=no" name="format-detection" />

​12. Ignorer l'identification des adresses e-mail

<meta content="email=no" name="format-detection" />

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!