Embedding HTML

Eine der wichtigsten Funktionen von Markdown ist die Möglichkeit, HTML-Code direkt einzubinden, um Ihren Dokumenten eine reichere Ausdrucksfähigkeit und Funktionserweiterungen wie Bilder, Videos und Tabellen zu verleihen.

Grundlegende HTML-Einbindung

Inline HTML-Elemente

Sie können HTML-Tags direkt in Markdown verwenden:

Dies ist ein Absatz mit <strong>fettem Text</strong> und <em>kursivem Text</em>.

Sie können <code>Inline-Code</code> oder <mark>hervorgehobenen Text</mark> verwenden.

Hier ist ein <a href="https://www.markdownlang.com" target="_blank">externe Link</a>.

Gerenderte Ausgabe:

Dies ist ein Absatz mit fettem Text und kursivem Text.

Sie können Inline-Code oder hervorgehobenen Text verwenden.

Hier ist ein externe Link.

Block-level HTML-Elemente

<div class="alert alert-info">
  <h4>Info</h4>
  <p>Dies ist eine Info-Warnmeldung, die mit HTML erstellt wurde.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>Dies ist eine zusätzlich gestylte Blockquote.</p>
  <footer>—— Quelle</footer>
</blockquote>

Gerenderte Ausgabe:

Info

Dies ist eine Info-Warnmeldung, die mit HTML erstellt wurde.

Dies ist eine zusätzlich gestylte Blockquote.

—— Quelle

Allgemeine HTML-Erweiterungen

Bildverbesserungen

Bildgrößensteuerung

<!-- Verwenden Sie HTML, um die Bildgröße genau zu steuern -->
<img src="example.jpg" alt="Beispielbild" width="300" height="200">

<!-- Responsive Bild -->
<img src="example.jpg" alt="Responsives Bild" style="max-width: 100%; height: auto;">

<!-- Bildausrichtung -->
<div align="center">
  <img src="example.jpg" alt="Zentriertes Bild" width="400">
</div>

Bildgalerie

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="Bild 1" style="width: 200px;">
  <img src="img2.jpg" alt="Bild 2" style="width: 200px;">
  <img src="img3.jpg" alt="Bild 3" style="width: 200px;">
</div>

<!-- Bildraster -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="Bild 1" style="width: 100%;">
  <img src="img2.jpg" alt="Bild 2" style="width: 100%;">
  <img src="img3.jpg" alt="Bild 3" style="width: 100%;">
  <img src="img4.jpg" alt="Bild 4" style="width: 100%;">
</div>

Video- und Medien-Einbindung

Video einbinden

<!-- YouTube-Video -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube-Video-Player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Bilibili-Video -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- HTML5-Video -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

Audio einbinden

<!-- HTML5-Audio -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Ihr Browser unterstützt das Audio-Element nicht.
</audio>

<!-- NetEase Cloud Music -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

Tabellenverbesserungen

Komplexe Tabellenstrukturen

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Produkt</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Verkaufsdaten</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Gesamterlös</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Produkt A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Produkt B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>

Gerenderte Ausgabe:

Produkt	Verkaufsdaten		Gesamterlös
	Q1	Q2
Produkt A	¥100,000	¥120,000	¥220,000
Produkt B	¥80,000	¥90,000	¥170,000

Formulare und interaktive Elemente

Grundlegende Formularelemente

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">Name:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">E-Mail:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">Nachricht:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    Absenden
  </button>
</form>

Interaktive Elemente

<!-- Collapsible content -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Klicken Sie, um weitere Details zu erweitern</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>Dies ist der detaillierte Inhalt des eingeklappten Abschnitts.</p>
    <p>Sie können hier jede HTML-Inhaltsquelle einfügen.</p>
  </div>
</details>

<!-- Fortschrittsbalken -->
<div style="margin: 1rem 0;">
  <label>Projektfortschritt:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- Sternenbewertung -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Gerenderte Ausgabe:

