Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
HTML-Spickzettel für Syntax und häufige Aufgaben
Bei der Verwendung vonHTML kann es sehr hilfreich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie HTML-Tags richtig verwendet und angewandt werden. MDN bietet Ihnen ausführlicheHTML-Referenzdokumentation sowie eine tiefgehende instruktiveReihe von HTML-Leitfäden. In vielen Fällen benötigen wir jedoch nur einige schnelle Hinweise während der Arbeit. Das ist der Zweck des Spickzettels – um Ihnen schnelle, genaue und gebrauchsfertige Code-Beispiele für gängige Verwendungen zu geben.
Hinweis:HTML-Tags müssen für ihren semantischen Wert und nicht für ihr Aussehen verwendet werden. Es ist immer möglich, das Aussehen eines bestimmten Tags vollständig mitCSS zu ändern. Nehmen Sie sich beim Einsatz von HTML daher die Zeit, sich auf die Bedeutung und nicht auf das Aussehen zu konzentrieren.
Inline-Elemente
Ein "Element" ist ein einzelner Teil einer Webseite. Einige Elemente sind groß und halten kleinere Elemente, wie Container. Einige Elemente sind klein und sind in größere "verschachtelt". Standardmäßig erscheinen "Inline-Elemente" nebeneinander auf einer Webseite. Sie beanspruchen nur so viel Breite, wie sie auf einer Seite benötigen, und passen horizontal zusammen wie Wörter in einem Satz oder Bücher, die nebeneinander in einem Regal stehen. Alle Inline-Elemente können innerhalb des<body>-Elements platziert werden.
| Verwendung | Element | Beispiel |
|---|---|---|
| Ein Link | <a> | html |
| Ein Bild | <img> | html |
| Ein Inline-Container | <span> | html |
| Text betonen | <em> | html |
| Kursiver Text | <i> | html |
| Fetter Text | <b> | html |
| Wichtiger Text | <strong> | html |
| Text hervorheben | <mark> | html |
| Text durchstreichen | <s> | html |
| Tiefgestellt | <sub> | html |
| Kleiner Text | <small> | html |
| Adresse | <address> | html |
| Textuelles Zitat | <cite> | html |
| Hochgestellt | <sup> | html |
| Inline-Zitat | <q> | html |
| Ein Zeilenumbruch | <br> | html |
| Ein möglicher Zeilenumbruch | <wbr> | html |
| Datum | <time> | html |
| Codeformat | <code> | html |
| Audio | <audio> | html |
| Video | <video> | html |
Block-Elemente
"Block-Elemente" hingegen beanspruchen die gesamte Breite einer Webseite. Sie nehmen auch eine volle Zeile einer Webseite ein; sie passen nicht nebeneinander. Stattdessen stapeln sie sich wie Absätze in einem Aufsatz oder Bauklötze in einem Turm.
Hinweis:Da dieser Spickzettel auf wenige Elemente begrenzt ist, die spezifische Strukturen darstellen oder besondere Semantik besitzen, ist dasdiv Element bewusst nicht enthalten – da dasdiv Element nichts darstellt und keine speziellen Semantiken hat.
| Verwendung | Element | Beispiel |
|---|---|---|
| Ein einfacher Absatz | <p> | html |
| Ein erweitertes Zitat | <blockquote> | html |
| Zusätzliche Informationen | <details> | html |
| Eine ungeordnete Liste | <ul> | html |
| Eine geordnete Liste | <ol> | html |
| Eine Definitionsliste | <dl> | html |
| Eine horizontale Linie | <hr> | html |
| Textüberschrift | <h1>-<h6> | html |