HTML Cheatsheet - Oliver Staehli

HTML Cheatsheet
HTML-Grundgerüst
<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>
<meta charset=“utf-8“ />
<style></style>
<script></script>
</head>
<body>

</body>
</html>
<figure> *
Abbildung, enthält ein Bild <img> und Unterschrift
<figcaption>
<footer>
Fusszeile eines Abschnitts oder einer Seite
<form>
Formular
Action=“#“
enctype=“multipart/form-data“ (Upload)
<h1> - <h6>
Überschriften 1 bis 6 (heading)
h1=grösste, h6=kleinste
<header> *
Kopfbereich eines Textes oder einer Seite (nicht verwechseln
mit <head>)
<hgroup> *
Gruppiert die Tags <h1> bis <h6>, wenn diese
zusammenstehen
<hr />
Trennliie (horizontal rule)
<legend>
Überschrift einer Gruppe Formularelemente <fieldset>
<li>
Listenpunt einer ungeordneten <ul> oder geordneten Liste
<ol> (list item)
Document Type Definition (DTD)
<head></head> wird immer zuerst vom Browser geladen!

Meta-Tags
value=“5“
<meta name=“description“ content=““ />
Beschreibung des Seiteninhalts, max. 256 Zeichen oder 25
Wörter
<main> *
Hapt-Inhaltsbereich
<meta name=“author “ content=““ />
Name des Verantwortlichen
<map>
Imagemap
<meta name=“keywords“ content=““ />
Stichworte zum Inhalt, wird heute kaum mehr verwendet
<nav>*
<meta charset=“utf-8“ />
Zeichenkodierung der Seite
Kennzeichnet die darin enthaltenen Links als
Navigationselemente
<meta http-equiv=“refresh“
content=“5;url=http://xyz.com“ />
Weiterleitung (5= Anzeigedauer in Sekunden vor Weiterleitung)
<ol>
Geordnete Liste (ordered list)
type=“A/a/I/i“ start=“5“
<p>
Absatz (paragraph)
Id=“ “ (für links)
<meta name=“viewport“ content=“width=device-width,
initial-scale=1.0 />
Grösse und Skalierung des Viewports
<pre>
Vorformatierter Text, Zeilenumbrüche, Leerzeichen und
Tabulatoren werden angezeigt
<section> *
Abschnitt eines Textes
Block-Elemente
<summary> *
Überschrift innerhalb eines <details>-Tags
<article>*
Unabhängigier Abschnitt (z.B: Blog Eintrag)
<ul>
Ungeordnete Liste (unordered list)
<aside> *
Randbemerkung, Sidebar
* = HTML5
<blockquote>
Langes Zitat
<body>
Seiteninhalt
<dd>
Beschreibung des Elements <dt> in einer Definitionsliste
<dl> (definition data)
<details> *
Ausklapp-Text
open=“open“
<div>
Abschnitt, Bereich (division) zur Formatierung mit CSS
Id=“ “ class=“ “
<dl>
Definitionsliste (definition list)
<dt>
Element einer Definitionsliste (definition term)
<fieldset>
Gruppierung zusammengehöriger Formularelemente
<figcaption> *
Bildunterschrift innerhalb des <figure>-Elements
© oliver-staehli.ch
name=“ “
HTML Cheatsheet
Inline-Elemente
<option>
Option einer Selectbox
<output> *
Ergebnis einer Berechnung
<progress> *
Darstellung des Fortschritts eines Vorgangs
<q>
Kurzes Zitat (quote)
<s>
Aussage, die nicht mehr korrekt ist (striketrough)
<small>
Kleingedrucktes, weniger wichtiger Text
<select>
Drop-down-Liste, Selectbox
size=“4“ multiple=“multiple“
<source /> *
Quellenangabe eines <audio>- oder <video>-Tags
src=“file.mp4“ type=“video/mp4“
<span>
Gruppiert einen Textbereich, um ihn mit CSS zu
formatieren
Id=“ “ class=“ “
Zeichenfläche
<strong>
Stark betonter Text (fett)
<cite>
Titel eines Werkes, das im Text zitiert wird
<sub>
Tiefgestellter Text (subscript)
<code>
Quelltext
<sup>
Hochgestellter Text (superscript)
<del>
Gelöschter, durchgestrichener Text (deleted)
<textaera>
Mehrzeiliges Texteingabefeld
<dfn>
Definition, aber nicht innerhalb einer Liste
<command> *
Definiert Radiobuttons, Checkboxen, Buttons als Befehle,
kann innerhalb eines <menu>-Elements stehen
<time> *
Einbindung von Videodateien
<var>
Kennzeichnet Text als Variable
<video> *
Einbindung einer Videodatei
<wbr> *
Optionaler Wortumbruch (word break opportunity)
<a>
Link (anchor) - kann in HTML5 um Block-Elemente
herum gesetzt werden
href=“url“
target=“_blank/_self/_parent/_top“
<abbr>
Abkürzung (appreviation)
<address>
Kontaktinformation des Autors
<area />
Bereich einer Imagemap
shape=“rect/circle/poly“ coords=“ “ href=“ “
<audio> *
Einbindung einer Audiodatei
controls autoplay loop
<b>
Fetter Text (bold)
<br />
Zeilenumbruch (break)
<button>
Schaltfläche
<canvas> *
<datalist> *
Auswahlliste möglicher Werte eines <input>-Elements
<em>
Betonter Text (emphasized)
<embed> *
Einbindung externer Dateien (Plug-ins)
<i>
Kursiver Text (italic)
<iframe>
Fenster im Fenster (inline frame)
src=“url“ width=“ “ height=“ “
<img />
Bild (image)
src=“url“ alt=“ “ title=“ “
<input />
Formular-Eingabefeld
name=“ “ id=“ “ value=“ “
Type=“text/password/search/checkbox/radio/file/button/ placeholder=“ “ autofocus=“autofocus“
reset/submit/image/hidden/email/url/tel/number/range/ tabindex=“1“ disabled=“disabled“
date/month/week/tme/datetime/color “
<ins>
Nachträglich eingefügter Text (insert)
<kbd>
Definiert Text als Tastatureingabe (keyboard)
<label>
Beschriftung eines Formularelements
<link />
Verknüpfung einer externen Ressource (z.B CSS)
<mark> *
Markiert Textpassagen wie mit einem Textmarker gelb
<meter> *
Mess-Skala
<object>
Einbindung externer Dateien (Flash, Java-Applets,
ActiveX, PDF) oder sogar eine andere Webseite
<optgroup>
Gruppe von Optionen in einer Selectbox <select>
Value=“ “ selected=“selected“
Rows=“ “ cols=“ “
wrap=“off/physical/virtual“
width=“ “ height=“ “ controls poster=“ “
preload=“none“ autoplay loop
* = HTML5
Tabellen-Elemente
<caption>
Tabellenbeschriftung
<col>
Tabellenspalte (column)
<colgroup>
Gruppe von Tabellenspalten
<table>
Tabelle
width=““ cellpadding=“ “ cellspacing=“ “
<tbody>
Gruppiert einen Tabellenkörper
border=“1“
<td>
Tabellenkörperzelle (table data)
colspan=“2“ rowspan=“2“ nowrap
<tfoot>
Gruppiert Tabellenfusszeilen
<th>
Tabellenüberschrift (table head)
<thead>
Gruppiert Tabellenüberschriften
<tr>
Tabellenzeile (table row)
© oliver-staehli.ch
HTML Cheatsheet
Listen
</select>
<ul type=“circle“ >
<li> Listeneintrag 1 </li>
<ul type=“square“ >
<li> Unterpunkt 1 </li>
<li> Unterpunkt 2 </li>
</ul>
<li> Listeneintrag 2 </li>
<li> Listeneintrag 3 </li>
</ul>
<ul> = Unordered List
<li> = List Item
<ol type=“A“ >
<li> Listeneintrag 1 </li>
<ol type=“a“ >
<li> Unterpunkt 1 </li>
<li> Unterpunkt 2 </li>
</ol>
<li> Listeneintrag 2 </li>
<li> Listeneintrag 3 </li>
</ol>
<ol> = Ordered List
<dl>
<dt> Begriff 1 </dt>
<dd> Definition 1 </dd>
<dt> Begriff 2 </dt>
<dd> Definition 2 </dd>
</dl>
<dl> = Definition List
<dt> = Definition Term
<dd> = Definition Data
<input type=“checkbox“ value=“ “ />
checked
Vorselektierte Checkbox
<input type=“radio“ name=““ value=““ />
checked
Vorselektierter Radiobutton
Alle Radiobuttons einer Gruppe haben den gleichen Namen,
aber unterschiedliche Ids
Attribut Aufzählungszeichen:
type=“circle“ / “square“ / „disc“
<form enctype=“multipart/form-data“>
<input type=“file“ />
<input type=“search“ list=“browser “ />
<datalist id=“browser “>
<option>Firefox</option>
<option>Chrome</option>
</datalist>
Attribut Nummerierungszeichen:
type=“A“ / „a“ / „I“ / „i“
Attribut Startwert:
start=“5“
<ul> und <ol> können verschachtelt werden.
Hinweistext im Suchfeld
Datalist für Suchvorschläge
E-Mail-Adresse
<input type=“url“ /> *
Web-Adresse
<input type=“tel“ /> *
Fieldset: Gruppierung von Formularelemente
Legend: Beschriftung der Gruppierung
<label for=“xyz“>Vorname:</label>
<input type=“ “ name=“xyz“ />
For=“xyz“
name=“xyz“
Das Attribut „for “ bezieht sich auf das Attribut „name“ des
Formularfelds
<input type=“text“ />
<input type=“password“ />
<input type=“search“ />
Size=“30“
maxlenght=“50“
placeholder=“ “
30 Zeichen sichtbare Grösse
50 Zeichen maximale Eingabe
Platzhaltertext wird im Feld angezeigt
<textarea>
rows=“10 / cols=“25“
wrap=“off“
wrap=“physical“
wrap=“virtual“
Höhe und Breite des Formularfelds
Text ohne Umbruch – wie Eingabe
autom. Umbruch in Anzeige und Übertragung
autom. Umbruch nur in Anzeige
<input type=“reset“ />
<input type=“submit />
<input type=“button“ />
<input type=“image“ src=“ “ />
value=“ “
Beschriftung des Buttons
<button type=“ “ name=“ “ id=“ “>
<img src=“ “ alt=“ “ /><br/>
<strong>Beschriftung</strong>
</button>
type=“button“
type=“reset“
type=“submit“
Telefon-Nummer
<input type=“number “ /> * Zahlen
<input type=“range“ /> * Schieberegler
Min=“1“ max=“10“
step=“2“
Mindestwert, Maximalwert
Schrittweite
<progress></progress> *
Value=“ “ max=“ “
Aktueller Wert, Gesamtwert
<meter>7 von 10</meter> *
Value=“ “
min=“ “ max=“ “
low=“ “ high=“ “
optimum=“ “
Aktueller Zustand (statisch)
Minimum, Maximum
zu niedrig, hoch
optimal
<input type=“date“ /> *
<input type=“month“ /> *
<input type=“week“ /> *
<input type=“time“ /> *
<input type=“datetime“ /> *
<input type=“datetime-local“ /> *
Auswahl von Daten aus einem Kalender
<input type=“color “ /> *
Farbwähler
Generelle Formular-Attribute:
- Die Attribute name=“abc“ und id=“abc“ dienen zur Identifikation des Formularfelds
- Mit dem Attribut tabindex=“ „ lässt sich die Reihenfolge der Formularfelder für die Tastatursteuerung festlegen.
- Mit dem Attribut disabled kann ein Formularelement deaktiviert werden.
- Das Formularfeld, welches das Attribut autofocus hat, wird beim Laden der Seite fokussiert.
- Das Attribut required macht ein Formularfeld zum Pflichtfeld (HTML5)
Dateitypen (MIME)
Image = grafischer Submit Button
Moderne Buttons mit besserer Gestaltungsmöglichkeit
<input Type=“hidden“ />
value=“ “
zu übertragender Inhalt, für den Benutzer unsichtbar
<select>
<optgroup label=“Farben “>
<option>Schwarz</option>
<option>Weiss</option>
</optgroup>
size=“1“
Legt fest, wie viele Einträge ohne Ausklappen in der
Auswahlliste angezeigt werden
Anstelle des Texts wird der definierte Value übermittelt
Mit Strg und Shift können mehrere Einträge selektiert werden
value=“ “
placeholder=““
Upload nur mit „enctype“ Attribut im Form Tag!
Einschränkung auf MIME-Typ
Wildcard, alle Typen von Bilddateien
<input type=“email“ /> *
Formularelemente
<fieldset>
<legend>Personalien</legend>
<!-- Formularelemente →
</fieldset>
accept=“image/gif“
accept=“image/*“
Text/plain (.txt)
Application/pdf (.pdf)
Text/html (html)
Application/msword (.doc)
Image/gif (.gif)
Audio/x-wav (.wav)
Image/jpg (.jpg)
Video/quicktime (.mov)
Application/zip (.zip)
Video/mp4 (.mp4)
multiple
© oliver-staehli.ch

Download Report