Introduction détaillée à la balise head HTML

Cet article est basé sur l'article de Yisi et fournit un résumé détaillé pour présenter la signification et les scénarios d'utilisation de chaque balise et élément dans les en-têtes couramment utilisés. Il existe de nombreuses balises et éléments dans la partie d'en-tête HTML, qui impliquent le rendu des pages Web par le navigateur, le référencement, etc. Chaque noyau de navigateur et chaque fabricant de navigateur national ont leurs propres éléments de balise, ce qui entraîne de nombreuses différences. À l'ère de l'Internet mobile, la structure principale et les méta-éléments des terminaux mobiles sont encore plus importants. Comprendre la signification de chaque balise et rédiger une balise head qui répond à vos propres besoins est le but de cet article. Cet article est basé sur l'article de Yishi et fournit un résumé détaillé pour présenter la signification et les scénarios d'utilisation de chaque balise et élément dans les en-têtes couramment utilisés.

DOCTYPE

DOCTYPE(Document Type), cette déclaration se situe à l'avant du document, avant la balise html, cette balise informe le navigateur Quelle spécification HTML ou XHTML le document serveur utilise-t-il ?

La déclaration DTD (Document Type Definition) commence par , n'est pas sensible à la casse et n'a aucun contenu devant. S'il y a d'autres contenus (sauf des espaces), le navigateur ouvrira un étrange. Le mode sous IE (mode bizarreries) restitue les pages Web. DTD publique, le format du nom est enregistrement // organisation // balise de type // langue, l'enregistrement indique si l'organisation est enregistrée auprès de l'Organisation internationale de normalisation (ISO), + signifie oui, - signifie non. Organisation est le nom de l'organisation, tel que : W3C. Le type est généralement DTD. Une balise spécifie une description du texte public, c'est-à-dire un nom descriptif unique pour le texte public référencé, qui peut être suivi d'un numéro de version. La langue finale est l'identifiant de langue ISO 639 de la langue DTD, tel que : EN pour l'anglais, ZH pour le chinois. XHTML 1.0 peut déclarer trois types de DTD. Représente respectivement la version stricte, la version de transition et le document HTML basé sur un cadre.

QuantityHTML 4.01 strict

XML/HTMLCode Copier le contenu dans le presse-papier

1. >

QuantityHTML 4.01 Transitional

Code XML/HTMLCopier le contenu dans le presse-papiers

1. >

QuantityHTML 4.01 Frameset

Code XML/HTMLCopier le contenu dans le presse-papiers

1. >

●Le dernier HTML5 introduit une écriture plus concise. Il est compatible vers l'avant et vers l'arrière et son utilisation est recommandée.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. >

doctype a deux objectifs principaux en HTML.

● Vérifier la validité des documents.

Il indique à l'agent utilisateur et au validateur selon quelle DTD ce document est écrit. Cette action est passive. Chaque fois que la page est chargée, le navigateur ne télécharge pas la DTD et ne vérifie pas la validité. Elle n'est activée que lorsque la page est vérifiée manuellement.

Quantity Déterminez le mode de rendu du navigateur

Pour les opérations réelles, indiquez au navigateur quel algorithme d'analyse utiliser lors de la lecture du document. S'il n'est pas écrit, le navigateur analysera le code selon ses propres règles, ce qui peut sérieusement affecter la présentation HTML. Les navigateurs disposent de trois méthodes pour analyser les documents HTML.

● Mode non étrange (standard)

● Mode étrange
● Mode partiellement étrange (presque standard) À propos du mode document du
navigateur IE , mode navigateur, mode strict , mode bizarre, balise DOCTYPE, mode verbeux ? standard! contenu.

charset

déclare le codage de caractères utilisé dans le document,

Code XML/HTML Copier le contenu dans le presse-papiers

1. <méta charset="utf-8">

html5 La page web précédente s'écrirait comme ceci :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <meta http-equiv="Contenu - Tapez" content="text/html; charset=utf-8">

Ces deux éléments sont équivalents. Vous pouvez lire les détails étape par étape : vs , il est donc recommandé d'utiliser le un plus court, qui est plus facile à utiliser la mémoire.

attribut lang

Chinois simplifié

Code XML/HTML Copier le contenu dans le presse-papiers

1. <html lang=" zh -cmn-Hans">

　Chinois traditionnel

XML / Code HTMLCopier le contenu dans le presse-papiers

1. <html lang= "zh-cmn-Hant">

Pourquoi lang="zh-cmn-Hans" au lieu de ce que nous écrivons habituellement As pour lang="zh-CN", veuillez lire plus loin : La déclaration en tête de page doit être lang="zh" ou lang="zh-cn".

