Heim >Web-Frontend >HTML-Tutorial >Welche Attribute gibt es im Head-Tag?

Welche Attribute gibt es im Head-Tag?

不言
不言nach vorne
2019-03-21 11:29:154010Durchsuche

Der Inhalt dieses Artikels handelt davon, welche Attribute im Head-Tag enthalten sind. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was steht im Head-Tag?

In jedem HTML-Dokument gibt es ein unverzichtbares Tag: Als Container enthält es hauptsächlich Tags, die zur Beschreibung der Informationen (Metadaten) des HTML-Dokuments selbst verwendet werden In den meisten Fällen wird es von Browsern und Suchmaschinen nicht angezeigt.

Die Tags, die in verwendet werden können, sind ; noscript>

Meta-Informations-Tag-Einführung

</p> <p>Definieren Sie den Titel des Dokuments, der in der Titelleiste oder Registerkarte des Browsers angezeigt wird und allgemein zusammenfasst gesamte Webseite vollständig. </p> <p style="white-space: normal;"><base></p> <p>Stellt eine Basis für alle relativen URLs auf der Seite bereit. Es kann nur ein <base>-Tag in einem Dokument geben. </p> <p>Derzeit habe ich nur beobachtet, dass „Taobao“ diesen Tag verwendet. </p> <p style="white-space: normal;"><link></p> <p> gibt die Beziehung zwischen externen Ressourcen und dem aktuellen Dokument an, oft verknüpft mit Stylesheets, wie unten gezeigt: </p> <pre class="brush:php;toolbar:false"><link rel="stylesheet" href="xxx.css" type="text/css"></pre> <p> Natürlich gibt es viele weitere Funktionen: </p> <ol><li>Wird beispielsweise für SEO verwendet, hauptsächlich für Suchmaschinen: </li></ol> <pre class="brush:php;toolbar:false"><link rel="canonical" href="..."></pre> <p>Auf Websites verweisen oft mehrere URLs auf dieselbe Seite. Die oben genannten Tags informieren die Suchmaschinen über die Haupt-URL der Seite, sodass Suchmaschinen die Hauptseite behalten und andere doppelte Seiten entfernen können. </p> <ol><li>RSS-Abonnement bereitstellen: </li></ol> <pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="..."></pre> <p>Die oben genannten Tags sind nicht nur für Suchmaschinen verständlich, sondern können auch von vielen Browser-Plug-Ins erkannt werden. </p> <ol><li> stellt das Seitensymbol dar: </li></ol> <pre class="brush:php;toolbar:false"><link rel="icon" href="https://xxx.png"></pre> <p>Die meisten Browser lesen die Ressource dieses Links und zeigen sie auf der Seite an. </p> <ol><li>Vorverarbeitung für Seiten bereitstellen: </li></ol> <pre class="brush:php;toolbar:false"><link rel="dns-prefetch" href="//xxx.com"></pre> <p>Führen Sie im Voraus eine DNS-Abfrage nach einem Domainnamen durch. In manchen Fällen kann es sinnvoll sein, den Vorabruf von Domänennamen zu erzwingen. </p> <p>Erzwingen Sie beispielsweise auf der Homepage der Website, dass häufig referenzierte Domainnamen auf der gesamten Website vorab aufgelöst werden, auch wenn sie nicht auf der Homepage selbst verwendet werden. Auch wenn die Leistung der Startseite dadurch möglicherweise nicht beeinträchtigt wird, verbessert sich dadurch die Gesamtleistung der Website. </p> <p><style></p> <p> Enthält die Stilinformationen des Dokuments. </p> <p><meta></p> <p>Ein allgemeines Metadaten-Informationsdarstellungs-Tag, das normalerweise als Schlüssel-Wert-Paare erscheint, wie zum Beispiel: <meta name="xxx" content="yyy"> 🎜></p>charset attribute<p></p> <pre class="brush:php;toolbar:false"><meta charset="UTF-8"></pre>Ab HTML5 wird die obige Schreibmethode empfohlen, um die im aktuellen Dokument verwendete Zeichenkodierung zu deklarieren. Es wird empfohlen, sie zuerst in <head> einzufügen. <p></p>http-equiv-Attribut<p style="white-space: normal;"></p> <pre class="brush:php;toolbar:false"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></pre>In HTML4 wurde der obige Code verwendet, um den Zeichensatz zu deklarieren, aber er ist jetzt veraltet. <p></p>Zusätzlich zu content-type gibt es mehrere andere Werte: <p></p>content-Language (veraltet), Set-Cookie (veraltet), Default-Style, Refresh, Content-Security-Policy <p></p> wird nicht häufig verwendet, daher werde ich es nicht einzeln vorstellen. Wenn Sie interessiert sind, können Sie hier klicken, um mehr zu erfahren. <p></p>Namensattribut <p style="white-space: normal;"></p>Tatsächlich kann das <meta>-Tag frei definiert werden, solange sich sowohl die lesende als auch die schreibende Partei über das Format des Namens und des Inhalts einig sind. Schauen wir uns ein Beispiel an: <p></p> <pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"></pre>Die obige Verwendung ist nicht im HTML-Standard enthalten, aber es ist der De-facto-Standard für die mobile Entwicklung. Hier ist eine Erklärung des Inhalts: <p></p>Breite: Seitenbreite, die eine positive Ganzzahl sein kann; es kann auch eine Zeichenfolge „Gerätebreite“ sein, was bedeutet, dass sie der Gerätebreite entspricht. Höhe: Seitenhöhe, die eine positive Ganzzahl sein kann; es kann auch eine Zeichenfolge „Gerätehöhe“ sein, was bedeutet, dass sie der Gerätehöhe entspricht. Anfangsskalierung: Anfangsskalierung. Minimum-Scale: Minimales Skalierungsverhältnis. Maximum-Scale: Maximales Skalierungsverhältnis. Benutzerskalierbar: Ob Benutzerskalierung zugelassen werden soll. Zusätzlich zum Ansichtsbereich hat der Wert des <p></p>Name-Attributs auch eine ganze Reihe von Werten: <p></p>Anwendungsname, Autor, Beschreibung, Generator, Schlüsselwörter, Referrer, Roboter usw. <p></p>Ebenso werde ich sie nicht einzeln vorstellen. Wenn Sie interessiert sind, können Sie hier klicken, um mehr zu erfahren. <p></p><script><p></p> wird verwendet, um ein ausführbares Skript einzubetten oder darauf zu verweisen. Werfen wir einen Blick auf einige allgemeine globale Attribute von Skript-Tags: <p></p>async<p></p> bewirkt, dass der Browser einen anderen Thread zum Herunterladen des Skripts verwendet, wodurch das Rendern der Seite nicht blockiert wird. Wenn das Skript heruntergeladen wird, unterbricht der Browser das Rendern, führt das Skript aus und fährt nach der Ausführung mit dem Rendern der Seite fort. <p></p>async kann die Ausführungsreihenfolge von Skripten nicht garantieren. Das zuerst heruntergeladene Skript wird zuerst ausgeführt. <p></p>aufschieben<p></p> <p>Es führt auch dazu, dass der Browser das Skript parallel herunterlädt, es wird jedoch nicht sofort nach Abschluss des Downloads ausgeführt, sondern wartet, bis das DOM geladen ist (d. h. das </html>-Tag). wurde gerade gelesen), bevor das Skript ausgeführt wird. </p> <p>defer stellt sicher, dass Skripte in der Reihenfolge ausgeführt werden, in der sie auf der Seite erscheinen. </p> <p>src</p> <p> definiert die Adresse, die auf ein externes Skript verweist. Es sollten keine eingebetteten Skripte im Skript-Tag vorhanden sein, die dieses Attribut angeben. Wenn die Skriptdatei nicht-englische Zeichen verwendet, sollte auch die Zeichenkodierung beachtet werden. Zum Beispiel: </p> <p><script charset="utf-8" src="https://www.example.com/script.js"></script><br>type</p> <p>Der Standardwert ist text/javascript</p> <p>Wenn Sie weitere Details zum <script>-Tag erfahren möchten, können Sie hier klicken. </p> <p><noscript></p> <p>Wenn der Skripttyp auf der Seite nicht unterstützt wird oder die Skripterstellung derzeit im Browser deaktiviert ist, definieren Sie hier den alternativen Inhalt, wenn das Skript nicht ausgeführt wird. </p> <p>Zusammenfassung</p> <p>Dieser Artikel endet hier. Tatsächlich gibt es noch viele Dinge zu Link- und Meta-Tags, die nicht eingeführt wurden und nur unter bestimmten Bedingungen verwendet werden Beispielsweise werden bei der mobilen Entwicklung viele Tags verwendet, die auf dem PC nicht benötigt werden. </p> <p>Natürlich hängt die tägliche Nutzung hauptsächlich von den Bedürfnissen ab. Bisher habe ich nur einige Tags im Zusammenhang mit Viewport und SEO verwendet. </p> <p>Vor diesem Hintergrund empfehle ich eine gute Lernmethode: Gehen Sie zu den wichtigsten Websites, um zu sehen, was in ihren Head-Tags steht. Wenn Sie auf etwas stoßen, das Sie noch nie zuvor gesehen haben, werden Sie es finden schnell damit vertraut machen. </p> <p>Zu den Websites, die ich hier gesehen habe, gehören: „Taobao“, „Alibaba“, „JD.com“, „NetEase Selection“, „Qidian Chinese Network“ usw. </p> <p>Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte <a href="http://www.php.cn/course/list/11.html" target="_blank">HTML-Tutorial-Video</a> auf der chinesischen PHP-Website! </p> <p></p><p>Das obige ist der detaillierte Inhalt vonWelche Attribute gibt es im Head-Tag?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme:</span><div>Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="So entfernen Sie Dateierweiterungen (.php und .html) mit .htaccess von URLs" href="https://m.php.cn/de/faq/416206.html">So entfernen Sie Dateierweiterungen (.php und .html) mit .htaccess von URLs</a></span><span>Nächster Artikel:<a class="dBlack" title="So entfernen Sie Dateierweiterungen (.php und .html) mit .htaccess von URLs" href="https://m.php.cn/de/faq/416684.html">So entfernen Sie Dateierweiterungen (.php und .html) mit .htaccess von URLs</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</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>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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></html>