HTML & CSS Zusammenfassung

Eine übersichtliche Zusammenfassung der wichtigsten Konzepte

HTML Grundlagen

Frage Antwort
Wie ist die Grundstruktur eines HTML-Dokuments? 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Titel</title>
  </head>
  <body>
    Inhalt
  </body>
</html>
Welche Überschriften-Ebenen gibt es und wie werden sie verwendet? - <h1>: Hauptüberschrift (nur einmal pro Seite)
- <h2> bis <h6>: Unterüberschriften
- Hierarchisch strukturieren
- Keine Ebenen überspringen
Wie erstellt man Formulare in HTML? Grundstruktur:
<form action="/submit" method="post">
- Label mit Input verbinden: <label for="id">
- Eingabefelder: <input type="text|email|password">
- Textbereiche: <textarea>
- Absenden: <button type="submit">
Welche HTML5 Input-Typen gibt es? - type="date": Datumsauswahl
- type="time": Zeitauswahl
- type="number": Zahlen
- type="range": Schieberegler
- type="color": Farbwähler
- type="tel": Telefonnummern
- type="email": E-Mail-Adressen
Wie strukturiert man Text in HTML? - <p>: Absätze
- <br>: Zeilenumbruch
- <hr>: Horizontale Linie
- <strong>: Wichtiger Text
- <em>: Betonter Text

HTML Fortgeschrittene Konzepte

Frage Antwort
Was sind semantische HTML-Elemente? Elemente mit bedeutungsvoller Struktur:
- <header>: Kopfbereich
- <nav>: Navigation
- <main>: Hauptinhalt
- <article>: Eigenständiger Inhalt
- <section>: Thematischer Abschnitt
- <aside>: Seitenleiste
- <footer>: Fußbereich
Wie erstellt man Tabellen? Struktur:
<table>
- <thead>: Tabellenkopf
- <tbody>: Tabelleninhalt
- <tr>: Tabellenzeile
- <th>: Kopfzelle
- <td>: Datenzelle
Wie bindet man Medien ein? Bilder: <img src="bild.jpg" alt="Beschreibung">
Video: <video src="video.mp4" controls></video>
Audio: <audio src="audio.mp3" controls></audio>
Mit Fallback:
<picture> für responsive Bilder
<source> für alternative Formate

CSS Grundlagen

Frage Antwort
Wie bindet man CSS ein? 1. Extern: <link rel="stylesheet" href="style.css">
2. Intern: <style>...</style>
3. Inline: style="..." Attribut
Was sind die wichtigsten CSS-Selektoren? - Element: p { }
- Klasse: .klasse { }
- ID: #id { }
- Verschachtelt: div p { }
- Direkte Kinder: div > p { }
Wie funktioniert das Box-Modell? Von innen nach außen:
1. content: Inhalt
2. padding: Innenabstand
3. border: Rahmen
4. margin: Außenabstand
box-sizing: border-box; für intuitivere Größenberechnung
Wie positioniert man Elemente? position:
- static: Standard
- relative: Relativ zur normalen Position
- absolute: Relativ zum nächsten positionierten Elternelement
- fixed: Relativ zum Viewport
- sticky: Scrollt mit bis zu einem Punkt
Wie erstellt man ein responsives Design? 1. Viewport Meta-Tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
2. Media Queries:
@media (max-width: 768px) { }
3. Flexible Grids:
display: grid; oder display: flex;
4. Flexible Bilder:
max-width: 100%;

CSS Fortgeschrittene Konzepte

Frage Antwort
Was ist Flexbox und wie verwendet man es? Flexbox ist ein Layout-Modell für eindimensionale Layouts:
- Container: display: flex;
- Hauptachse: flex-direction: row|column;
- Ausrichtung: justify-content: center|space-between;
- Kreuzachse: align-items: center|stretch;
- Flex Items: flex: grow shrink basis;
Was ist CSS Grid und wie verwendet man es? Grid ist ein Layout-Modell für zweidimensionale Layouts:
- Container: display: grid;
- Spalten: grid-template-columns: 1fr 2fr;
- Zeilen: grid-template-rows: auto;
- Abstände: gap: 20px;
- Platzierung: grid-area: 1 / 1 / 2 / 3;
Was sind CSS-Animationen? Keyframe-Animationen:
@keyframes name {
  from { property: value; }
  to { property: value; }
}
Anwendung:
animation: name duration timing-function;
Transitions:
transition: property duration timing-function;
Was sind CSS-Variablen? Definition im :root Scope:
:root { --main-color: #333; }
Verwendung:
color: var(--main-color);
Fallback:
color: var(--main-color, black);