Maison >interface Web >tutoriel HTML >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
>
QuantityHTML 4.01 Transitional
Code XML/HTMLCopier le contenu dans le presse-papiers
>
QuantityHTML 4.01 Frameset
Code XML/HTMLCopier le contenu dans le presse-papiers
>
Code XML/HTMLCopier le contenu dans le presse-papiers
● 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
<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
<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
<html lang=" zh -cmn-Hans">
Chinois traditionnel
XML / Code HTMLCopier le contenu dans le presse-papiers
<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
<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
< ; méta nom="renderer" content="webkit"> 🎜>
Code XML/HTMLCopier le contenu dans le presse-papiers
<méta http-equiv="X-UA-Compatible" content= "IE =Edge,chrome=1">
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
<méta http-equiv="Cache-Control" contenu="no-siteapp" />
Liens connexes : Déclaration de transcodage SiteApp
Partie optimisation SEO
Titre de la page
Code XML/HTMLCopier le contenu dans le presse-papiers
<titre> ;votre titretitre>
Mots-clés de la page
Code XML/HTMLCopier le contenu dans le presse-papiers
<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
<méta nom= "description" content="votre description">
Définir l'auteur de la page web
Code XML/HTMLCopier le contenu dans le presse-papiers
<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
<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
<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
<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
<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
<méta nom="viewport" contenu="width=375" >
<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
<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
<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
< ; 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
<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
<méta nom="viewport" contenu="width= largeur de l'appareil, initial-scale=1, user-scalable= no" />
<meta nom="apple-mobile-web-app-capable" content="oui" />
<méta nom="apple-mobile-web -app-status-bar-style" content="noir" />
<méta nom="format-detection"contenu="téléphone=non, email= non" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= non" />
<méta nom="apple-mobile-web-app-capable" content="oui" />
<méta nom="apple-mobile-web-app-status-bar-style" content="noir" />
<méta nom="détection-format" contenu="telphone=no, email=no" />
<méta nom="rendu" contenu="webkit ">
<méta http-equiv="Compatible X-UA" content="IE=edge">
<meta nom="HandheldFriendly" content="true">
<meta nom ="MobileOptimisé" contenu="320">
<méta nom ="orientation de l'écran" contenu="portrait">
<méta nom="orientation x5" contenu="portrait">
<méta nom="plein écran" contenu="oui">
<méta nom="x5-fullscreen" content="true">
<méta nom="mode navigateur" contenu="application">
<méta nom="x5-page-mode" contenu="app">
<méta nom="msapplication-tap-highlight" content="no">