Ce qui suit présente la structure d'en-tête couramment utilisée, ainsi que la signification et les scénarios d'utilisation de chaque balise et élément (cet article est basé sur l'article d'un maître et est un résumé étendu).
La structure d'en-tête de padding.me
DOCTYPE
DOCTYPE (Document Type), cette déclaration se situe au début du document, avant la balise html. Cette balise indique au navigateur quelle spécification HTML ou XHTML le document utilise.
La déclaration DTD (Document Type Definition) commence par , elle n'est pas sensible à la casse et il n'y a pas de contenu devant. S'il y a un autre contenu (sauf des espaces), le navigateur activera le mode bizarreries. dans IE. Rendre la page Web. DTD publique, le format du nom est "enregistrement // organisation // balise de type // langue", "enregistrement" indique si l'organisation est enregistrée par l'Organisation internationale de normalisation (ISO), signifie oui, - signifie non. « Organisation » est le nom de l'organisation, tel que : W3C ; « Type » est généralement une DTD et « Étiquette » est une description de texte public désigné, 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 dernière « langue » est l'identifiant de langue ISO 639 de la langue DTD, par exemple : EN signifie anglais, ZH signifie 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.
•
HTML 4.01 strict
http://www.w3.org/TR/html4 /strict.dtd">
•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">
•
Ensemble de cadres HTML 4.01
http://www.w3.org/TR/html4/frameset.dtd">
•
Et le 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.
Le doctype en HTML a deux objectifs principaux.
•Vérifier la validité des documents.
Il indique à l'agent utilisateur et au validateur la DTD selon laquelle ce document est rédigé. 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.
•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 mise en page HTML. Les navigateurs disposent de trois méthodes pour analyser les documents HTML.
◦ Mode non bizarre (standard)
◦ Mode bizarre
◦ Mode partiellement bizarre (presque standard)
À propos du mode document du navigateur IE, mode navigateur, mode strict, mode bizarre, balise DOCTYPE, détaillé mode lecture disponible ? standard! , et le modèle de boîte.
jeu de caractères
Déclarez l'encodage des caractères utilisé dans le document,
Avant html5, la page web s'écrivait comme ceci :
Ces deux sont équivalents, vous pouvez lire plus précisément : http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type, il est donc recommandé d’en utiliser des plus courts et plus faciles à retenir.
attribut lang
Chinois simplifié
Chinois traditionnel
Il est rarement nécessaire d'ajouter des codes de région, généralement pour souligner les différences d'utilisation du chinois dans différentes régions, par exemple :
ananasetAnanas est en fait le même fruit. C'est juste que les noms en Chine continentale et à Taiwan sont différents, et les noms à Singapour et en Malaisie sont également différents. Il s'appelle Pine Pear.
Pour plus de détails, veuillez consulter http://zhi.hu/XyIa
Donner la priorité à l'utilisation de la dernière version d'IE et de Chrome
360° avec Google Chrome Frame
360 Browser passera immédiatement au speed core correspondant après avoir lu cette balise.
Rejoignez-nous également juste pour être prudent
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 sur les balises méta du 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, enlever vos vêtements et mettre des publicités en plâtre de peau de chien sur votre corps. Pour ce faire, vous pouvez ajouter
Liens connexes : Déclaration de transcodage SiteApp
Partie optimisation SEO
•
Titre de la page
•
Mots clés de la page
•
Description de la page description du contenu
•
Définir l'auteur web author
•
Définir le méthode d'indexation des moteurs 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.
Liens associés : WEB1038 - La balise contient une valeur invalide
fenêtre
viewport peut améliorer l'affichage de la mise en page sur les navigateurs mobiles.
Écrivez généralement
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 (http://bigc.at/ios-webapp-viewport- méta.orz )
paramètres de contenu :
•largeur largeur de la fenêtre (valeur numérique/largeur de l'appareil)
•hauteur hauteur de la fenêtre (valeur numérique/hauteur de l'appareil)
•mise à l'échelle initiale de l'échelle initiale
•maximum - scale Mise à l'échelle maximale
•minimum-scale Mise à l'échelle minimale
•user-scalable S'il faut autoriser les utilisateurs à zoomer (oui/non)
•
minimal-ui Un nouvel attribut dans iOS 7.1 beta 2, vous pouvez réduire les barres d'état supérieure et inférieure lors du chargement de la page. Il s'agit d'une valeur booléenne et peut être écrite directement comme ceci :
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.
Liens connexes : Fenêtre avec un design non réactif
appareil iOS
Titre ajouté à l'écran d'accueil (nouveau dans iOS 6)
S'il faut activer le mode plein écran WebApp
Définir la couleur d'arrière-plan de la barre d'état
Ne prend effet que lorsque "apple-mobile-web-app-capable" content="yes"
paramètres de contenu :
•valeur par défaut 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 défaut ou noir, le contenu de la page Web commence par le bas de la barre d'état.
S'il est défini sur noir-translucide, le contenu Web remplira tout l'écran et le haut sera bloqué par la barre d'état.
Désactivez la reconnaissance automatique des chiffres en tant que numéro de téléphone
Icône iOS
paramètre rel :
les images de l'icône Apple-Touch sont automatiquement traitées 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, 57 x 57 pixels par défaut, doivent avoir
;!-- iPhone et iTouch, 57 x 57 pixels par défaut, doivent avoir --->
iPad, 72x72 pixels, facultatif, mais recommandé
Retina iPhone et Retina iTouch, 114x114 pixels, facultatif mais recommandé
iPad Retina, 144x144 pixels, facultatif mais recommandé
Écran de démarrage iOS
Document officiel : https://developer.apple.com/library/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 n'inclut pas la zone de la barre d'état.
iPad portrait 768 x 1004 (résolution standard)
iPad portrait 1536x2008 (Rétine)
iPad paysage 1024x748 (résolution standard)
iPad paysage 2048x1496 (Retina)
L'écran de démarrage de l'iPhone et de l'iPod touch comprend la zone de la barre d'état.
Écran portrait iPhone/iPod Touch 320x480 (résolution standard)
- Écran portrait iPhone/iPod Touch 320x480 (résolution standard) -->
Écran portrait iPhone/iPod Touch 640x960 (Retina)
Écran vertical iPhone 5/iPod Touch 5 640x1136 (Retina)
Ajouter une bannière d'application intelligente (iOS 6 Safari)
Windows 8
Couleurs des vignettes Windows 8
Icône de vignette Windows 8
Abonnement RSS
Pour une introduction plus détaillée au favicon, veuillez vous référer à https://github.com/audreyr/favicon-cheat-sheet
Méta mobile
Plus de références de balises méta
•LISTE COMPLÈTE DES BALISTES META HTML
•18 balises méta que chaque page Web devrait avoir en 2013
Article de référence :
•https://github .com /yisibl/blog/issues/1
•https://gist.github.com/paddingme/6182708733917ae36331
•http://amazeui.org/css/
•http://www .douban .com/note/170560091/
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
