Beachten Sie, dass sich in der unteren rechten Ecke des VSCode-Fensters eine Schaltfl?che Go Live<\/strong> befindet.<\/p>\n\n
<\/p>\n\n
Durch Klicken auf diese Schaltfl?che wird die Erweiterung Live Server<\/strong> aktiviert. Ein lokaler Entwicklungsserver wird gestartet, der die gerade erstellte index.html-Datei hostet.<\/p>\n\n
<\/p>\n\n
Natürlich ist die Datei im Moment noch leer, sodass Sie nichts sehen k?nnen. Fügen Sie etwas zwischen dem
\n\n \n \n \n Document<\/title>\n <\/head>\n <body>\n Hello, world!\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Speichern Sie die ?nderungen und die Webseite wird automatisch mit dem neuen Inhalt aktualisiert.<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617272129442.jpg\" alt=\"Fundamentals of HTML and CSS\"><\/p>\n\n<h2>\n \n \n Die Struktur eines HTML-Dokuments\n<\/h2>\n\n<p>Ein typisches HTML-Dokument hat immer die folgende Struktur:<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n . . .\n <\/head>\n <body>\n . . .\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Der <!DOCTYPE html> Tag definiert den Dokumenttyp. Wenn der Webbrowser auf <!DOCTYPE html> trifft, versteht er, dass die Seite gem?? den Spezifikationen von HTML5, der neuesten Version des HTML-Standards, analysiert und angezeigt werden sollte. Dadurch wird sichergestellt, dass moderne Browser den Inhalt und das Layout der Webseite korrekt interpretieren.<\/p>\n\n<p>Alles andere in der Datei sollte in einem <html>-Format eingeschlossen sein. Element, definiert durch ein ?ffnendes Tag (<html>) und ein schlie?endes Tag (<\/html>).<\/p>\n\n<p>lang wird als Attribut bezeichnet und hat den Wert ?en“. Dadurch wird sowohl dem Browser als auch der Suchmaschine mitgeteilt, dass Englisch die prim?re Sprache ist, die für diese Webseite verwendet wird.<\/p>\n\n<p>Im <html> Element gibt es zwei untergeordnete Elemente: <head> und <body>. <Kopf> enth?lt Metadaten und andere Informationen zum HTML-Dokument. Diese Informationen werden nicht im Browser angezeigt, sondern h?ufig von Suchmaschinen für SEO-Zwecke (Suchmaschinenoptimierung) verwendet.<\/p>\n\n<p><body> hingegen enth?lt den Hauptinhalt der Webseite, der für die Benutzer sichtbar ist, und ist daher auch der Teil der HTML-Datei, auf den wir uns in diesem Kurs konzentrieren werden .<\/p>\n\n<h2>\n \n \n Elemente und Attribute\n<\/h2>\n\n<p>Schauen wir uns das vorherige Beispiel genauer an und stellen fest, dass das HTML-Dokument aus verschiedenen Elementen in einer verschachtelten Struktur besteht. In HTML haben die meisten Elemente sowohl ein ?ffnendes als auch ein schlie?endes Tag:<br>\n<\/p>\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <\/head>\n <body><\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>In diesem Fall <tag> ist das ?ffnende Tag und <\/tag> ist das schlie?ende Tag und zusammen bilden sie ein HTML-Element. Ein Element k?nnte Textinhalt zwischen den ?ffnenden und schlie?enden Tags enthalten.<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <\/head>\n <body>\n Hello, world!\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Das Element kann sich auch um andere Elemente wickeln und so eine verschachtelte Struktur bilden.<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n . . .\n <\/head>\n <body>\n . . .\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Im Er?ffnungs-Tag k?nnen Sie Attribute definieren, die zur Angabe zus?tzlicher Informationen über das Element verwendet werden, wie z. B. seine Klasse, ID usw.<br>\n<\/p>\n\n<pre><tag>. . .<\/tag>\n<\/pre>\n\n\n\n<p>Das Attribut befindet sich normalerweise in einem Schlüssel\/Wert-Paar und der Wert muss immer in passende Anführungszeichen (doppelt oder einfach) eingeschlossen werden.<\/p>\n\n<p>Es gibt einige Ausnahmen von diesen allgemeinen Formaten. Beispielsweise ist das <br> Das Element, das einen Zeilenumbruch erzeugt, ben?tigt kein schlie?endes Tag. Für einige Attribute, beispielsweise mehrere, ist kein Wert erforderlich. Wir werden diese Ausnahmen sp?ter in diesem Kurs besprechen, sobald wir auf sie sto?en.<\/p>\n\n<p>Sie sollten jedoch bedenken, dass ein Element, das ein schlie?endes Tag erfordert, niemals weggelassen werden sollte. In den meisten F?llen k?nnte die Webseite immer noch korrekt gerendert werden, aber wenn die Struktur Ihres HTML-Dokuments komplexer wird, k?nnen unerwartete Fehler auftreten. Werfen Sie bei Interesse einen Blick auf unsere Best-Practice-Richtlinien zum Schreiben von HTML und CSS.<\/p>\n\n<h2>\n \n \n Weitere Lektüre\n<\/h2>\n\n<ul>\n<li>Einführung in das Cascading Style Sheet (CSS)<\/li>\n<li>Einführung in JavaScript<\/li>\n<li>Was ist Responsive Design?<\/li>\n<li>So erstellen Sie interaktive Formulare mit HTML und CSS<\/li>\n<\/ul>\n\n\n \n\n \n\n \n "} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/de/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://ipnx.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://ipnx.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://ipnx.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://ipnx.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://ipnx.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://ipnx.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://ipnx.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://ipnx.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://ipnx.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('de')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="suchen" onclick="searchs('de')"><img src="/static/imghw/find.png" alt="suchen"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Deutsch<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:;" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/de/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS-Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Grundlagen von HTML und CSS</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Grundlagen von HTML und CSS</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/de/member/1468489.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8199266e8412.png" src="/static/imghw/default1.png" alt="Linda Hamilton">
</a>
<div id="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/de/member/1468489.html" class="author_name">Linda Hamilton</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jan 06, 2025 pm 10:11 PM</span>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>HTML und CSS sind die grundlegendsten Bausteine ??einer Webseite und auch Ihr erster Schritt auf dem Weg zum Webentwickler. HTML stellt das Layout und den Inhalt der Webseite bereit und CSS definiert deren Stil und Erscheinungsbild. In diesem Tutorial behandeln wir die Grundlagen von HTML und CSS, und am Ende werden Sie in der Lage sein, responsive Webseiten zu entwerfen, die nahtlos auf Ger?ten jeder Gr??e funktionieren.</p>
<h2>
Was ist HTML?
</h2>
<p>HTML ist die Standard-Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Es definiert die Struktur und den Inhalt von Webseiten mithilfe von HTML-Elementen wie überschriften, Abs?tzen, Bildern, Links, Formularen und mehr.</p>
<p>Um mit dem Schreiben von HTML-Code zu beginnen, k?nnen Sie die CodePen-Demo unten verwenden:</p>
<p>Code-Demo ?</p>
<p>Auf der linken Seite finden Sie den HTML-Quellcode, der im Wesentlichen die Blaupause für das ist, was angezeigt wird. Der Browser wandelt diesen Entwurf dann in die Webseite um, die Sie auf der rechten Seite sehen.</p>
<p>Sie k?nnen den Quellcode direkt ?ndern, um zu sehen, wie er sich auf die angezeigte Webseite auswirkt.</p>
<h2>
Bereiten Sie Ihren Computer für die Webentwicklung vor
</h2>
<p>Natürlich k?nnen Sie sich in der Praxis nicht auf Tools wie CodePen verlassen, um eine funktionierende und voll funktionsf?hige Webanwendung zu erstellen. Sie ben?tigen etwas Leistungsst?rkeres, also richten wir Ihren Computer für die Webentwicklung ein.</p>
<p>Stellen Sie zun?chst sicher, dass ein Browser installiert ist. Für diesen Kurs sollte jeder g?ngige Webbrowser wie Google Chrome, Microsoft Edge, Safari oder Firefox ausreichen. Sie k?nnen den Browser von den verlinkten Websites herunterladen und installieren.</p>
<p>Darüber hinaus ben?tigen Sie einen Code-Editor, um Ihren Code zu schreiben und zu bearbeiten. Visual Studio Code ist eine gro?artige Option für Anf?nger (und auch für Profis). Es ist der weltweit am h?ufigsten verwendete Code-Editor. Laden Sie einfach das entsprechende Installationsprogramm für Ihr Betriebssystem von der offiziellen Website herunter.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271157796.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Nachdem Sie VSCode installiert haben, stellen Sie sicher, dass Sie auch die Erweiterung <strong>Live Server</strong> installieren. Navigieren Sie zur Registerkarte <strong>Erweiterungen</strong> in der linken Seitenleiste und geben Sie <strong>Live Server</strong> in das Suchfeld ein. Von dort aus k?nnen Sie die Erweiterung herunterladen und installieren.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271255420.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p><strong>Live Server</strong> erstellt einen lokalen Entwicklungsserver mit der Funktion zum automatischen Neuladen. Erstellen Sie beispielsweise ein neues Arbeitsverzeichnis und ?ffnen Sie es mit VSCode.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271512988.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Erstellen Sie in diesem Verzeichnis eine neue Datei mit dem Namen index.html. Die Erweiterung .html gibt an, dass es sich um ein HTML-Dokument handelt. Geben Sie ein! in VSCode, und Sie werden Vorschl?ge wie diesen sehen:</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271776671.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Dies ist eine Verknüpfung zum schnellen Erstellen von HTML-Dokumenten. Sie k?nnen mit den Tasten ↑ oder ↓ navigieren. W?hlen Sie die erste Option und der folgende Code sollte generiert werden.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
</pre>
<p>Beachten Sie, dass sich in der unteren rechten Ecke des VSCode-Fensters eine Schaltfl?che <strong>Go Live</strong> befindet.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271945701.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Durch Klicken auf diese Schaltfl?che wird die Erweiterung <strong>Live Server</strong> aktiviert. Ein lokaler Entwicklungsserver wird gestartet, der die gerade erstellte index.html-Datei hostet.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617272021543.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Natürlich ist die Datei im Moment noch leer, sodass Sie nichts sehen k?nnen. Fügen Sie etwas zwischen dem <body> und
</body> Tags.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
</pre>
<p>Speichern Sie die ?nderungen und die Webseite wird automatisch mit dem neuen Inhalt aktualisiert.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617272129442.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<h2>
Die Struktur eines HTML-Dokuments
</h2>
<p>Ein typisches HTML-Dokument hat immer die folgende Struktur:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
</pre>
<p>Der <!DOCTYPE html> Tag definiert den Dokumenttyp. Wenn der Webbrowser auf <!DOCTYPE html> trifft, versteht er, dass die Seite gem?? den Spezifikationen von HTML5, der neuesten Version des HTML-Standards, analysiert und angezeigt werden sollte. Dadurch wird sichergestellt, dass moderne Browser den Inhalt und das Layout der Webseite korrekt interpretieren.</p>
<p>Alles andere in der Datei sollte in einem <html>-Format eingeschlossen sein. Element, definiert durch ein ?ffnendes Tag (<html>) und ein schlie?endes Tag (</html>).</p>
<p>lang wird als Attribut bezeichnet und hat den Wert ?en“. Dadurch wird sowohl dem Browser als auch der Suchmaschine mitgeteilt, dass Englisch die prim?re Sprache ist, die für diese Webseite verwendet wird.</p>
<p>Im <html> Element gibt es zwei untergeordnete Elemente: <head> und <body>. <Kopf> enth?lt Metadaten und andere Informationen zum HTML-Dokument. Diese Informationen werden nicht im Browser angezeigt, sondern h?ufig von Suchmaschinen für SEO-Zwecke (Suchmaschinenoptimierung) verwendet.</p>
<p><body> hingegen enth?lt den Hauptinhalt der Webseite, der für die Benutzer sichtbar ist, und ist daher auch der Teil der HTML-Datei, auf den wir uns in diesem Kurs konzentrieren werden .</p>
<h2>
Elemente und Attribute
</h2>
<p>Schauen wir uns das vorherige Beispiel genauer an und stellen fest, dass das HTML-Dokument aus verschiedenen Elementen in einer verschachtelten Struktur besteht. In HTML haben die meisten Elemente sowohl ein ?ffnendes als auch ein schlie?endes Tag:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
</pre>
<p>In diesem Fall <tag> ist das ?ffnende Tag und </tag> ist das schlie?ende Tag und zusammen bilden sie ein HTML-Element. Ein Element k?nnte Textinhalt zwischen den ?ffnenden und schlie?enden Tags enthalten.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
</pre>
<p>Das Element kann sich auch um andere Elemente wickeln und so eine verschachtelte Struktur bilden.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
</pre>
<p>Im Er?ffnungs-Tag k?nnen Sie Attribute definieren, die zur Angabe zus?tzlicher Informationen über das Element verwendet werden, wie z. B. seine Klasse, ID usw.<br>
</p>
<pre class="brush:php;toolbar:false"><tag>. . .</tag>
</pre>
<p>Das Attribut befindet sich normalerweise in einem Schlüssel/Wert-Paar und der Wert muss immer in passende Anführungszeichen (doppelt oder einfach) eingeschlossen werden.</p>
<p>Es gibt einige Ausnahmen von diesen allgemeinen Formaten. Beispielsweise ist das <br> Das Element, das einen Zeilenumbruch erzeugt, ben?tigt kein schlie?endes Tag. Für einige Attribute, beispielsweise mehrere, ist kein Wert erforderlich. Wir werden diese Ausnahmen sp?ter in diesem Kurs besprechen, sobald wir auf sie sto?en.</p>
<p>Sie sollten jedoch bedenken, dass ein Element, das ein schlie?endes Tag erfordert, niemals weggelassen werden sollte. In den meisten F?llen k?nnte die Webseite immer noch korrekt gerendert werden, aber wenn die Struktur Ihres HTML-Dokuments komplexer wird, k?nnen unerwartete Fehler auftreten. Werfen Sie bei Interesse einen Blick auf unsere Best-Practice-Richtlinien zum Schreiben von HTML und CSS.</p>
<h2>
Weitere Lektüre
</h2>
<ul>
<li>Einführung in das Cascading Style Sheet (CSS)</li>
<li>Einführung in JavaScript</li>
<li>Was ist Responsive Design?</li>
<li>So erstellen Sie interaktive Formulare mit HTML und CSS</li>
</ul>
<p>Das obige ist der detaillierte Inhalt vonGrundlagen von HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" class="bzsmdiv_sp">Erkl?rung dieser Website</div>
<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>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="wjcelcm34c" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hei?er Artikel</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796832397.html" title="Gras Wonder Build Guide | Uma Musume hübsches Derby" class="phpgenera_Details_mainR4_bottom_title">Gras Wonder Build Guide | Uma Musume hübsches Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796833110.html" title="<??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796828810.html" title="NYT 'Connections' Hinweise für Mittwoch, 2. Juli: Hinweise und Antworten für das heutige Spiel" class="phpgenera_Details_mainR4_bottom_title">NYT 'Connections' Hinweise für Mittwoch, 2. Juli: Hinweise und Antworten für das heutige Spiel</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/article.html">Mehr anzeigen</a>
</div>
</div>
</div> -->
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hei?e KI -Werkzeuge</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Ausziehbilder kostenlos</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>KI-gestützte App zum Erstellen realistischer Aktfotos</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>KI-Kleiderentferner</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/ai">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hei?er Artikel</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796832397.html" title="Gras Wonder Build Guide | Uma Musume hübsches Derby" class="phpgenera_Details_mainR4_bottom_title">Gras Wonder Build Guide | Uma Musume hübsches Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796833110.html" title="<??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796828810.html" title="NYT 'Connections' Hinweise für Mittwoch, 2. Juli: Hinweise und Antworten für das heutige Spiel" class="phpgenera_Details_mainR4_bottom_title">NYT 'Connections' Hinweise für Mittwoch, 2. Juli: Hinweise und Antworten für das heutige Spiel</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/article.html">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hei?e Werkzeuge</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Einfach zu bedienender und kostenloser Code-Editor</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 chinesische Version" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 chinesische Version</h3>
</a>
<p>Chinesische Version, sehr einfach zu bedienen</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Senden Sie Studio 13.0.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Senden Sie Studio 13.0.1</h3>
</a>
<p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visuelle Webentwicklungstools</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac-Version" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac-Version</h3>
</a>
<p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/ai">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hei?e Themen</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/nytminicrosswordanswe" title="NYT Mini Kreuzwortr?tsel Antworten" class="phpgenera_Details_mainR4_bottom_title">NYT Mini Kreuzwortr?tsel Antworten</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>268</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>587</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/newyorktimesdailybrief" title="NYT -Verbindungen Hinweise und Antworten" class="phpgenera_Details_mainR4_bottom_title">NYT -Verbindungen Hinweise und Antworten</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>131</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>836</span>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/faq/zt">Mehr anzeigen</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main2">
<div id="wjcelcm34c" class="phpgenera_Details_mainL4">
<div id="wjcelcm34c" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainL4_info">
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796831408.html" title="CSS -Tutorial zum Erstellen von Ladespinner und Animationen" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS -Tutorial zum Erstellen von Ladespinner und Animationen" />
</a>
<a href="http://ipnx.cn/de/faq/1796831408.html" title="CSS -Tutorial zum Erstellen von Ladespinner und Animationen" class="phphistorical_Version2_mids_title">CSS -Tutorial zum Erstellen von Ladespinner und Animationen</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">Es gibt drei M?glichkeiten, einen CSS -Laderotator zu erstellen: 1. Verwenden Sie den Basisrotator der Grenzen, um eine einfache Animation durch HTML und CSS zu erreichen. 2. Verwenden Sie einen benutzerdefinierten Rotator mit mehreren Punkten, um den Sprungeffekt durch verschiedene Verz?gerungszeiten zu erreichen. 3. Fügen Sie einen Rotator in die Taste hinzu und wechseln Sie den Klassen über JavaScript, um den Ladestatus anzuzeigen. Jeder Ansatz betont die Bedeutung von Entwurfsdetails wie Farbe, Gr??e, Zug?nglichkeit und Leistungsoptimierung, um die Benutzererfahrung zu verbessern.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796831743.html" title="Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe" />
</a>
<a href="http://ipnx.cn/de/faq/1796831743.html" title="Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe" class="phphistorical_Version2_mids_title">Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span>
<p class="Articlelist_txts_p">Um mit CSS -Browser -Kompatibilit?t und Pr?fixproblemen umzugehen, müssen Sie die Unterschiede im Browser -Support verstehen und Anbieterpr?fixe vernünftigerweise verwenden. 1. Verstehen Sie gemeinsame Probleme wie Flexbox und Grid -Unterstützung, Position: Sticky Invaly und Animationsleistung ist unterschiedlich. 2. überprüfen Sie den Best?tigungsunterstützungsstatus von Caniuse. 3. Verwenden Sie korrekt -webkit-, -moz-, -ms-, -o- und andere Herstellerpr?fixe; 4. Es wird empfohlen, Autoprefixer zu verwenden, um automatisch Pr?fixe hinzuzufügen. 5. Postcss installieren und Browserlist konfigurieren, um den Zielbrowser anzugeben. 6. automatisch die Kompatibilit?t w?hrend des Baus bew?ltigen; 7. Modernizr -Erkennungsmerkmale k?nnen für alte Projekte verwendet werden; 8. Keine Notwendigkeit, die Konsistenz aller Browser zu verfolgen,</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796834918.html" title="Das Styling besuchte Links unterschiedlich mit CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Das Styling besuchte Links unterschiedlich mit CSS" />
</a>
<a href="http://ipnx.cn/de/faq/1796834918.html" title="Das Styling besuchte Links unterschiedlich mit CSS" class="phphistorical_Version2_mids_title">Das Styling besuchte Links unterschiedlich mit CSS</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span>
<p class="Articlelist_txts_p">Durch das Festlegen des von Ihnen besuchten Links k?nnen Sie die Benutzererfahrung verbessern, insbesondere in inhaltsintensiven Websites, um den Benutzern dabei zu helfen, sich besser zu navigieren. 1. Verwenden Sie CSS: Besuchte Pseudoklasse, um den Stil des besuchten Links wie Farb?nderungen zu definieren. 2. Beachten Sie, dass der Browser nur eine ?nderung einiger Attribute aufgrund von Datenschutzbeschr?nkungen erm?glicht. 3. Die Farbauswahl sollte mit dem Gesamtstil koordiniert werden, um abrupte abrupt zu werden. 4. Das mobile Terminal zeigt diesen Effekt m?glicherweise nicht an. Es wird empfohlen, ihn mit anderen visuellen Eingabeaufforderungen wie Icon -Auxiliary -Logos zu kombinieren.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796833145.html" title="Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad" />
</a>
<a href="http://ipnx.cn/de/faq/1796833145.html" title="Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad" class="phphistorical_Version2_mids_title">Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span>
<p class="Articlelist_txts_p">Verwenden Sie das Clip-Pfad-Attribut von CSS, um Elemente in benutzerdefinierte Formen wie Dreiecke, kreisf?rmige Kerben, Polygone usw. zu erregen, ohne sich auf Bilder oder SVGs zu verlassen. Zu den Vorteilen geh?ren: 1.. Unterstützt eine Vielzahl von Grundformen wie Circle, Ellipse, Polygon usw.; 2. reagierende Anpassung und anpassbar an mobile Terminals; 3. Einfach zu animation und kann mit Hover oder JavaScript kombiniert werden, um dynamische Effekte zu erzielen. 4. Es wirkt sich nicht auf den Layoutfluss aus und erfüllt nur den Anzeigebereich. H?ufige Verwendungen sind z. B. kreisf?rmiger Clip-Pfad: Kreis (50pxatcenter) und Dreieck-Clip-Pfad: Polygon (50%0%, 100 0%, 0 0%). Beachten</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796834914.html" title="Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?" />
</a>
<a href="http://ipnx.cn/de/faq/1796834914.html" title="Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?" class="phphistorical_Version2_mids_title">Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span>
<p class="Articlelist_txts_p">ThemaNDiffercesbetweenplay: Inline, Block, Andinline-Blockinhtml/CsSarelayoutBehavior, Spaceusage und Stylingcontrol.1.inlineelementsflowwithtext, Don'tstartonNewlines, Ignorewidth/HeighthThorchingstyhorching-/idelthorchorching/ardaldhordhortaliTalding/ardaldhordelthortex</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796829809.html" title="Was ist die CSS -Malen -API?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175156657090761.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist die CSS -Malen -API?" />
</a>
<a href="http://ipnx.cn/de/faq/1796829809.html" title="Was ist die CSS -Malen -API?" class="phphistorical_Version2_mids_title">Was ist die CSS -Malen -API?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 02:16 AM</span>
<p class="Articlelist_txts_p">ThecsspaintingapienablesDynamicimageGenerationIncsSusingjavaScript.1.DevelopersCreateApaintworkletClassClasswithapaint () Methode.2.TheyRegisteritviaRegisterPaint (). 3.TheCustonTfunctionDenusedincsincssproperties ?hnlich von Background-Image.ThisallowsfordyNamicvis</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796837251.html" title="Wie erstelle ich reaktionsschnelle Bilder mit CSS?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Wie erstelle ich reaktionsschnelle Bilder mit CSS?" />
</a>
<a href="http://ipnx.cn/de/faq/1796837251.html" title="Wie erstelle ich reaktionsschnelle Bilder mit CSS?" class="phphistorical_Version2_mids_title">Wie erstelle ich reaktionsschnelle Bilder mit CSS?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span>
<p class="Articlelist_txts_p">Um reaktionsschnelle Bilder mit CSS zu erstellen, kann es haupts?chlich durch die folgenden Methoden erreicht werden: 1. Verwenden Sie maximale Breite: 100% und H?he: Auto, damit das Bild an die Containerbreite anpasst und gleichzeitig den Anteil beibeh?lt. 2. Verwenden Sie die SRCSet- und Gr??enattribute von HTML, um die an verschiedenen Bildschirme angepassten Bildquellen intelligent zu laden. 3.. Verwenden Sie Objektfit und Objektposition, um die Bildaufbindung und Fokusanzeige zu steuern. Gemeinsam stellen diese Methoden sicher, dass die Bilder auf verschiedenen Ger?ten klar und wundersch?n pr?sentiert werden.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796829041.html" title="Wofür ist CSS und wofür steht es?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175147853176701.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Wofür ist CSS und wofür steht es?" />
</a>
<a href="http://ipnx.cn/de/faq/1796829041.html" title="Wofür ist CSS und wofür steht es?" class="phphistorical_Version2_mids_title">Wofür ist CSS und wofür steht es?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 03, 2025 am 01:48 AM</span>
<p class="Articlelist_txts_p">CSS, OrcascadingStylheets, iSthepartofwebdevelopmentThatControlSawebpage's VisualAppearance, einschlie?lich K?pfen, Schriftarten, Abstand und Layout</p>
</div>
</div>
<a href="http://ipnx.cn/de/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="wjcelcm34c" class="footer">
<div id="wjcelcm34c" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p>
</div>
<div id="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/de/about/us.html">über uns</a>
<a href="http://ipnx.cn/de/about/disclaimer.html">Haftungsausschluss</a>
<a href="http://ipnx.cn/de/update/article_0_1.html">Sitemap</a>
</div>
<div id="wjcelcm34c" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="uy8hm" class="pl_css_ganrao" style="display: none;"><mark id="uy8hm"><dl id="uy8hm"><noframes id="uy8hm"></noframes></dl></mark><strong id="uy8hm"><samp id="uy8hm"><dl id="uy8hm"></dl></samp></strong><th id="uy8hm"><small id="uy8hm"><pre id="uy8hm"><pre id="uy8hm"></pre></pre></small></th><dd id="uy8hm"><strong id="uy8hm"><ruby id="uy8hm"></ruby></strong></dd><tr id="uy8hm"></tr><pre id="uy8hm"><acronym id="uy8hm"><abbr id="uy8hm"></abbr></acronym></pre><nobr id="uy8hm"></nobr><xmp id="uy8hm"></xmp><label id="uy8hm"></label><sub id="uy8hm"></sub><tr id="uy8hm"><cite id="uy8hm"><noframes id="uy8hm"></noframes></cite></tr><rt id="uy8hm"></rt><ol id="uy8hm"></ol><object id="uy8hm"><dfn id="uy8hm"><meter id="uy8hm"><p id="uy8hm"></p></meter></dfn></object><xmp id="uy8hm"></xmp><strike id="uy8hm"></strike><legend id="uy8hm"><dfn id="uy8hm"><pre id="uy8hm"></pre></dfn></legend><abbr id="uy8hm"></abbr><pre id="uy8hm"><acronym id="uy8hm"><abbr id="uy8hm"></abbr></acronym></pre><cite id="uy8hm"></cite><s id="uy8hm"><u id="uy8hm"></u></s><pre id="uy8hm"></pre><form id="uy8hm"></form><tbody id="uy8hm"><ins id="uy8hm"><acronym id="uy8hm"></acronym></ins></tbody><samp id="uy8hm"></samp><option id="uy8hm"></option><tr id="uy8hm"></tr><center id="uy8hm"></center><delect id="uy8hm"><p id="uy8hm"></p></delect><sup id="uy8hm"><u id="uy8hm"><dd id="uy8hm"><strong id="uy8hm"></strong></dd></u></sup><legend id="uy8hm"><dfn id="uy8hm"><pre id="uy8hm"></pre></dfn></legend><tfoot id="uy8hm"></tfoot><dfn id="uy8hm"><menu id="uy8hm"></menu></dfn><tr id="uy8hm"><menu id="uy8hm"><option id="uy8hm"></option></menu></tr><dfn id="uy8hm"><strong id="uy8hm"><small id="uy8hm"></small></strong></dfn><dd id="uy8hm"></dd><dl id="uy8hm"><optgroup id="uy8hm"><delect id="uy8hm"><legend id="uy8hm"></legend></delect></optgroup></dl><blockquote id="uy8hm"></blockquote><option id="uy8hm"><thead id="uy8hm"><i id="uy8hm"></i></thead></option><div id="uy8hm"><var id="uy8hm"><rp id="uy8hm"><form id="uy8hm"></form></rp></var></div><object id="uy8hm"></object><wbr id="uy8hm"><strong id="uy8hm"></strong></wbr><rp id="uy8hm"></rp><tr id="uy8hm"><form id="uy8hm"><label id="uy8hm"><dfn id="uy8hm"></dfn></label></form></tr><tbody id="uy8hm"></tbody><abbr id="uy8hm"></abbr><acronym id="uy8hm"></acronym><big id="uy8hm"></big><cite id="uy8hm"></cite><acronym id="uy8hm"><tbody id="uy8hm"><nav id="uy8hm"><tt id="uy8hm"></tt></nav></tbody></acronym><wbr id="uy8hm"><nav id="uy8hm"><ul id="uy8hm"><thead id="uy8hm"></thead></ul></nav></wbr><fieldset id="uy8hm"><th id="uy8hm"></th></fieldset><td id="uy8hm"><label id="uy8hm"></label></td><label id="uy8hm"></label><tr id="uy8hm"><meter id="uy8hm"><cite id="uy8hm"></cite></meter></tr><ruby id="uy8hm"><tfoot id="uy8hm"><menu id="uy8hm"><option id="uy8hm"></option></menu></tfoot></ruby><menu id="uy8hm"><option id="uy8hm"><dd id="uy8hm"><pre id="uy8hm"></pre></dd></option></menu><address id="uy8hm"></address><optgroup id="uy8hm"><pre id="uy8hm"></pre></optgroup><td id="uy8hm"></td><strong id="uy8hm"><pre id="uy8hm"><td id="uy8hm"><label id="uy8hm"></label></td></pre></strong><center id="uy8hm"></center><span id="uy8hm"></span><delect id="uy8hm"></delect><em id="uy8hm"></em><dl id="uy8hm"></dl><rp id="uy8hm"><tbody id="uy8hm"><nav id="uy8hm"><button id="uy8hm"></button></nav></tbody></rp><span id="uy8hm"><input id="uy8hm"><small id="uy8hm"><td id="uy8hm"></td></small></input></span><meter id="uy8hm"><sup id="uy8hm"><noframes id="uy8hm"><thead id="uy8hm"></thead></noframes></sup></meter><progress id="uy8hm"></progress><thead id="uy8hm"></thead><thead id="uy8hm"><dl id="uy8hm"><optgroup id="uy8hm"></optgroup></dl></thead><samp id="uy8hm"></samp><strike id="uy8hm"></strike><th id="uy8hm"></th><strong id="uy8hm"><abbr id="uy8hm"><dfn id="uy8hm"></dfn></abbr></strong><acronym id="uy8hm"><tbody id="uy8hm"><nav id="uy8hm"><tt id="uy8hm"></tt></nav></tbody></acronym><tt id="uy8hm"></tt><strong id="uy8hm"><ul id="uy8hm"><thead id="uy8hm"></thead></ul></strong><strike id="uy8hm"></strike><font id="uy8hm"></font><table id="uy8hm"><acronym id="uy8hm"><wbr id="uy8hm"><strong id="uy8hm"></strong></wbr></acronym></table><dd id="uy8hm"></dd><strong id="uy8hm"></strong><big id="uy8hm"></big><pre id="uy8hm"></pre><strong id="uy8hm"></strong><s id="uy8hm"></s><optgroup id="uy8hm"><del id="uy8hm"><legend id="uy8hm"></legend></del></optgroup><center id="uy8hm"><i id="uy8hm"><tr id="uy8hm"></tr></i></center><i id="uy8hm"><dfn id="uy8hm"></dfn></i><dd id="uy8hm"><object id="uy8hm"><abbr id="uy8hm"><big id="uy8hm"></big></abbr></object></dd><tt id="uy8hm"><div id="uy8hm"></div></tt><abbr id="uy8hm"><samp id="uy8hm"><strike id="uy8hm"></strike></samp></abbr><wbr id="uy8hm"><strong id="uy8hm"></strong></wbr><menu id="uy8hm"></menu><fieldset id="uy8hm"></fieldset><pre id="uy8hm"><abbr id="uy8hm"><tfoot id="uy8hm"></tfoot></abbr></pre><dl id="uy8hm"><table id="uy8hm"></table></dl></div>
</html>
![\"Fundamentals](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617271945701.jpg\")
<\/p>\n\n![\"Fundamentals](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617272021543.jpg\")
<\/p>\n\n