Maison  >  Article  >  interface Web  >  Quels attributs y a-t-il dans la balise head ?

Quels attributs y a-t-il dans la balise head ?

不言
不言avant
2019-03-21 11:29:153939parcourir

Le contenu de cet article concerne quels attributs se trouvent dans la balise head ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Qu'y a-t-il dans la balise head ?

Dans chaque document HTML, il existe une balise indispensable : . En tant que conteneur, elle contient principalement des balises utilisées pour décrire les informations (métadonnées) du document HTML lui-même. ne sera pas affiché sur la page. Dans la plupart des cas, il sera vu par les navigateurs et les moteurs de recherche.

Les balises pouvant être utilisées dans sont : , <script> ; noscript> </p> <p style="white-space: normal;">Introduction aux balises méta-informations</p> <p style="white-space: normal;"><title></p> <p>Définir le titre du document, qui est affiché sur la barre de titre ou la page à onglet du navigateur et résume généralement le page Web entière entièrement contenue. </p> <p style="white-space: normal;"><base></p> <p>Fournit une base pour toutes les URL relatives sur la page. Il ne peut y avoir qu'une seule balise <base> </p> <p>Actuellement, je n'ai observé "Taobao" qu'en utilisant cette balise. </p> <p style="white-space: normal;"><link></p> <p>Spécifie la relation entre les ressources externes et le document actuel, souvent dans une feuille de style de lien, comme indiqué ci-dessous : </p> <pre class="brush:php;toolbar:false">&lt;link rel=&quot;stylesheet&quot; href=&quot;xxx.css&quot; type=&quot;text/css&quot;&gt;</pre> <p>Bien sûr, il y a il y en a bien d'autres Fonction : </p> <ol><li>Par exemple, il est utilisé pour le référencement, principalement pour les moteurs de recherche : </li></ol> <pre class="brush:php;toolbar:false">&lt;link rel=&quot;canonical&quot; href=&quot;...&quot;&gt;</pre> <p>Dans les sites Web, il y a souvent plusieurs URL pointant vers la même page, comme mentionné ci-dessus. La balise indique au moteur de recherche quelle est l'URL principale de la page, afin que le moteur de recherche puisse conserver la page principale et supprimer les autres pages en double. </p> <ol><li>Fournir un abonnement rss : </li></ol> <pre class="brush:php;toolbar:false">&lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;RSS&quot; href=&quot;...&quot;&gt;</pre> <p>En plus d'être compréhensibles par les moteurs de recherche, les balises ci-dessus peuvent également être reconnues par de nombreux plug-ins de navigateur. </p> <ol><li> représente l'icône de la page : </li></ol> <pre class="brush:php;toolbar:false">&lt;link rel=&quot;icon&quot; href=&quot;https://xxx.png&quot;&gt;</pre> <p>La plupart des navigateurs liront la ressource de ce lien et l'afficheront sur la page. </p> <ol><li>Fournit un prétraitement des pages : </li></ol> <pre class="brush:php;toolbar:false">&lt;link rel=&quot;dns-prefetch&quot; href=&quot;//xxx.com&quot;&gt;</pre> <p>Faites une requête DNS pour un nom de domaine à l'avance. Forcer la prélecture des noms de domaine peut être utile dans certains cas. </p> <p>Par exemple, sur la page d'accueil du site Web, forcez la pré-résolution des noms de domaine fréquemment référencés sur l'ensemble du site Web, même s'ils ne sont pas utilisés sur la page d'accueil elle-même. Bien que les performances de la page d’accueil ne soient pas affectées, cela améliorera les performances globales du site. </p> <p><style></p> <p> Contient les informations de style du document. </p> <p><meta></p> <p>Une balise générale de représentation des informations de métadonnées, apparaissant généralement sous forme de paires clé-valeur, telles que : <meta name="xxx" content="yyy"> 🎜></p>attribut charset <p></p> <pre class="brush:php;toolbar:false">&lt;meta charset=&quot;UTF-8&quot;&gt;</pre> À partir de HTML5, il est recommandé d'utiliser la méthode d'écriture ci-dessus pour déclarer le codage de caractères utilisé dans le document actuel. Il est recommandé de le mettre en premier dans <head&gt. ; <p></p>Attribut http-equiv<p style="white-space: normal;"></p><pre class="brush:php;toolbar:false">&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;En HTML4, le code ci-dessus était utilisé pour déclarer le jeu de caractères, mais il est désormais obsolète. &lt;p&gt;&lt;/p&gt;En plus du type de contenu, il existe plusieurs autres valeurs : &lt;p&gt;&lt;/p&gt;content-langue (obsolète), set-cookie (obsolète), default-style, rafraîchissement, content-security-policy &lt;p&gt;&lt;/p&gt; n'est pas couramment utilisé, je ne le présenterai donc pas un par un. Il est également assez facile à comprendre. Si vous êtes intéressé, vous pouvez cliquer ici pour en savoir plus. &lt;p&gt;&lt;/p&gt;attribut name &lt;p style=&quot;white-space: normal;&quot;&gt;&lt;/p&gt;En fait, la balise &lt;meta&gt; peut être définie librement, à condition que les parties en lecture et en écriture soient d'accord sur le format du nom et du contenu. Regardons un exemple : &lt;p&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot;&gt;</pre>L'utilisation ci-dessus ne figure pas dans le standard HTML, mais c'est le standard de facto pour le développement mobile. Voici une explication du contenu dans content : <p></p>width : largeur de la page, qui peut être un entier positif ; il peut également s'agir d'une chaîne "device-width", ce qui signifie qu'elle est égale à la largeur de l'appareil. height : hauteur de la page, qui peut être un entier positif ; il peut également s'agir d'une chaîne "device-height", ce qui signifie qu'elle est égale à la hauteur de l'appareil. échelle initiale : mise à l’échelle initiale. échelle minimale : rapport de mise à l'échelle minimum. échelle maximale : rapport de mise à l'échelle maximal. user-scalable : s'il faut autoriser la mise à l'échelle de l'utilisateur. En plus de la fenêtre d'affichage, la valeur de l'attribut <p></p>name a également plusieurs valeurs : <p></p>nom de l'application, auteur, description, générateur, mots-clés, référent, robots, etc. <p></p>De même, je ne les présenterai pas un par un. Si vous êtes intéressé, vous pouvez cliquer ici pour en savoir plus. <p></p><script><p></p> est utilisé pour intégrer ou référencer un script exécutable. Jetons un coup d'œil à quelques attributs globaux courants des balises de script : <p></p>async<p></p> amène le navigateur à utiliser un autre thread pour télécharger le script, ce qui ne bloquera pas le rendu de la page. Lorsque le script est téléchargé, le navigateur suspend le rendu, exécute le script et continue à afficher la page après l'exécution. <p></p>async ne peut pas garantir l'ordre d'exécution des scripts, quel que soit le script téléchargé en premier, il sera exécuté en premier. <p></p>différer<p></p> <p>Le navigateur téléchargera également le script en parallèle, mais il ne sera pas exécuté immédiatement une fois le téléchargement terminé. Au lieu de cela, il attendra que le DOM soit chargé (c'est-à-dire la balise </html>). vient d'être lu) avant d'exécuter le script. </p> <p>defer garantit que les scripts sont exécutés dans l'ordre dans lequel ils apparaissent sur la page. </p> <p>src</p> <p> définit l'adresse qui fait référence à un script externe. Il ne doit y avoir aucun script intégré dans la balise script spécifiant cet attribut. Si le fichier de script utilise des caractères non anglais, le codage des caractères doit également être noté. Tels que : </p> <p><script charset="utf-8" src="https://www.example.com/script.js"></script><br>type</p> <p>La valeur par défaut est text/javascript</p> <p>Si vous souhaitez en savoir plus sur la balise <script> </p> <p><noscript></p> <p>Si le type de script sur la page n'est pas pris en charge ou si le script est actuellement désactivé dans le navigateur, définissez ici le contenu alternatif lorsque le script n'est pas exécuté. </p> <p>Résumé</p> <p>Cet article se termine ici. En fait, il y a encore beaucoup de choses sur les liens et les balises méta qui n'ont pas été introduites. De nombreuses balises associées ont des besoins particuliers et ne peuvent être utilisées que sous des conditions spécifiques. Dans certaines circonstances, par exemple, le développement mobile utilisera de nombreuses balises qui ne sont pas nécessaires sur PC. </p> <p>Bien sûr, l'utilisation quotidienne dépend principalement des besoins. Pour l'instant, je n'ai utilisé que quelques balises liées au viewport et au SEO. </p> <p>Compte tenu de cela, je recommande une bonne méthode d'apprentissage, qui consiste à aller sur les principaux sites Web pour voir ce qu'il y a dans leurs balises head. Si vous rencontrez quelque chose que vous n'avez jamais vu auparavant, recherchez-le. s'y familiariser rapidement. </p> <p>Les sites Web que j'ai vus ici incluent : "Taobao", "Alibaba", "JD.com", "NetEase Selection", "Qidian Chinese Network", etc. </p> <p>Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez prêter attention à la colonne <a href="http://www.php.cn/course/list/11.html" target="_blank">Vidéo du didacticiel HTML</a> du site Web PHP chinois ! </p> <p></p><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!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Cookie</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">线程</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">viewport</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">搜索引擎</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration:</span><div>Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer</div></div></div><div class="nphpSytBox"><span>Article précédent:<a class="dBlack" title="Comment supprimer les extensions de fichiers (.php et .html) des URL à l'aide de .htaccess" href="http://m.php.cn/fr/faq/416206.html">Comment supprimer les extensions de fichiers (.php et .html) des URL à l'aide de .htaccess</a></span><span>Article suivant:<a class="dBlack" title="Comment supprimer les extensions de fichiers (.php et .html) des URL à l'aide de .htaccess" href="http://m.php.cn/fr/faq/416684.html">Comment supprimer les extensions de fichiers (.php et .html) des URL à l'aide de .htaccess</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><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></html>