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="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/de/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://www.miracleart.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://www.miracleart.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://www.miracleart.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://www.miracleart.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://www.miracleart.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://www.miracleart.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://www.miracleart.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://www.miracleart.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" 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="377j5v51b" class="head_right">
<div id="377j5v51b" 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="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" 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="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</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="377j5v51b" 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="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.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="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Grundlagen von HTML und CSS</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.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="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/de/member/1468489.html" class="author_name">Linda Hamilton</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 06, 2025 pm 10:11 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" 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="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" 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="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.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="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/article.html">Mehr anzeigen</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/ai">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.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="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/article.html">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/ai">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8637</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/java-tutorial" title="Java-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1727</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1442</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/faq/zt">Mehr anzeigen</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796823628.html" title="Was ist 'Render-Blocking-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/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist 'Render-Blocking-CSS'?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796823628.html" title="Was ist 'Render-Blocking-CSS'?" class="phphistorical_Version2_mids_title">Was ist 'Render-Blocking-CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS -Bl?cke Seitenrenderung, da Browser inline und externe CSS standardm??ig als wichtige Ressourcen anzeigen, insbesondere mit importierten Stylesheets, Header gro?er Mengen an Inline -CSS und nicht optimierten Medienfragestilen. 1. extrahieren kritische CSS und einbetten Sie es in HTML ein; 2. Verz?gerung des Ladens nichtkritischer CSS durch JavaScript; 3.. Verwenden Sie Medienattribute, um das Laden wie Druckstile zu optimieren. 4. Komprimieren und verschmelzen CSS, um Anfragen zu reduzieren. Es wird empfohlen, Tools zum Extrahieren von Schlüssel -CSS zu verwenden, REL = "Vorspannung" zu kombinieren, und verwenden Sie die asynchrone Belastung und verwenden Sie die Medienverz?gerungsladeverletzung, um eine überm??ige Aufteilung und eine komplexe Skriptsteuerung zu vermeiden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796822133.html" title="Externe vs. interne CSS: Was ist der beste Ansatz?" 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/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Externe vs. interne CSS: Was ist der beste Ansatz?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796822133.html" title="Externe vs. interne CSS: Was ist der beste Ansatz?" class="phphistorical_Version2_mids_title">Externe vs. interne CSS: Was ist der beste Ansatz?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">ThebestApproachforcssDependsonTheProject'Sspecificneeds.forlargerProjects, externalcssisbetterDuetomaintainability;</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821588.html" title="Muss mein CSS im unteren Fall sein?" 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/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Muss mein CSS im unteren Fall sein?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821588.html" title="Muss mein CSS im unteren Fall sein?" class="phphistorical_Version2_mids_title">Muss mein CSS im unteren Fall sein?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">Nein, cssdoesnothavetobeinlowercase.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821998.html" title="CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt" 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/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821998.html" title="CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt" class="phphistorical_Version2_mids_title">CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">Csssmostlycase-unempfindlich, buturlsandfontfamilynamesarecase-sensitiv.1) Eigenschaften und ValueslikeColor: rot; sensitiv.2) URLSMUTMATTHESERVER'SCASE, z.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796828180.html" title="Was ist Autoprefixer und wie funktioniert 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/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist Autoprefixer und wie funktioniert es?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796828180.html" title="Was ist Autoprefixer und wie funktioniert es?" class="phphistorical_Version2_mids_title">Was ist Autoprefixer und wie funktioniert es?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">AutoPrefixer ist ein Tool, das die Pr?fixe von Anbietern automatisch zu CSS -Attributen basierend auf dem Zielbrowserbereich hinzufügt. 1. Es l?st das Problem, die Pr?fixe mit Fehlern manuell aufrechtzuerhalten. 2. Arbeiten Sie das POSTCSS-Plug-in-Formular durch, analysieren Sie CSS, analysieren Sie Attribute, die vorangestellt werden müssen, und generieren Sie den Code gem?? Konfiguration. 3.. 4. Notizen enthalten nicht manuelles Hinzufügen von Pr?fixen, Konfigurationsaktualisierungen, Pr?fixe nicht alle Attribute, und es wird empfohlen, sie mit dem Pr?prozessor zu verwenden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821606.html" title="Was sind CSS -Z?hler?" 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/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sind CSS -Z?hler?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821606.html" title="Was sind CSS -Z?hler?" class="phphistorical_Version2_mids_title">Was sind CSS -Z?hler?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">CSSCOUNTERSCANATOMATIONSNUMBERSEctions und.1) usecounter-resettoinitialize, counter-IncrementtoIncrease, und Counter () orcounters () todisplayValues.2) kombinierte withjavascriptfordynamiccontentToEsSureAccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821580.html" title="CSS: Wann ist der Fall wichtig (und wann nicht)?" 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/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: Wann ist der Fall wichtig (und wann nicht)?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821580.html" title="CSS: Wann ist der Fall wichtig (und wann nicht)?" class="phphistorical_Version2_mids_title">CSS: Wann ist der Fall wichtig (und wann nicht)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">In CSS sind Selektor- und Attributnamen fallempfindlich, w?hrend Werte, Namen, URLs und benutzerdefinierte Attribute fallempfindlich sind. 1. Die Auswahl- und Attributnamen sind unempfindlich, z. B. Hintergrundfarbe und Hintergrundfarbe sind gleich. 2. Die hexadezimale Farbe im Wert ist fallempfindlich, aber die benannte Farbe ist fallempfindlich, wie rot und rot ist ungültig. 3. Die URLs sind fallsempfindlich und k?nnen zu Ladeproblemen von Dateien führen. 4. Benutzerdefinierte Eigenschaften (Variablen) sind fallempfindlich und Sie müssen auf die Konsistenz des Falles bei der Verwendung achten.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821622.html" title="Fallempfindlichkeit in CSS: Selektoren, Eigenschaften und Werte erl?utert" 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/175026469053848.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Fallempfindlichkeit in CSS: Selektoren, Eigenschaften und Werte erl?utert" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821622.html" title="Fallempfindlichkeit in CSS: Selektoren, Eigenschaften und Werte erl?utert" class="phphistorical_Version2_mids_title">Fallempfindlichkeit in CSS: Selektoren, Eigenschaften und Werte erl?utert</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:38 AM</span>
<p class="Articlelist_txts_p">CsSelectorsandPropertyNamesArecase-inemsitiv, w?hrend Valuescanbecase-sensibiledPendingoncontext.1) Selectors wie div'and'div'areequivalent.2) PropertieSuchas'back-background-color'and'background-Color'arteated-theam.3) VactieLKasecasecasecasecasecase-Ensens</p>
</div>
</div>
<a href="http://www.miracleart.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="377j5v51b" class="footer">
<div id="377j5v51b" 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="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/de/about/us.html">über uns</a>
<a href="http://www.miracleart.cn/de/about/disclaimer.html">Haftungsausschluss</a>
<a href="http://www.miracleart.cn/de/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" 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://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</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="qecec" class="pl_css_ganrao" style="display: none;"><xmp id="qecec"><strike id="qecec"><s id="qecec"></s></strike></xmp><optgroup id="qecec"><abbr id="qecec"><sup id="qecec"></sup></abbr></optgroup><abbr id="qecec"></abbr><tfoot id="qecec"><input id="qecec"><small id="qecec"></small></input></tfoot><nav id="qecec"></nav><noframes id="qecec"></noframes><fieldset id="qecec"></fieldset><ul id="qecec"><acronym id="qecec"><dd id="qecec"></dd></acronym></ul><delect id="qecec"></delect><code id="qecec"><table id="qecec"><tr id="qecec"></tr></table></code><noframes id="qecec"></noframes><code id="qecec"></code><fieldset id="qecec"><table id="qecec"><abbr id="qecec"></abbr></table></fieldset><object id="qecec"></object><tbody id="qecec"></tbody><tfoot id="qecec"><object id="qecec"><small id="qecec"></small></object></tfoot><button id="qecec"></button><tr id="qecec"></tr><code id="qecec"><em id="qecec"><delect id="qecec"></delect></em></code><s id="qecec"></s><ul id="qecec"></ul><center id="qecec"></center><tbody id="qecec"></tbody><kbd id="qecec"></kbd><del id="qecec"></del><object id="qecec"></object><ul id="qecec"><pre id="qecec"><wbr id="qecec"></wbr></pre></ul><li id="qecec"></li><option id="qecec"></option><kbd id="qecec"><center id="qecec"><wbr id="qecec"></wbr></center></kbd><cite id="qecec"><nav id="qecec"></nav></cite><tfoot id="qecec"></tfoot><acronym id="qecec"></acronym><em id="qecec"></em><xmp id="qecec"></xmp><dfn id="qecec"><center id="qecec"><fieldset id="qecec"></fieldset></center></dfn><small id="qecec"></small><strike id="qecec"></strike><blockquote id="qecec"></blockquote><th id="qecec"><menu id="qecec"></menu></th><object id="qecec"></object><optgroup id="qecec"></optgroup><optgroup id="qecec"><abbr id="qecec"><pre id="qecec"></pre></abbr></optgroup><source id="qecec"><small id="qecec"><abbr id="qecec"></abbr></small></source><tbody id="qecec"><button id="qecec"><ul id="qecec"></ul></button></tbody><tfoot id="qecec"></tfoot><tr id="qecec"></tr><delect id="qecec"></delect><button id="qecec"></button><noframes id="qecec"></noframes><center id="qecec"></center><ul id="qecec"></ul><object id="qecec"></object><object id="qecec"><tbody id="qecec"><abbr id="qecec"></abbr></tbody></object><tr id="qecec"></tr><dd id="qecec"></dd><nav id="qecec"></nav><menu id="qecec"></menu><pre id="qecec"><wbr id="qecec"><cite id="qecec"></cite></wbr></pre><tfoot id="qecec"></tfoot><samp id="qecec"></samp><dd id="qecec"></dd><th id="qecec"></th><kbd id="qecec"><pre id="qecec"><xmp id="qecec"></xmp></pre></kbd><dl id="qecec"><object id="qecec"><tbody id="qecec"></tbody></object></dl><tbody id="qecec"></tbody><th id="qecec"></th><input id="qecec"></input><samp id="qecec"></samp><th id="qecec"><menu id="qecec"></menu></th><dfn id="qecec"><td id="qecec"><code id="qecec"></code></td></dfn><abbr id="qecec"></abbr><nav id="qecec"></nav><tbody id="qecec"><pre id="qecec"><blockquote id="qecec"></blockquote></pre></tbody><td id="qecec"></td><dfn id="qecec"><center id="qecec"><dl id="qecec"></dl></center></dfn><source id="qecec"></source><cite id="qecec"></cite><noframes id="qecec"></noframes><bdo id="qecec"></bdo><menu id="qecec"></menu><sup id="qecec"></sup><tfoot id="qecec"></tfoot><dl id="qecec"><optgroup id="qecec"><small id="qecec"></small></optgroup></dl><td id="qecec"><fieldset id="qecec"><optgroup id="qecec"></optgroup></fieldset></td><fieldset id="qecec"></fieldset><optgroup id="qecec"><abbr id="qecec"><pre id="qecec"></pre></abbr></optgroup><menu id="qecec"></menu><wbr id="qecec"><strong id="qecec"><abbr id="qecec"></abbr></strong></wbr><fieldset id="qecec"><optgroup id="qecec"><abbr id="qecec"></abbr></optgroup></fieldset><bdo id="qecec"></bdo><s id="qecec"><bdo id="qecec"><em id="qecec"></em></bdo></s><button id="qecec"><ul id="qecec"><tfoot id="qecec"></tfoot></ul></button><td id="qecec"><fieldset id="qecec"><table id="qecec"></table></fieldset></td><del id="qecec"></del><blockquote id="qecec"><tfoot id="qecec"><object id="qecec"></object></tfoot></blockquote><ul id="qecec"></ul><rt id="qecec"><fieldset id="qecec"><table id="qecec"></table></fieldset></rt><em id="qecec"></em><strong id="qecec"></strong><em id="qecec"></em><center id="qecec"><fieldset id="qecec"><optgroup id="qecec"></optgroup></fieldset></center><bdo id="qecec"></bdo><menu id="qecec"></menu><button id="qecec"></button><center id="qecec"><wbr id="qecec"><th id="qecec"></th></wbr></center><small id="qecec"></small><rt id="qecec"></rt><rt id="qecec"><code id="qecec"><table id="qecec"></table></code></rt><tr id="qecec"></tr><tbody id="qecec"></tbody><kbd id="qecec"></kbd><delect id="qecec"></delect><th id="qecec"><menu id="qecec"></menu></th><xmp id="qecec"></xmp><xmp id="qecec"></xmp><th id="qecec"></th><dl id="qecec"></dl><button id="qecec"><samp id="qecec"><pre id="qecec"></pre></samp></button><object id="qecec"><abbr id="qecec"><button id="qecec"></button></abbr></object><strike id="qecec"></strike><td id="qecec"></td><th id="qecec"><menu id="qecec"></menu></th><dl id="qecec"></dl><samp id="qecec"></samp><center id="qecec"></center><button id="qecec"></button><dfn id="qecec"></dfn><wbr id="qecec"><cite id="qecec"><menu id="qecec"></menu></cite></wbr><source id="qecec"></source><strike id="qecec"></strike><dd id="qecec"><th id="qecec"><nav id="qecec"></nav></th></dd><kbd id="qecec"><center id="qecec"><dd id="qecec"></dd></center></kbd><blockquote id="qecec"><dl id="qecec"><source id="qecec"></source></dl></blockquote><pre id="qecec"></pre><bdo id="qecec"></bdo><acronym id="qecec"><dd id="qecec"><th id="qecec"></th></dd></acronym><code id="qecec"><em id="qecec"><del id="qecec"></del></em></code><noframes id="qecec"></noframes><menu id="qecec"></menu><rt id="qecec"></rt><abbr id="qecec"></abbr><input id="qecec"></input><menu id="qecec"></menu><object id="qecec"></object><input id="qecec"></input><pre id="qecec"></pre><s id="qecec"></s></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