Préférez la dernière version d'IE et de Chrome

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

　360 Utiliser Google Chrome Frame

Code XML/HTMLCopier le contenu dans le presse-papiers

1. < ; méta nom="renderer" content="webkit"> 🎜>

Le navigateur 360 passera immédiatement au speed core correspondant après avoir lu cette balise. Ajoutez également

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta http-equiv="X-UA-Compatible" content= "IE =Edge,chrome=1">

L'effet qui peut être obtenu en écrivant de cette façon est que si Google Chrome Frame est installé, alors Utilisez GCF pour afficher la page. Si GCF n'est pas installé, utilisez la version la plus élevée du noyau IE pour le rendu.

Liens connexes : Documentation sur les balises méta de contrôle du noyau du navigateur

Baidu interdit le transcodage

Lorsque vous ouvrez une page Web via un téléphone mobile Baidu, Baidu peut transcoder votre page Web et enlever vos vêtements et mettre une publicité de pansement pour peau de chien sur votre corps. A cet effet, vous pouvez ajouter le

Code XML/HTML. Copier le contenu dans le presse-papiers

1. <méta http-equiv="Cache-Control" contenu="no-siteapp" />

Liens connexes : Déclaration de transcodage SiteApp


Partie optimisation SEO

Titre de la page (l'en-tête est requis)

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <titre> ;votre titretitre>

Mots-clés de la page

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <meta nom="mots-clés" contenu="vos mots-clés" >

Description du contenu de la page

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom= "description" content="votre description">

Définir l'auteur de la page web

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="auteur" contenu="auteur, adresse e-mail" >

Définir la méthode d'indexation du moteur de recherche Web. Robotterms est un ensemble de valeurs séparées par des virgules anglaises ",", généralement avec les valeurs suivantes ​. ​sont disponibles : none, noindex, nofollow, all, index et follow.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="robots" contenu="index, suivre">

Liens associés : WEB1038 - La balise contient une valeur non valide

viewport

　Viewport peut améliorer l'affichage de la mise en page sur les navigateurs mobiles. Écrivez généralement

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="viewport" content="width=device-width , initiale -scale=1.0">

width=device-width permettra à l'iPhone 5 d'ouvrir la page en mode plein écran WebApp après l'avoir ajoutée à l'écran d'accueil Des bords noirs apparaissent (http://bigc.at/ios-webapp-viewport-meta.orz)

Paramètres de contenu :

largeur largeur de la fenêtre d'affichage (valeur/largeur de l'appareil )
hauteur hauteur de la fenêtre d'affichage (valeur numérique/hauteur de l'appareil)
rapport de mise à l'échelle initial à l'échelle initiale
rapport de mise à l'échelle maximal à l'échelle maximale
rapport de mise à l'échelle minimal à l'échelle minimale
évolutif par l'utilisateur s'il le faut autoriser la mise à l'échelle de l'utilisateur (oui/non)
minimal-ui Un nouvel attribut dans iOS 7.1 bêta 2 peut minimiser les barres d'état supérieure et inférieure lorsque la page est chargée. Il s'agit d'une valeur booléenne et peut être écrite directement comme ceci :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="viewport" content="width=device-width, initial-scale=1, minimal-ui">

Et si votre site Web n'est pas réactif, veuillez ne pas utiliser l'échelle initiale ou désactiver la mise à l'échelle.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <meta name="viewport" content="width=device-width, évolutif par l'utilisateur =oui">

Liens connexes : Fenêtre de conception non réactive

Adaptée à l'iPhone 6 et à l'iPhone 6plus, il faut alors écrire :

Code XML/HTMLCopier le contenu dans le presse-papier

1. <méta nom="viewport" contenu="width=375" >

2. <méta nom="viewport" content="width=414">

Principalement 4,7 ~ 5 pouces La largeur de la fenêtre d'affichage de Les appareils Android sont définis sur 360 pixels, mais sur l'iPhone 6, ils sont de 375 pixels. La largeur de la fenêtre d'affichage de la plupart des appareils Android de 5,5 pouces (tels que Samsung Note) est de 400 pixels et de 414 pixels sur l'iPhone 6 plus.

Appareils iOS

Titre ajouté à l'écran d'accueil (nouveau pour iOS 6)

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="apple-mobile-web-app-title" content="title"> < -- Titre ajouté à l'écran d'accueil (nouveau dans iOS 6) -->

S'il faut activer le mode plein écran WebApp

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <meta nom="apple-mobile-web-app-capable" content="oui" />

Définir la couleur d'arrière-plan de la barre d'état