Klicken Sie, um weitere Details zu erweitern

Dies ist der detaillierte Inhalt des eingeklappten Abschnitts.

Sie können hier jede HTML-Inhaltsquelle einfügen.

Projektfortschritt:32%32%

★★★★☆

Layout und Styling

Flexbox-Layout

<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">Titel</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">Dies ist ein Beschreibungstext</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Aktion
    </button>
  </div>
</div>

<!-- Kartenlayout -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Karte 1</h5>
    <p>Karteninhaltsbeschreibung</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Karte 2</h5>
    <p>Karteninhaltsbeschreibung</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Karte 3</h5>
    <p>Karteninhaltsbeschreibung</p>
  </div>
</div>

Rasterlayout

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>Funktion 1</h6>
    <p>Funktionsbeschreibung</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Funktion 2</h6>
    <p>Funktionsbeschreibung</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Funktion 3</h6>
    <p>Funktionsbeschreibung</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Funktion 4</h6>
    <p>Funktionsbeschreibung</p>
  </div>
</div>

Warnmeldungen und Warnungen

Unterschiedliche Warnmeldungstypen

<!-- Info-Warnmeldung -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Info:</strong> Dies ist eine Info-Warnmeldung.
</div>

<!-- Erfolgswarnmeldung -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Erfolg:</strong> Die Operation wurde erfolgreich abgeschlossen.
</div>

<!-- Warnmeldung -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Warnung:</strong> Bitte achten Sie auf diese wichtige Ankündigung.
</div>

<!-- Fehlerwarnmeldung -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Fehler:</strong> Ein Fehler ist aufgetreten.
</div>

Gerenderte Ausgabe:

💡 Info: Dies ist eine Info-Warnmeldung.

✅ Erfolg: Die Operation wurde erfolgreich abgeschlossen.

⚠️ Warnung: Bitte achten Sie auf diese wichtige Ankündigung.

❌ Fehler: Ein Fehler ist aufgetreten.

Einbindung von Drittanbieter-Inhalten

Soziale Medien

<!-- Twitter-Embed -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Dies ist ein Tweet-Inhalt...</p>
  <a href="https://twitter.com/user/status/123456789">Tweet-Link</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Weibo-Embed -->
<iframe width="100%" height="500" class="share_self" 
        frameborder="0" scrolling="no" 
        src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=500&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1234567890&verifier=a1b2c3d4">
</iframe>

Online-Dienste

<!-- CodePen-Embed -->
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Beispiel" 
        src="https://codepen.io/user/embed/EXAMPLE?default-tab=html%2Cresult" 
        frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

<!-- JSFiddle-Embed -->
<iframe width="100%" height="300" 
        src="//jsfiddle.net/user/example/embedded/js,html,css,result/" 
        allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>

<!-- Google Maps-Embed -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.0!2d116.4074!3d39.9042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDU0JzE1LjEiTiAxMTbCsDI0JzI2LjYiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890" 
        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

Benutzerdefinierte Komponenten

Tags und Abzeichen

<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  Frontend
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>

Gerenderte Ausgabe:

Frontend React JavaScript

Zeitachse

<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Dezember 2023</h5>
    <p style="margin: 0;">Projekt gestartet, Anforderungsanalyse und Technologieauswahl abgeschlossen.</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Januar 2024</h5>
    <p style="margin: 0;">Kernfunktionen entwickelt, Eingangstestphase abgeschlossen.</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Februar 2024</h5>
    <p style="margin: 0;">Projekt gestartet und Werbung begann.</p>
  </div>
</div>

Hinweise und Einschränkungen

HTML-Sicherheit

<!-- ✅ Sicherer HTML -->
<div style="color: blue;">Sicherer Stil</div>
<strong>Fettem Text</strong>
<em>Kursivem Text</em>

<!-- ❌ Potenziell gefilterter Inhalt -->
<script>alert('Unsicherer Skript')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

