Lassen Sie uns über unsichtbare HTML-Elemente und ihre Anwendungen sprechen

Wenn wir HTML zum Erstellen von Webseiten verwenden, werden die von uns verwendeten Tags häufig für die Anzeige oder das Layout verwendet. Allerdings gibt es einige Elemente, die unsichtbar sind und nicht direkt auf unseren Webseiten angezeigt werden, aber sehr praktische Funktionen haben. Diese Elemente werden als unsichtbare HTML-Elemente bezeichnet.

Was sind unsichtbare HTML-Elemente?

Unsichtbare HTML-Elemente sind, einfach ausgedrückt, Elemente, die zum Hinzufügen anderer Funktionen zu Webseiten verwendet werden, aber nicht direkt auf der Webseite angezeigt werden. Diese Elemente werden im Browser nicht wie sichtbare div- oder span-Elemente angezeigt. Sie können jedoch über die DOM-Manipulation des Browsers aufgerufen und geändert werden.

Häufig verwendete unsichtbare HTML-Elemente

1. Kommentar-Tag ()

Wie die meisten Programmiersprachen gibt es auch in HTML eine Kommentarfunktion. Die Verwendung von Kommentar-Tags kann den Code intuitiver und verständlicher machen. Die Syntax von Kommentar-Tags ist sehr einfach. Fügen Sie einfach „“ hinzu.

2. Textbereichsbezeichnung (Textbereich)

Mit der Textbereichsbezeichnung kann ein mehrzeiliges Texteingabefeld erstellt werden, und der Benutzer kann mehrere Textzeilen in das Eingabefeld eingeben. In HTML beginnen Textbereichs-Tags mit dem -Tag und enden mit dem -Tag. Texteingabeinhalte werden zwischen gekapselt. </p> <ol start="3"><li>Hyperlink-Tag (ein Tag) </li></ol> <p>Hyperlink-Tag ist ein Link auf einer Webseite, der zu anderen Seiten oder Websites führt. Obwohl er als Text oder Bild auf der Webseite erscheint, handelt es sich eigentlich nicht um ein Objekt. In HTML sind Hyperlink-Tags mit <a> gekennzeichnet und das href-Attribut im a-Tag definiert den Ziellink für Hyperlink-Sprünge. </a></p> <ol start="4"><li>Trennlinien-Tag (Std.)</li></ol> <p>Trennlinien-Tag wird zum Erstellen horizontaler Trennlinien auf der Seite verwendet und wird häufig zum Trennen verschiedener Inhaltsblöcke verwendet. In HTML muss das hr-Tag lediglich als selbstschließendes Tag geschrieben werden. </p> <ol start="5"><li>Ungeordnete Liste (ul) und geordnete Liste (ol) Tags</li></ol> <p>Ungeordnete Liste bezieht sich auf eine Liste ohne feste Reihenfolge, während geordnete Liste eine nach Seriennummer geordnete Liste ist. In HTML beginnen ungeordnete Listen mit dem Tag </ul>, während geordnete Listen mit dem Tag </ol> enden. Listenelemente werden mit dem Tag <li> definiert. </p> <ol start="6"><li>Versteckte Feldbezeichnung (Eingabetyp = „versteckt“)</li></ol> <p>Die versteckte Feldbezeichnung ist ein Element, das häufig für die Formulardatenübertragung verwendet wird. Sie wird hauptsächlich zum Aufzeichnen einiger Dinge verwendet, die nicht auf der Seite angezeigt werden müssen Das Frontend muss jedoch an das Backend übermittelt werden. Im Gegensatz zu Textfeldern wird der Wert eines ausgeblendeten Felds nicht auf der Seite angezeigt. </p> <ol start="7"><li>Meta-Tag </li></ol> <p>Meta-Element ist ein Tag, das verwendet wird, um Browsern und Suchmaschinen mehr Seitenmetadaten bereitzustellen. Es wird in der Regel nicht auf der Seite angezeigt und dient hauptsächlich der Suchmaschinenoptimierung. Sie können die Schlüsselwörter, die Beschreibung, den Zeichensatz, das Darstellungsfenster usw. der Seite festlegen. </p> <p>Anwendung unsichtbarer HTML-Elemente</p> <p>Durch das Erlernen der Anwendung unsichtbarer HTML-Elemente können wir die Fähigkeiten der Webseitenerstellung besser beherrschen. </p> <ol><li>Kommentar-Tags</li></ol> <p>Kommentar-Tags können als Leitfaden für unser zukünftiges Code-Schreiben dienen und auch die Lesbarkeit des Codes erheblich verbessern. </p> <ol start="2"><li>Hyperlink-Tag</li></ol> <p>In Webseiten sind Hyperlink-Tags sehr wichtige Elemente. Durch Hyperlink-Tags können wir Inhaltssprünge oder externe Links realisieren, um Website-Inhalte anzureichern. </p> <ol start="3"><li>Trennlinien-Tag</li></ol> <p>Trennlinien-Tags können einen besseren Trennpunkt für die Lesbarkeit von Webinhalten bieten und es den Lesern erleichtern, sie besser zu lesen und zu verstehen. </p> <ol start="4"><li>Listen-Tag</li></ol> <p>Bei der Webseitenproduktion sind Listen-Tags sehr verbreitet, mit denen Inhalte besser organisiert und angezeigt werden können. Auch Listen-Tags können dabei helfen, die Seitenstruktur übersichtlicher darzustellen. </p> <ol start="5"><li>Versteckte Feld-Tags</li></ol> <p>Während der Formularübertragung können versteckte Feld-Tags einige spezielle Daten aufzeichnen, um Entwicklern zu helfen, das Benutzerverhalten besser zu verstehen. </p> <ol start="6"><li>Meta-Tag </li></ol> <p>Meta-Tag kann eine Suchmaschinenoptimierung für die Seite bereitstellen und dafür sorgen, dass die Seite auf der Suchmaschinen-Anzeigeseite besser erscheint. </p> <p>Fazit</p> <p>Das grundlegende Erlernen unsichtbarer HTML-Elemente kann uns helfen, die Methoden und Techniken der Webseitenerstellung besser zu beherrschen und unsere Webseiten herausragender und praktischer zu machen. </p><p>Das obige ist der detaillierte Inhalt vonLassen Sie uns über unsichtbare HTML-Elemente und ihre Anwendungen sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="So erstellen Sie eine effektive Fehlerseite in HTML" href="https://m.php.cn/de/faq/525929.html">So erstellen Sie eine effektive Fehlerseite in HTML</a></span><span>Nächster Artikel：<a class="dBlack" title="So erstellen Sie eine effektive Fehlerseite in HTML" href="https://m.php.cn/de/faq/525934.html">So erstellen Sie eine effektive Fehlerseite in HTML</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/402895.html" title="Problem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue" class="aBlack">Problem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/402896.html" title="Einige Gedanken zu React diese Bindung" class="aBlack">Einige Gedanken zu React diese Bindung</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/402897.html" title="Django verwendet eine Anfrage, um die vom Browser gesendeten Parameter abzurufen" class="aBlack">Django verwendet eine Anfrage, um die vom Browser gesendeten Parameter abzurufen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/402898.html" title="DOM-Operation in JQuery – Wrap" class="aBlack">DOM-Operation in JQuery – Wrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/402899.html" title="Erläuterung verwandter Inhalte von Prototyp und Prototypenkette" class="aBlack">Erläuterung verwandter Inhalte von Prototyp und Prototypenkette</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><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>