Code XML/HTMLCopier le contenu dans le presse-papiers

1. < ; meta name="apple-mobile-web-app-status-bar-style" content="noir- translucide" />

Prend effet uniquement lorsque "apple-mobile-web-app-capable" content="yes"

　paramètre de contenu :

valeur par défaut.
noir L'arrière-plan de la barre d'état est noir.
noir-translucide L'arrière-plan de la barre d'état est noir et translucide. S'il est défini sur default ou black , le contenu Web démarre en bas de la barre d'état. S'il est défini sur noir-translucide, le contenu de la page Web remplit tout l'écran et le haut sera masqué par la barre d'état.

Désactiver la reconnaissance des chiffres comme numéro de téléphone

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="détection-format" content="telephone=no" />

Icône iOS

　paramètre rel : apple-touch-icon Image est automatiquement traité en effets tels que des coins arrondis et des reflets. apple-touch-icon-precomposed interdit au système d'ajouter automatiquement des effets et affiche directement le design original. iPhone et iTouch, 57x57 pixels par défaut, doivent avoir le

code comme suit :

iPad, 72x72 pixels, facultatif, mais recommandé

Le code est le suivant :

Retina iPhone et Retina iTouch, 114x114 pixels, facultatif, mais recommandé

Le code est la suivante :

! -- Retina iPhone et Retina iTouch, 114x114 pixels, facultatif, mais recommandé -->

Retina iPad, 144x144 pixels, facultatif, mais recommandé

Le code est le suivant :

iPad Retina, 144x144 pixels, facultatif mais recommandé-->

La taille de l'icône IOS est de 180×180 sur iPhone 6 plus et de 120x120 sur iPhone 6. Pour s'adapter à l'iPhone 6 plus, vous devez ajouter ce

code comme suit :

Écran de démarrage iOS

Documentation officielle : https://developer.apple.com/bibliothèque /ios/qa/qa1686/_index.html
Article de référence : http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

L'écran de démarrage de l'iPad est À l'exclusion de la zone de la barre d'état.

Écran portrait iPad 768 x 1004 (résolution standard)

Le code est le suivant :

　Écran vertical iPad 1536x2008 ( Retina

Le code est le suivant :

Écran iPad paysage 1024x748 (résolution standard)

Le code est le suivant :

< ;link rel="apple-touch-startup-image" size="1024x748" href="/Default-Portrait-1024x748.png" />

La startup l'écran de l'iPhone et de l'iPod touch est inclus

Écran portrait iPhone/iPod Touch 320x480 (résolution standard)

Le code est le suivant :

Écran vertical iPhone 5/iPod Touch 5 640x1136 (Retina)

Le code est le suivant :

Ajouter une bannière publicitaire pour application intelligente Bannière d'application intelligente (iOS 6+ Safari)

Le code est le suivant :

　La taille d'image correspondante pour iPhone 6 est 750 × 1294 et pour l'iPhone 6 Plus, le correspondant est 1242 × 2148.

Le code est le suivant :

Windows 8
　Couleur des vignettes Windows 8

Le code est le suivant :

　Icône de la vignette Windows 8

Le code est le suivant :

　abonnement rss

Le code est le suivant :

< link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

Pour une introduction plus détaillée au favicon, veuillez vous référer à https://github.com/audreyr/favicon -aide-mémoire

Méta version mobile
Code XML/HTMLCopier le contenu dans le presse-papiers

1. <méta nom="viewport" contenu="width= largeur de l'appareil, initial-scale=1, user-scalable= no" />

2. <meta nom="apple-mobile-web-app-capable" content="oui" />

3. <méta nom="apple-mobile-web -app-status-bar-style" content="noir" />

4. <méta nom="format-detection"contenu="téléphone=non, email= non" />

5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= non" />

6. <méta nom="apple-mobile-web-app-capable" content="oui" />

7. <méta nom="apple-mobile-web-app-status-bar-style" content="noir" />

8. <méta nom="détection-format" contenu="telphone=no, email=no" />

9. <méta nom="rendu" contenu="webkit ">

11. <méta http-equiv="Compatible X-UA" content="IE=edge">

13. <meta nom="HandheldFriendly" content="true">

15. <meta nom ="MobileOptimisé" contenu="320">

17. <méta nom ="orientation de l'écran" contenu="portrait">

19. <méta nom="orientation x5" contenu="portrait">

21. <méta nom="plein écran" contenu="oui">

23. <méta nom="x5-fullscreen" content="true">

25. <méta nom="mode navigateur" contenu="application">

27. <méta nom="x5-page-mode" contenu="app">

29. <méta nom="msapplication-tap-highlight" content="no">