recherche

Maison >interface Web >tutoriel HTML >Introduction détaillée à la production de pages HTML tag_HTML/Xhtml_Web

Introduction détaillée à la production de pages HTML tag_HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:36:352293parcourir

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 est située à l'avant du document, avant la balise html. Cette balise indique au navigateur de quel type il s'agit. HTML utilisé par le document. Ou la spécification XHTML.

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 par l'Organisation internationale de normalisation (ISO), indiquant oui, - indiquant 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

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
●HTML 4.01 Transitionnel

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. > 
●Ensemble de cadres HTML 4.01

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. > 
●Le dernier HTML5 introduit une écriture plus concise, qui est compatible vers l'avant et vers l'arrière, et dont l'utilisation est recommandée.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >

Le 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éterminer 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, du mode navigateur, du mode strict, du mode étrange, de la balise DOCTYPE, vous pouvez en savoir plus Mode lecture ? standard! contenu.

jeu de caractères

Déclarer l'encodage des caractères utilisé par le document,

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta charset="utf-8"> 

Avant html5, la page Web se lisait comme ceci :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta http-equiv="Content-Type " content="text/html; charset=utf-8">

Ces deux sont équivalents, veuillez lire les détails ci-dessous : vs , donc Il est recommandé d’en utiliser des plus courts, plus faciles à retenir.

attribut lang

Chinois simplifié

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <html lang="zh-cmn-Hans "> 

Chinois traditionnel

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <html lang="zh-cmn-Hant "> 

Pourquoi lang="zh-cmn-Hans" au lieu de lang="zh-CN" que nous écrivons habituellement ? Veuillez lire : La déclaration en tête de page doit-elle être lang="zh" ou ? lang="zh-cn".

Donner la priorité à l'utilisation de 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" contenu="IE=edge,chrome=1" />

　360 Utilisation de Google Chrome Frame

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta nom="rendu" contenu="webkit">

　Le navigateur 360 passera immédiatement au speed core correspondant après avoir lu cette balise. Aussi, par mesure de sécurité, rejoignez

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta http-equiv="X-UA -Compatible" contenu="IE=Edge,chrome=1">

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

Liens connexes : Documentation des 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 modifier le transcodage de votre page Web, enlevez vos vêtements, et mettez des publicités en plâtre de peau de chien sur votre corps. A cet effet, vous pouvez ajouter

dans la tête.
Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta http-equiv="Cache-Control " contenu="no-siteapp" />

Liens connexes : Déclaration de transcodage SiteApp


Partie d'optimisation SEO

