Maison > Article > interface Web > Que mettre dans l'en-tête HTML
Que mettre dans l'en-tête HTML
- 青灯夜游original
- 2021-12-14 12:06:173617parcourir
L'en-tête HTML doit inclure : 1. Balise de titre, définissez le titre du document ; 2. Plusieurs balises méta, définissez la méthode d'encodage, la description du site Web et la fenêtre d'affichage ; 3. Balise de lien, définissez la petite icône du titre de la page Web et introduire le fichier de style ; 4 , balise de script, introduire les fichiers de script.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
C'est une question que j'ai rencontrée lors de l'entretien. J'utilise habituellement des plug-ins ! J'ajoute des onglets pour générer la structure html5, mais je ne trouve pas quoi mettre d'autre à part css et js. Ce problème semble très simple, mais il est facilement ignoré par nous, je vais donc écrire un article pour le résumer, . HTML head (header) Department) Que faut-il y mettre ?
Titre nécessaire
le titre est nécessaire, mais s'il n'est pas ajouté, le navigateur l'ajoutera automatiquement pour vous.
<head> <title>web</title> </head>
Encodage (méthode d'encodage)
La spécification de la méthode d'encodage est placée à l'avant de l'en-tête. Si elle n'est pas spécifiée, le navigateur effectuera également une détermination basée sur l'en-tête du serveur, mais elle peut ne pas être exacte. .
<head> <meta charset="UTF-8"> <title>web</title> </head>
Description (description du site Web)
Je n'ai pas remarqué cela auparavant, c'est une description de votre site Web, les moteurs de recherche la verront, elle devrait être très couramment utilisée en SEO
<meta name="description" content="这里是对网站的描述">
Viewport
C'est très courant, la fenêtre d'affichage est généralement adaptée au terminal mobile, et la page est placée dans une fenêtre virtuelle - fenêtre d'affichage. Si la page Web n'utilise pas la fenêtre d'affichage, elle apparaîtra lorsque nous ouvrirons le navigateur mobile. petit, et il peut également être déplacé et zoomé. Il est extrêmement faible, la fenêtre d'affichage permet aux développeurs Web de définir dynamiquement la taille des éléments de contrôle dans le contenu de leur page Web en fonction de leurs tailles, de manière à obtenir le même effet (réduction d'échelle) que dans le Web. les pages peuvent être atteintes sur le navigateur. , utilisé pour mieux prendre en charge les sites Web réactifs.
<meta name="viewport" content="width=device-width, initial-scale=1">
width : contrôlez la taille de la fenêtre d'affichage. Généralement, elle est spécifiée en largeur de l'appareil (l'unité est constituée de pixels CSS mis à l'échelle à 100 %). height: et width En conséquence, spécifiez la hauteur.
initial-scal : rapport de mise à l'échelle initial, le rapport de mise à l'échelle lorsque la page est chargée pour la première fois.
échelle maximale : le rapport maximum sur lequel l'utilisateur est autorisé à zoomer.
échelle minimale : le rapport minimum sur lequel l'utilisateur est autorisé à zoomer.
user-scalable : indique si l'utilisateur peut zoomer manuellement.
- Favicon
Il s'agit de la petite icône sur le côté gauche du titre de la page Web. Spécifiez son chemin. S'il n'est pas spécifié, le navigateur recherchera <link rel="icon" href="/favicon.ico" type="image/x-icon" />
css
dans le répertoire racine. lier le fichier de style via la balise de lien <link rel="stylesheet" href="css/test.css">
javascript (emphase)
Lier les fichiers de script via les balises de script <script src="js/test.js"></script>
Nous discutons ici de quelques points
1 La différence entre placer des fichiers js dans le head et dans le body
Mettez-le d'abord dans la tête. Si la balise script n'ajoute pas l'attribut async, elle bloquera le navigateur. Il est nécessaire de télécharger le fichier js avant de passer à l'étape suivante. est petit, tout va bien. S'il est relativement grand, il y aura un effet de blocage et affectera l'expérience utilisateur. Lorsque le navigateur analyse la page Web, il l'analyse ligne par ligne, ce qui signifie qu'il s'arrêtera lorsqu'il analysera le fichier js dans le head, et notre structure Dom est dans la balise body sous le head, ce qui signifie que nous avons pour attendre le téléchargement du fichier js. Le contenu du corps ne peut pas être vu tant qu'il n'est pas terminé. Si nous choisissons de le placer en bas du corps, le navigateur chargera d'abord le dom et ne le téléchargera qu'après avoir analysé le js. au bas du corps. Cependant, nous pouvons déjà voir le contenu du corps avant de télécharger. Parcourir L'expérience sera meilleure
Certaines personnes peuvent se demander quelle est la différence entre le placer sur la tête et le bas du corps. ? En fait, le mettre dans le body head revient à le mettre dans le head
2 Mettre les fichiers js dans la tête pour éviter les inconvénientsIl y a deux attributs qui peuvent résoudre le problème du téléchargement synchrone des fichiers js : defer et asyncdefer :
Si un script ajoute l'attribut defer, même s'il est placé dans l'en-tête, il sera exécuté après l'analyse de la page HTML, ce qui revient à placer le script en bas de la page .
<script defer src="test.js"></script>
async :
Pour async, il s'agit d'un nouvel attribut en HTML5. Sa fonction est de charger et d'exécuter des scripts de manière asynchrone sans bloquer le chargement de la page à cause du chargement des scripts. Une fois chargé, il sera exécuté immédiatement. Avec async, le processus de chargement et de rendu des éléments de document suivants se produira en parallèle (de manière asynchrone) avec le chargement et l'exécution de script.js. Mais il est très probable qu’il ne soit pas exécuté dans l’ordre initial. S'il existe des dépendances avant et après js, l'utilisation d'async est susceptible de provoquer des erreurs.
<script async src="test.js"></script>3 Quel est le meilleur endroit pour mettre les fichiers js
Maintenant, le navigateur a fait quelques optimisations, même si vous mettez js dans la tête, il n'y aura pas de gros problème, nous pouvons donc mettre les js nécessaires dans le head, placez des js relativement grands au bas du corps, mais le moyen le plus simple et le meilleur est de le placer au bas du corps. W3C place les js à l'intérieur de la tête ;
Tutoriel recommandé : "Tutoriel vidéo HTML"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!