Explication détaillée des balises méta et de leur utilisation en HTML

Fini les bêtises, commençons par le sujet d’aujourd’hui.

html/11675.html">balise méta en HTML

L'élément <meta> fournit des méta-informations sur la page, telles que la description et les mots-clés pour les moteurs de recherche et la fréquence de mise à jour.

La balise <meta> est située en tête du document et ne contient aucun contenu.

Les attributs de la balise <meta> définissent les couples nom/valeur associés au document.

1. charset (jeu de caractères)

Description : Spécifie le codage des caractères des documents HTML.

Utilisation : <meta charset=UTF-8>

2. fenêtre (fenêtre)

Description : C'est la zone visible de la page web de l'utilisateur. Tout le monde sait que l'écran des appareils mobiles est généralement beaucoup plus petit que celui des PC. Le navigateur Webkit mappera une fenêtre virtuelle plus grande sur l'écran de l'appareil mobile. La fenêtre virtuelle par défaut a une largeur de 980 pixels (la largeur standard actuelle de la plupart des sites Web). ) , puis mis à l'échelle selon un certain rapport (3:1 ou 2:1).

C'est-à-dire que lorsque nous chargeons une page Web normale, webkit chargera d'abord la page Web avec la norme du navigateur de 980 pixels, puis la réduira à une largeur de 490 pixels. Notez que cette réduction est une réduction globale, c'est-à-dire que tous les éléments de la page seront réduits.

usage:

 <meta id=viewport name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1;

(1)largeur

width contrôle la taille de la fenêtre d'affichage, généralement définie sur la largeur de l'appareil à des fins adaptatives

(2) échelle initiale

échelle initiale : le taux de mise à l'échelle initial, c'est-à-dire le taux de mise à l'échelle lorsque la page est chargée pour la première fois.

(3) échelle maximale

maximum-scale Mise à l'échelle maximale. C'est-à-dire le degré maximum de mise à l'échelle autorisé. Il s'agit également d'une valeur à virgule flottante indiquant le multiplicateur maximum de la taille de la page par rapport à la taille de l'écran.

(4) échelle minimale

minimum-scale : échelle minimale à laquelle l'utilisateur est autorisé à zoomer. Semblable à une utilisation à grande échelle.

(5) évolutif par l'utilisateur

évolutive par l'utilisateur Mise à l'échelle réglable par l'utilisateur. Autrement dit, si l'utilisateur peut modifier le niveau de zoom de la page. Si la valeur est oui, l'utilisateur est autorisé à le modifier, sinon c'est non.

3. mots-clés

Description : Une liste de mots-clés fournis pour les moteurs de recherche. Utilisez des virgules pour séparer chaque mot-clé. Spécifiez les mots-clés que les moteurs de recherche utilisent pour améliorer la qualité de la recherche.

Utilisation : <Meta name=Keywords Content=Keywords 1, Keywords 2, Keywords 3, Keywords 4,…>

4. description (description, introduction)

Description : la description est utilisée pour indiquer aux moteurs de recherche le contenu principal de votre site Web.

Utilisation ：<Meta name=Description Content=你网页的简述>

5. détection de format (détection de format)

Description : la détection de format est utilisée pour détecter certains formats en HTML.

Utilisation : L'attribut format-detection de meta a principalement les paramètres suivants :

 méta nom = format-detection content = téléphone = non méta nom = format-detection content = email = non méta nom = format-detection content = adresse = non

Vous pouvez également l'écrire successivement : meta name=format-detection content=telephone=no,email=no,adress=no

(1) téléphone

Vous avez clairement écrit une chaîne de chiffres sans ajouter de style de lien, mais l'iPhone ajoutera automatiquement un style de lien à votre texte, et cliquer sur le numéro composera automatiquement le numéro ! Comment supprimer ce lien d'accès à distance ? À ce stade, notre méta devrait à nouveau montrer son pouvoir magique. Le code est le suivant :

phone=no désactive la conversion des numéros en liens d'accès commuté !

phone=yes permet la conversion des numéros en liens commutés. Pour activer la fonction de conversion, il n'est pas nécessaire d'écrire cette méta. Elle est activée par défaut !

(2)e-mail

Dites à l'appareil de ne pas reconnaître l'adresse e-mail et de ne pas l'envoyer automatiquement après avoir cliqué dessus.

email=no est interdit comme adresse email !

email=yes active le texte et utilise par défaut l'adresse e-mail. Il n'est pas nécessaire d'écrire cette méta. Elle est activée par défaut !

(3)adresse

adress=no interdit de sauter vers la carte !

adress=yes active la fonction de cliquer sur l'adresse pour accéder directement à la carte. Elle est activée par défaut !

6. Apple-Touch-plein écran

Description : Une fois ajouté à l’écran d’accueil, il sera affiché en plein écran.

Utilisation : <meta name=apple-touch-fullscreen content=yes>

7. compatible avec les applications Web mobiles Apple

Description : La fonction consiste à supprimer la barre d'outils et la barre de menus Apple par défaut. content a deux valeurs, oui et non. Lorsque nous devons afficher la barre d'outils et la barre de menus, il n'est pas nécessaire d'ajouter cette ligne de méta. La valeur par défaut est de l'afficher.

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

8. Configuration de l'application

Description : Conserver les enregistrements de l'historique et les effets d'animation

Utilisation : <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>

9. msapplication-tap-highlight

Description : cliquez sur Aucun surlignage (surbrillance)

Utilisation : <meta name=msapplication-tap-highlight content=no>

Ce qui précède est l'explication détaillée des balises méta et de leur utilisation en HTML introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !