wie man HTML verwendet

PHPz
PHPzOriginal
2023-04-24 14:49:221140Durchsuche

HTML ist die Abkürzung für HyperText Markup Language, einer Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. In diesem Artikel werfen wir einen genaueren Blick auf die Verwendung von HTML.

  1. OverviewHTML

HTML ist eine Tag-basierte Sprache, die zur Bereitstellung von Struktur und Stil für Webseiten verwendet wird. Da HTML zahlreiche Tags und Elemente bereitstellt, können Sie mit HTML nahezu jede Art von Webseite erstellen, einschließlich Text, Bildern, Videos, Links und mehr.

  1. Die Grundstruktur von HTML

HTML-Dateien haben normalerweise die Erweiterung „.html“. Die Grundstruktur eines HTML-Dokuments umfasst einen Header und einen Body. In der Kopfzeile können Sie den Dokumenttitel angeben, auf eine CSS-Datei verweisen, auf eine JavaScript-Datei verweisen usw. Im Body können Sie den Seiteninhalt angeben.



</head><br><body> Gängige HTML-Tags<br><br><br>Gemeinsame HTML-Tags sind: Titel, Absatz, Link, Bild, Liste, Tabelle, Formular usw. Nachfolgend finden Sie einige Tags und Beispiele für deren Verwendung. <br><br>Titel-Tag (h1 bis h6): </p> <ol start="3"><h1>Dies ist ein Titel der ersten Ebene</h1> <li><h2>Dies ist ein Titel der zweiten Ebene Titel</h2></li> </ol>Absatz-Tag (p): <p></p><p>Dies ist ein Textabsatz. </p> img): <p></p><img src="example.jpg" alt="Beispielbild"><p><br>Listen-Tags (ul, li): </p># 🎜🎜#<ul> <p><li>Das erste Element</li> ;#🎜 🎜#</p>Tabellen-Tags (table, tr, td): <p></p> <p></p> <p>Erste Spalte, erste Zeile<a href="http://www.example.com">#🎜 🎜 #Zweite Spalte, erste Zeile</a></p> <p></p>Erste Spalte, zweite Zeile<p></p>Zweite Spalte, zweite Zeile<p> </p># 🎜🎜#<p></p> <p>Formularbezeichnung (Formular, Eingabe): </p> <p><form action="example.php" method="post"> <br><label for="username"> ;Benutzername:</label> <br><input type="text" name="username" id="username"> <br><label for="password">Passwort:< ; /label> <br><input type="password" name="password" id="password"> </form><br><br></p>HTML-Attribute<ol start="4"> <li>HTML-Elemente können Attribute haben, die verwendet werden können, um die Eigenschaften und das Verhalten des Elements anzugeben. Hier sind einige gängige HTML-Attribute: </ol> <p>class: Gibt die Klasse des Elements an. </p> <p>id: Die eindeutige ID des angegebenen Elements. </p> <p>href: Geben Sie die URL des Links an. </p> <p>src: Gibt die URL des Bildes an. </p> <p>Stil: Geben Sie den CSS-Stil des Elements an. </p> <p></p>CSS-Stil<ol start="5"> <li>CSS ist die Abkürzung für Cascading Style Sheets und ist eine Sprache, die zum Anwenden von Stilen auf Webseiten verwendet wird. Mit CSS können Sie den Stil Ihrer Webseiten sauberer und präziser steuern. In HTML können Sie CSS-Stile auf Elemente anwenden über: </ol> <p> Inline-Stile: Wenden Sie Stile direkt auf Elemente an, wie folgt: </p> <p><p style="color:red" >Roter Text</p></p> <p>Internes Stylesheet: Verwenden Sie das Style-Element, um die Stildefinition in den Dokumentkopf einzufügen: </p> <p>< style> p { </p>color: red; <p>} <br></style><br><br>Externes Stylesheet: Fügen Sie Stildefinitionen in eine separate CSS-Datei ein und verweisen Sie darauf im HTML-Dokument : <br></p><head> <p><link rel="stylesheet" type="text/css" href="style.css"> ; </p><p><br/>JavaScript<br/></p><ol start="6">JavaScript ist eine Methode zur Verbesserung der Interaktivität und Dynamik der Programmiersprache HTML-Dokumente. Mit JavaScript kann das Zusammenspiel von Text, Bildern, Formularen und anderen Elementen gesteuert werden. Sie können JavaScript in HTML verwenden, indem Sie: <li></li> Inline-Skript: Skript direkt in ein HTML-Element einbetten: </ol><p><button onclick="alert('Hallo Welt!') ">Klicken Sie auf mich</button></p> <p>Internes Skript: Verwenden Sie das Skriptelement, um das Skript in den Dokumentkopf oder -text einzufügen: </p> <p><script> ; #🎜🎜 #function sayHello() { </p>alert('Hello, world!'); <p>} </p></script></p> <p><br>Externes Skript: Fügen Sie die Skriptdefinition ein eine separate JavaScript-Datei und verweisen Sie darauf im HTML-Dokument: <br><br><head><script src="script.js"></script> ; ;/head><br></p> <p>Zusammenfassung</p> <p><br>In diesem Artikel haben wir die Grundstruktur von HTML, einige grundlegende Tags und Elemente sowie deren Verwendung vorgestellt CSS und JavaScript zur Verbesserung von HTML-Dokumenten. Wenn Sie den Inhalt dieses Artikels studieren, sollten Sie in der Lage sein, einfache HTML-Seiten zu schreiben. Allerdings verfügt HTML über erweiterte Funktionen und Technologien, und wir empfehlen Ihnen, selbst mehr über HTML und die damit verbundenen Webtechnologien zu lernen. <br></p><p>Das obige ist der detaillierte Inhalt vonwie man HTML verwendet. 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 konvertieren Sie ppt in html5" href="https://m.php.cn/de/faq/526492.html">So konvertieren Sie ppt in html5</a></span><span>Nächster Artikel:<a class="dBlack" title="So konvertieren Sie ppt in html5" href="https://m.php.cn/de/faq/526495.html">So konvertieren Sie ppt in html5</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>