Le contenu de l'en-tête HTML5 comprend généralement : 1. Titre de la page Web défini par la balise de titre ; 2. Favicon (petite icône du site Web) ; 4. Description du site Web ; 6. Auteur de la page ; (adaptation du terminal mobile) ; 8. Feuille de style CSS ; 9. Script JavaScript.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
Selon nos besoins, nous pouvons définir une grande quantité de métadonnées dans l'en-tête HTML, ou nous pouvons définir peu ou pas de métadonnées du tout. Bien que la balise head fasse partie du document HTML, son contenu n'est pas affiché dans le navigateur.
contenu de l'en-tête HTML5
1. Titre de la page Web - balise La balise <title> ; la balise peut Il est considéré comme un document HTML valide. De plus, une seule balise <title> est autorisée dans un document HTML et la balise <title>
Notez que seul le contenu en texte brut est autorisé à l'intérieur de la balise
, et qu'aucune autre balise HTML n'est autorisée. <p></p>Exemple : <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>PHP中文网</title>
</head></pre><div class="contentsignin">Copier après la connexion</div></div><p><br/></p><p><img src="https://img.php.cn/upload/image/665/168/925/1639731780475326.png" title="1639731780475326.png" alt="Que comprend généralement le contenu de len-tête HTML5 ?"/>2. Favicon</p><p><strong>La petite icône sur le côté gauche du titre de la page Web spécifie son chemin. S'il n'est pas spécifié, le navigateur recherchera </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre><div class="contentsignin">Copier après la connexion</div></div></p><p>3 à la racine. répertoire. Méthode d'encodage </p><p><strong>La spécification de la méthode d'encodage est placée au début de l'en-tête. Si elle n'est pas spécifiée, le navigateur la déterminera également en fonction de l'en-tête du serveur, mais elle peut ne pas être exacte. La balise </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<meta charset="UTF-8">
</head></pre><div class="contentsignin">Copier après la connexion</div></div></p><p><meta> est utilisée pour fournir des métadonnées sur le document HTML, telles que la période de validité de la page, l'auteur de la page, la liste de mots clés, la description de la page, etc. Les données définies par la balise <meta> ne seront pas affichées sur la page, mais seront analysées par le navigateur. L'attribut </p><blockquote><p>charset est utilisé pour spécifier l'encodage des caractères du document HTML. Dans l'exemple ci-dessus, nous définissons l'encodage des caractères du document sur "UTF-8". </p></blockquote><p>4. Description du site Web</p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><div class="contentsignin">Copier après la connexion</div></div><strong> Définir les informations de description de la page est bénéfique pour les moteurs de recherche. </strong></p><p>5, </p>Page<p><strong>Mots-clés<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre><div class="contentsignin">Copier après la connexion</div></div></span>Les mots-clés sont utilisés pour fournir aux moteurs de recherche des informations sur la page. </strong></p><p></p>6, <p><strong>Auteur de la page<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><div class="contentsignin">Copier après la connexion</div></div></span>Les informations sur l'auteur peuvent être automatiquement extraites via certains systèmes de gestion de contenu. </strong></p><p></p>7. <p>Viewport (Adaptation mobile) <strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span>Ceci est très courant et est généralement utilisé pour l'adaptation mobile. La page est placée dans une fenêtre virtuelle - viewport. Si la page Web n'utilise pas de viewport, cela apparaîtra. lorsque nous ouvrons le navigateur mobile, il est très petit, et il peut également être déplacé et zoomé. Il est très faible. Viewport permet aux développeurs Web de définir dynamiquement la taille des éléments de contrôle dans leur contenu Web, de manière à ce qu'ils le soient. navigateur Le même effet que dans la page Web (réduction d'échelle) est obtenu. , utilisé pour mieux prendre en charge les sites Web réactifs. </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre><div class="contentsignin">Copier après la connexion</div></div></p><p></p>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. <ul style="list-style-type: disc;"><li><p></p>initial-scal : rapport de mise à l'échelle initiale, le rapport de mise à l'échelle lorsque la page est chargée pour la première fois. </li><li><p></p>échelle maximale : le rapport maximum sur lequel l'utilisateur est autorisé à zoomer. </li><li><p></p>échelle minimale : le rapport minimum sur lequel l'utilisateur est autorisé à zoomer. </li><li><p></p>user-scalable : indique si l'utilisateur peut zoomer manuellement. </li><li><p></p></li><li>8. Style CSS intégré--balise <style><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head></pre><div class="contentsignin">Copier après la connexion</div></div><blockquote><p>注意：对于文档中的唯一样式可以使用 <style> 标签，但对于在多个文档中通用的样式，使用外部样式表更为合适。</p></blockquote><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">9、外部css样式表--<link> 标签</span></strong></p><p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<link rel="stylesheet" href="common.css">
</head></pre><div class="contentsignin">Copier après la connexion</div></div><blockquote><p>HTML <head> 标签中可以包含任意数量的 <link> 标签。</p></blockquote><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">10、JavaScript 脚本</span></strong><br/></p><p><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">通过script标签嵌入JavaScript 脚本代码或链入脚本文件</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head>
<script>
document.write("PHP中文网")
</script>
</head></pre><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head>
<script src="js/test.js"></script>
</head></pre><div class="contentsignin">Copier après la connexion</div></div><p>相关推荐：《<a href="//m.sbmmt.com/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>
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!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
Introduction aux fournisseurs de services proposant des prix de serveur cloud rentables
Solution au problème selon lequel le logiciel de téléchargement Win11 ne peut pas être installé
Comment utiliser le déverrouillage
Que sont les échanges de devises numériques ?
entrée
Quelle est la touche de raccourci pour changer d'utilisateur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