Titre de la page ) <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3566')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_3566"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">titre</span><span class="tag">></span><span>votre titre</span><span class="tag"></</span><span class="tag-name">titre </span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Mots-clés de page <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5916')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_5916"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"mots-clés"</span> <span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"vos mots clés"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p><br>Description de la page description du contenu <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8699')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_8699"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"description"</span> <span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"votre description"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Définir l'auteur web auteur <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2733')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_2733"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"auteur"</span> <span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"auteur,adresse e-mail"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>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. <br><br><span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_1191')">Copier le contenu dans le presse-papiers</span></p> <div class="codeText"> <div id="code_1191"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"robots"</span> <span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"indexer, suivre"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Liens associés : <a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/ff724037(v=expression.40).aspx">WEB1038 - La balise contient une valeur non valide</a> <br><br><strong>port d'affichage</strong></p> <p>　Viewport peut améliorer l'affichage de la mise en page sur les navigateurs mobiles. Écrivez habituellement </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2172')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_2172"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>width=device-width fera apparaître des bordures noires lorsque l'iPhone 5 est ajouté à l'écran d'accueil et ouvert en mode plein écran WebApp (<a href="http://bigc.at/ios-webapp-viewport-meta.orz">http://bigc.at/ios-webapp-viewport- méta.orz</a> )</p> <p>paramètre de contenu : </p> <p>largeur largeur de la fenêtre (valeur numérique/largeur de l'appareil)<br>hauteur hauteur de la fenêtre (valeur numérique/hauteur de l'appareil)<br>rapport de mise à l'échelle initiale à l'échelle initiale<br>rapport de mise à l'échelle maximal à l'échelle maximale<br>minimum -scale Taux de zoom minimum<br>user-scalable S'il faut autoriser la mise à l'échelle de l'utilisateur (oui/non)<br>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 : </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4407')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_4407"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, minimal-ui"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Et si votre site Web n'est pas réactif, veuillez ne pas utiliser la mise à l'échelle initiale ni désactiver la mise à l'échelle. </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8954')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_8954"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width,user-scalable=yes"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Liens associés : <a target="_blank" href="http://www.qianduan.net/non-responsive-design-viewport.html">Viewport au design non responsive</a> <br><br> Pour s'adapter à l'iPhone 6 et à l'iPhone 6plus, vous devez écrire : <br><span class="lantxt"><br>XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4250')">Copier le contenu dans le presse-papier</span></p> <div class="codeText"> <div id="code_4250"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée"</span> <span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"width=375"</span><span class="tag">></span><span> </span></span></li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée" </span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"width=414"</span><span class="tag">></span><span> </span> </li> </ol> </div> </div> <p>La largeur de la fenêtre d'affichage de la plupart des appareils Android de 4,7 à 5 pouces est définie sur 360 pixels, mais elle est de 375 pixels sur l'iPhone 6. 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, et elle est 414px sur iPhone 6 plus. <br><br><strong> Appareil iOS <br><br></strong> Titre ajouté à l'écran d'accueil (nouveau dans iOS 6) </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7738')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_7738"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-title"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"titre"</span><span class="tag">></span><span> </span><span class="comments"><!-- Titre ajouté à l'écran d'accueil (nouveau dans iOS 6) --></span><span> </span></span></li> </ol> </div> </div> <p><br>S'il faut activer le mode plein écran WebApp</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5148')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_5148"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"apple-mobile-web -compatible avec l'application"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"oui"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- S'il faut activer le mode plein écran WebApp --></span><span> </span></span></li> </ol> </div> </div> <p>Définissez la couleur d'arrière-plan de la barre d'état</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5979')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_5979"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"noir-translucide"</span><span> </span><span class="tag">/></span><span> </span></span></li> <li> <span></span><span class="comments"><!-- Définit la couleur d'arrière-plan de la barre d'état, qui ne prend effet que lorsque `"apple-mobile-web-app-capable" content="yes"` - -> </span><span> </span> </li> </ol> </div> </div> <p>Prend effet uniquement lorsque "apple-mobile-web-app-capable" content="yes" <br><br>　paramètre de contenu : <br><br>valeur par défaut. <br>noir L'arrière-plan de la barre d'état est noir. <br>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. <br><br><strong>Désactiver la reconnaissance des chiffres en tant que numéro de téléphone</strong></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3828')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_3828"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"détection-format"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"telephone=no"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!--Désactiver la reconnaissance des chiffres en tant que numéro de téléphone --></span><span> </span></span></li> </ol> </div> </div> <p>Icône iOS</p> <p>　paramètre rel : apple-touch-icon L'image est automatiquement traitée en coins arrondis et en surbrillance. 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, requis </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode60'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode60"> <br><link rel=" apple-touch -icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone et iTouch, 57x57 pixels par défaut, doivent avoir--><br> </div> <p> iPad, 72x72 pixels, en option mais recommandé </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode61"> <br><link rel=" apple-touch -icon-precomposed" size="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad, 72x72 pixels, facultatif mais recommandé--><br> </div> <p> Retina iPhone et Retina iTouch, 114x114 pixels, en option mais recommandé </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode62'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode62"> <br><link rel=" apple-touch -icon-precomposed" size="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone et Retina iTouch, 114x114 pixels, facultatif mais recommandé - -><br /></div></p> <p> iPad Retina, 144x144 pixels, en option mais recommandé </p> <p><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode63'));"><u>Copier le code</u></span></div>Le code est le suivant :</div><div class="msgborder" id="phpcode63"><br /><link rel=" apple-touch -icon-precomposed" size="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- iPad Retina, 144x144 pixels, facultatif mais recommandé--> <br> </div> <p>　La taille de l'icône iOS est de 180 × 180 sur iPhone 6 plus et de 120 × 120 sur iPhone 6. Pour s'adapter à l'iPhone 6 plus, vous devez ajouter ce paragraphe </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode64'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode64"> <br><link rel=" apple-touch -icon-precomposed" size="180x180" href="retinahd_icon.png"><br> </div> <p><strong>Écran de démarrage iOS<br><br></strong>Documentation officielle : <a target="_blank" href="https://developer.apple.com/library/ios/qa/qa1686/_index.html">https://developer.apple.com/library/ios/qa/qa1686/_index.html</a> <br>Article de référence : <a target="_blank" href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/">http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</a> <br><br>L'écran de démarrage de l'iPad n'inclut pas la zone de la barre d'état. </p> <p> Écran portrait iPad 768 x 1004 (résolution standard) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode65'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode65"> <br><link rel=" apple-touch -startup-image" size="768x1004" href="/splash-screen-768x1004.png" /> <!-- Écran portrait iPad 768 x 1004 (résolution standard) --><br> </div> <p> iPad portrait 1536x2008 (Rétine) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode66'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode66"> <br><link rel=" apple-touch -startup-image" size="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- Écran vertical iPad 1536x2008 (Retina) --><br> </div> <p> iPad paysage 1024x748 (résolution standard) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode67'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode67"> <br><link rel=" apple-touch -startup-image" size="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad paysage 1024x748 (résolution standard) --><br> </div> <p> iPad paysage 2048x1496 (Retina) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode68"> <br><link rel=" apple-touch -startup-image" size="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- Écran paysage iPad 2048x1496 (Retina) --><br> </div> <p> L'écran de démarrage de l'iPhone et de l'iPod touch comprend la zone de la barre d'état. </p> <p>　Écran portrait iPhone/iPod Touch 320x480 (résolution standard)<br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode69"> <br><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- Écran portrait iPhone/iPod Touch 320x480 ( taux de résolution standard) ---><br> </div> <p>　Écran portrait iPhone/iPod Touch 640x960 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode70"> <br><link rel=" apple-touch -startup-image" size="640x960" href="/splash-screen-640x960.png" /> <!-- Écran portrait iPhone/iPod Touch 640x960 (Retina) --><br> </div> <p>　écran vertical iPhone 5/iPod Touch 5 640x1136 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode71"> <br><link rel=" apple-touch -startup-image" size="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 écran vertical 640x1136 (Retina) --><br> </div> <p> Ajouter une bannière d'application intelligente Bannière d'application intelligente (iOS 6 Safari) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode72'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode72"> <br><meta name=" apple-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) --> <br> </div> <p> La taille d'image correspondante pour l'iPhone 6 est de 750 × 1294 et la taille d'image correspondante pour l'iPhone 6 Plus est de 1242 × 2148. </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode73'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode73"> <br><link rel=" apple-touch -startup-image" href="launch6.png" media="(device-width : 375px)"><br><link rel="apple-touch-startup-image" href="launch6plus. png" media ="(largeur de l'appareil : 414px)"><br> </div> <p><strong>Windows 8<br></strong>　Couleur des vignettes Windows 8</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode74'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode74"> <br><meta name=" msapplication-TileColor " content="#000"/> <!-- Couleur des vignettes Windows 8--><br> </div> <p>　Icône de vignette Windows 8</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode75'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode75"> <br><meta name=" msapplication-TileImage " content="icon.png"/> <!-- Icône de vignette Windows 8--><br> </div> <p>Abonnement RSS </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode76'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode76"> <br><link rel="alternate" type="application/rss xml" title="RSS" href="/rss.xml" /> <!-- Ajouter un abonnement RSS--> <br> </div> <p>　icône de favicon</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode77"> <br><link rel=" icône de raccourci" type="image/ico" href="/favicon.ico" /> <!-- Ajouter une icône de favicon --><br> </div> <p>Pour une introduction plus détaillée au favicon, veuillez vous référer à <a target="_blank" href="https://github.com/audreyr/favicon-cheat-sheet">https://github.com/audreyr/favicon-cheat-sheet<br></a><br><strong>Méta mobile <br><br></strong><span class="lantxt">Code XML/HTML</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8641')">Copier le contenu dans le presse-papiers</span></p> <div class="codeText"> <div id="code_8641"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span></span></li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"pomme- compatible avec les applications Web mobiles"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"oui"</span><span> </span><span class="tag">/ ></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"pomme- mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"noir"</span><span> </span> <span class="tag">/></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>="format-detection"</span><span class="attribute-value">contenu</span><span>="</span><span class="attribute">téléphone</span><span>=</span><span class="attribute-value">non</span><span>, </span><span class="attribute">e-mail</span><span>=</span><span class="attribute-value">non</span><span>" </span><span class="tag">/></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"portée" </span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"pomme- compatible avec les applications Web mobiles"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"oui"</span><span> </span><span class="tag">/ ></span><span class="comments"><!-- 删除苹果默认的工具栏和菜单栏 --></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"pomme- mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"noir"</span><span> </span> <span class="tag">/></span><span class="comments"><!-- 设置苹果工具栏颜色 --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"format- détection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telphone=no, email=no"</span><span> </span><span class="tag">/ ></span><span class="comments"><!-- 忽略页面中的数字识别为电话，忽略email识别 --></span><span>  </span> </li> <li class="alt"> <span></span><span class="comments"><!-- 启用360浏览器的极速模式(webkit) --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"rendu" </span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"webkit"</span><span class="tag">></span><span>  </span> </li> <li class="alt"> <span></span><span class="comments"><!-- 避免IE使用兼容模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">" " > </span><span> </span><span class="attribute"></span><span><!-- Optimisé pour les appareils portables, principalement pour certains anciens navigateurs qui ne reconnaissent pas la fenêtre d'affichage, comme Blackberry --></span><span class="attribute-value"> </span> <span class="tag"> </span><span></span> </li><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"HandheldFriendly" </span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"vrai"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!--Le navigateur à l'ancienne de Microsoft --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"MobileOptimisé" </span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"320"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- écran vertical forcé uc --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"écran- orientation"</span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"portrait"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- Écran vertical forcé QQ --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"x5- orientation"</span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"portrait"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- Plein écran forcé UC --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"full- écran"</span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"oui"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ plein écran forcé --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"x5- plein écran"</span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"vrai"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- Mode d'application UC --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"mode navigateur" </span><span class="tag"> </span><span class="tag-name">contenu</span><span>=</span><span class="attribute">"application"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- Mode d'application QQ --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>méta</span><span class="comments"> </span><span>nom</span></li>=<li><span>"x5- page-mode"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"app"</span><span>><span class="attribute-value"> </span> <span><li class="alt"> <span></span><span class="comments"><!-- clic sur Windows Phone sans surbrillance --></span><span> </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">méta</span><span> </span><span class="attribute">nom</span><span>=</span><span class="attribute-value">"msapplication- appuyez sur surbrillance"</span><span> </span><span class="attribute">contenu</span><span>=</span><span class="attribute-value">"non"</span><span class="tag">></span><span> </span> </li> <li class="alt"> <span></span><span class="comments"><!-- S'adapter à l'extrémité mobile --></span><span> </span> </li> </span> </ol> </div> </div> <p><br>Ceci est un résumé des partages de <a href="http://weibo.com/toooobug" target="_blank">toobug</a>. </p> <p>Plus de références de balises méta</p> <ul> <li><a href="http://code.lancepollard.com/complete-list-of-html-meta-tags/" target="_blank">LISTE COMPLÈTE DES BALISES MÉTA HTML</a></li> <li><a href="http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013" target="_blank">18 balises méta que chaque page Web devrait avoir en 2013</a></li> </ul> <p>Article de référence : </p> <ul> <li><a href="https://github.com/yisibl/blog/issues/1" target="_blank">Balises d'en-tête HTML couramment utilisées</a></li> <li><a href="https://gist.github.com/paddingme/6182708733917ae36331" target="_blank">html5_header</a></li> <li><a href="http://amazeui.org/css/" target="_blank">amazeui css</a></li> <li><a href="http://www.douban.com/note/170560091/" target="_blank">DOCTYPE</a></li> <li><a href="http://www.uisdc.com/ios8-ten-new-feature" target="_blank">10 nouveaux changements dans IOS 8 que les ingénieurs et concepteurs WEB doivent apprendre</a></li> </ul></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Résumé détaillé des règles d'imbrication des balises HTML adaptées aux amis novices_Production de pages HTML/Xhtml_Web" href="https://m.php.cn/fr/faq/10967.html">Résumé détaillé des règles d'imbrication des balises HTML adaptées aux amis novices_Production de pages HTML/Xhtml_Web</a></span><span>Article suivant：<a class="dBlack" title="Résumé détaillé des règles d'imbrication des balises HTML adaptées aux amis novices_Production de pages HTML/Xhtml_Web" href="https://m.php.cn/fr/faq/10971.html">Résumé détaillé des règles d'imbrication des balises HTML adaptées aux amis novices_Production de pages HTML/Xhtml_Web</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>