Markdown-Parser-Kompatibilität

Unterschiedliche Markdown-Parser haben unterschiedliche HTML-Unterstützungsebenen:

Parser	HTML-Unterstützung	Einschränkungen
GitHub	Teilweise	Skripte und gefährliche Tags gefiltert
GitLab	Teilweise	Sicherheitsfilterung
VitePress	Vollständig	Abhängig von der Konfiguration
Jekyll	Vollständig	Konfigurierbar
Hugo	Teilweise	Muss aktiviert werden

Best Practice-Empfehlungen

✅ Empfohlen:
1. Semantische HTML-Tags verwenden
2. Angemessene Stilverbesserungen hinzufügen
3. Inhaltssicherheit gewährleisten
4. Code sauber und wartbar halten

❌ Vermeiden:
1. Übermäßiges Komplex-HTML verwenden
2. Unsichere Skripte einbinden
3. Mobilanpassung ignorieren
4. Veraltete Tags verwenden

Praktische Szenarien

1. Produktdokumentation

<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 Produktfunktionen</h2>
    <p style="margin: 0; opacity: 0.9;">Erleben Sie unsere neuen Funktionen und Verbesserungen</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      Mehr erfahren
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ Hohe Leistung</h4>
    <p style="color: #666; line-height: 1.6;">Optimierte Algorithmen und Architektur für maximale Leistung.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">�� Sicher und Zuverlässig</h4>
    <p style="color: #666; line-height: 1.6;">Unternehmensklasse Sicherheit, verschlüsselte Datenübertragung und -speicherung.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 Einfach zu Bedienen</h4>
    <p style="color: #666; line-height: 1.6;">Intuitive Benutzeroberfläche und vereinfachte Arbeitsabläufe.</p>
  </div>
  
</div>

2. API-Dokumentation

<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">Benutzer erstellen</h4>
  <p style="color: #6c757d; margin: 0;">Einen neuen Benutzerkonto erstellen</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Anfrageparameter
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Parameter</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Typ</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Erforderlich</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Beschreibung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">Benutzername</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">E-Mail-Adresse</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. Team-Einführung

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 Unser Team</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    
    <div style="text-align: center;">
      <img src="avatar1.jpg" alt="Zhang San" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Zhang San</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">Frontend-Entwickler</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Konzentriert sich auf React und Vue-Entwicklung, begeistert von der Benutzeroberflächenentwicklung.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
    <div style="text-align: center;">
      <img src="avatar2.jpg" alt="Li Si" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Li Si</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">Backend-Entwickler</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Professionell in Node.js und Python, konzentriert auf Systemarchitekturdesign.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
  </div>
</div>

Verwandte Syntax

• Grundlegende Syntax-Übersicht - Markdown-Grundlagen
• Erweiterte Syntax - Markdown-Erweiterungen
• Best Practices - Schreibempfehlungen

Tools und Ressourcen

HTML/CSS-Frameworks

• Bootstrap: Schnelle Prototyping und responsives Design
• Tailwind CSS: Utility-first CSS-Framework
• Bulma: Modernes CSS-Framework
• Foundation: Responsives Frontend-Framework

Online-Tools

• CodePen: Online HTML/CSS/JS-Editor
• JSFiddle: Code-Snippet-Test
• CSS Grid Generator: CSS-Rasterlayout-Generator
• Flexbox Froggy: Flexbox-Lernspiel

Browser-Entwicklertools

• Chrome DevTools: Element-Inspektion und Stil-Debugging
• Firefox Developer Tools: Raster- und Flexbox-Debugging
• Safari Web Inspector: macOS/iOS-Debugging
• Edge DevTools: Barrierefreiheitsprüfung

Denken Sie daran, dass die Einbindung von HTML mächtig ist, aber verwenden Sie es in Moderation, um Ihre Dokumentation lesbar und wartbar zu halten.