Der HTML Essentials-Spickzettel: Tags, Attribute und mehr

Das Erstellen von Webseiten beginnt mit HTML. Sie zu verschönern und interaktiv zu machen, kommt später. Um jedoch mit der Erstellung funktionaler statischer Websites zu beginnen, benötigen Sie HTML-Kenntnisse. (Möchten Sie eine kurze Einführung in diese Auszeichnungssprache? Lesen Sie unsere HTML-FAQ.)

Als Teil des Erlernens der Sprache gibt es eine lange Liste von Elementen, die Sie Ihrem HTML-Vokabular hinzufügen müssen. Und diese Aufgabe kann zunächst entmutigend erscheinen, weshalb wir uns den folgenden Spickzettel ausgedacht haben. Es bietet Ihnen eine einfache Möglichkeit, HTML-Elemente jederzeit zu entdecken/zu verstehen/zurückzurufen, wenn Sie sie benötigen.

Der Spickzettel umfasst Tags und Attribute zum Strukturieren von Webseiten, Formatieren von Text, Hinzufügen von Formularen, Bildern, Listen, Links und Tabellen. Es enthält auch Tags, die in HTML5 eingeführt wurden, und HTML-Codes für häufig verwendete Sonderzeichen.

KOSTENFREIER DOWNLOAD: Dieser Spickzettel ist als herunterladbares PDF

von unserem Vertriebspartner TradePub. Sie müssen nur zum ersten Mal ein kurzes Formular ausfüllen. Herunterladen Der HTML-Essentials-Spickzettel.

Der HTML-Essentials-Spickzettel

... ... ... ... ...

...

Abkürzung	Handlung
Grundlegende Tags
...	Das erste und letzte Tag eines HTML-Dokuments. Alle anderen Tags liegen zwischen diesen öffnenden und schließenden Tags.
...	Gibt die Sammlung von Metadaten für das Dokument an.
	Beschreibt den Titel der Seite und wird in der Titelleiste des Browsers angezeigt.
...	Enthält alle Inhalte, die auf der Webseite angezeigt werden.
Dokumentinformationen
Erwähnt die Basis-URL und alle relativen Links zum Dokument.
Für zusätzliche Informationen über die Seite wie Autor, Veröffentlichungsdatum usw.
Links zu externen Elementen wie Stylesheets.
	Enthält Dokumentstilinformationen wie CSS (Cascading Style Sheets).
	Enthält Links zu externen Skripten.
Textformatierung
... ODER ...	Macht den Text fett.
...	Text kursiv und fett.
...	Text kursiv, aber nicht fett.
...	Durchgestrichener Text.
...	Zitiert einen Autor eines Zitats.
...	Beschriftet einen gelöschten Teil eines Textes.
...	Zeigt einen Abschnitt an, der in den Inhalt eingefügt wurde.
...	Zum Anzeigen von Zitaten. Wird oft mit dem verwendet Schild.
...	Für kürzere Zitate.
...	Für Abkürzungen und Vollformen.
...	Gibt Kontaktdaten an.
...	Für Definitionen.
...	Für Codeschnipsel.
...	Zum Schreiben von Indizes
...	Zum Schreiben von hochgestellten Zeichen.
...	Zur Reduzierung der Textgröße und Markierung redundanter Informationen in HTML5.
Dokumentenstruktur
...	Verschiedene Ebenen von Überschriften. H1 ist der größte und H6 der kleinste.
...	Zum Aufteilen von Inhalten in Blöcke.
...	Enthält Inline-Elemente wie ein Bild, ein Symbol oder ein Emoticon, ohne die Formatierung der Seite zu beeinträchtigen.
...	Enthält Klartext.
	Erstellt eine neue Zeile.
	Zeichnet einen horizontalen Balken, um das Ende des Abschnitts anzuzeigen.
Listen
...	Für geordnete Artikelliste.
...	Für ungeordnete Artikelliste.
...	Für einzelne Elemente in einer Liste.
...	Liste der Elemente mit Definitionen.
...	Die Definition eines einzelnen Begriffs im Textkörper.
...	Die Beschreibung für den definierten Begriff.
Links
...	Anker-Tag für Hyperlinks.
...	Tag zum Verknüpfen mit E-Mail-Adressen.
...	Anker-Tag zum Auflisten von Kontaktnummern.
...	Anker-Tag zum Verlinken zu einem anderen Teil derselben Seite.
...	Navigiert zu einem div-Abschnitt der Webseite. (Variante des obigen Tags)
Bilder
	Zum Anzeigen von Bilddateien.
Attribute für die Schild
src=”URL”	Link zum Quellpfad des Bildes.
alt=”Text”	Der Text, der angezeigt wird, wenn eine Maus über das Bild bewegt wird.
Höhe =” “	Bildhöhe in Pixeln oder Prozentsätzen.
Breite =” “	Bildbreite in Pixeln oder Prozentsätzen.
ausrichten=” ”	Relative Ausrichtung des Bildes auf der Seite.
Grenze =” “	Randdicke des Bildes.
	Link zu einer anklickbaren Karte.
	Name des Kartenbildes.
Der Bildbereich einer Imagemap.
Attribute für die Schild
Form =“ „	Form des Bildbereichs.
Koordinaten =” “	Koordinaten des Kartenbildbereichs.
Formen
...	Das übergeordnete Tag für ein HTML-Formular.
Attribute für die Schild
Aktion = "URL"	Die URL, an die Formulardaten gesendet werden.
Methode=""	Gibt das Formularübermittlungsprotokoll (POST oder GET) an.
enctype=""	Das Datencodierungsschema für POST-Übermittlungen.
Autovervollständigung	Gibt an, ob die automatische Vervollständigung von Formularen aktiviert oder deaktiviert ist.
erneuern	Gibt an, ob das Formular vor der Übermittlung validiert werden soll.
Akzeptiere-Zeichensätze	Gibt die Zeichencodierung für Formularübermittlungen an.
Ziel	Zeigt an, wo die Antwort auf die Formularübermittlung angezeigt wird.
...	Gruppiert verwandte Elemente im Formular/
...	Gibt an, was der Benutzer in jedes Formularfeld eingeben soll.
...	Eine Beschriftung für das fieldset-Element.
Gibt an, welche Art von Eingabe vom Benutzer entgegengenommen werden soll.
Attribute für die Schild
Typ=""	Bestimmt die Art der Eingabe (Text, Datum, Passwort).
Name =””	Gibt den Namen des Eingabefelds an.
Wert=””	Gibt den Wert im Eingabefeld an.
Größe =””	Legt die Anzahl der Zeichen für das Eingabefeld fest.
maxlänge=””	Legt die Grenze der zulässigen Eingabezeichen fest.
erforderlich	Macht ein Eingabefeld obligatorisch.
Breite =””	Legt die Breite des Eingabefelds in Pixel fest.
Höhe =””	Legt die Höhe des Eingabefelds in Pixel fest.
Platzhalter=""	Beschreibt den erwarteten Feldwert.
Muster =””	Gibt einen regulären Ausdruck an, mit dem nach Mustern im Text des Benutzers gesucht werden kann.
min=””	Der zulässige Mindestwert für ein Eingabeelement.
max=””	Der maximal zulässige Wert für ein Eingabeelement.
Behinderte	Deaktiviert das Eingabeelement.
...	Zum Erfassen längerer Datenstrings vom Benutzer.
...	Gibt eine Liste von Optionen an, aus denen der Benutzer auswählen kann.
Attribute für die Schild
Name =””	Gibt einen Namen für eine Dropdown-Liste an.
Größe =””	Anzahl der Optionen, die dem Benutzer gegeben werden.
mehrere	Legt fest, ob der Benutzer mehrere Optionen aus der Liste auswählen kann.
erforderlich	Gibt an, ob die Auswahl einer oder mehrerer Optionen für die Formularübermittlung erforderlich ist.
Autofokus	Gibt an, dass eine Dropdown-Liste nach dem Laden einer Seite automatisch in den Fokus kommt.
...	Definiert Elemente in einer Dropdown-Liste.
Wert=””	Zeigt den Text für eine beliebige Option an.
ausgewählt	Legt die angezeigte Standardoption fest.
...	Tag zum Erstellen einer Schaltfläche für die Formularübermittlung.
Objekte und iFrames
	Beschreibt den eingebetteten Dateityp.
Attribute für die
Höhe =””	Die Höhe des Objekts.
Breite =””	Die Breite des Objekts.
Typ=""	Der Medientyp, den das Objekt enthält.
	Ein Inline-Frame zum Einbetten externer Informationen.
Name =””	Der Name des iFrames.
src=””	Die Quell-URL für den Inhalt innerhalb des Frames.
srcdoc=""	Der HTML-Inhalt innerhalb des Frames.
Höhe =””	Die Höhe des iFrames.
Breite =” “	Die Breite des iFrames.
Fügt zusätzliche Parameter hinzu, um den iFrame anzupassen.
...	Bettet eine externe Anwendung oder ein Plugin ein.
Attribute für die
Höhe =“ „	Legt die Höhe der Einbettung fest.
Breite =“ „	Legt die Breite der Einbettung fest.
Typ=""	Der Typ oder das Format der Einbettung.
src=””	Der Quellpfad der eingebetteten Datei.
Tabellen
...	Definiert den gesamten Inhalt einer Tabelle.
Eine Beschreibung der Tabelle.
Überschriften für jede Spalte in der Tabelle.
Definiert die Körperdaten für die Tabelle.
Beschreibt den Inhalt für die Fußzeile der Tabelle.
Inhalt für eine einzelne Zeile.
	...	Die Daten in einem einzelnen Kopfelement.
	...	Inhalt innerhalb einer einzelnen Tabellenzelle.
Gruppiert Spalten für die Formatierung.
Eine einzige Spalte mit Informationen.
Neue HTML5-Tags
...	Gibt den Webseiten-Header an.
	Gibt die Fußzeile der Webseite an.
...	Markiert den Hauptinhalt der Webseite.
...	Gibt einen Artikel an.
	Gibt den Inhalt der Seitenleiste einer Seite an.
...	Gibt einen bestimmten Abschnitt auf der Webseite an.
...	Zur Beschreibung zusätzlicher Informationen.
...	Wird als Überschrift für das obige Tag verwendet. Ist für den Benutzer immer sichtbar.
...	Erstellt ein Dialogfeld.
...	Wird zum Einfügen von Diagrammen und Abbildungen verwendet.
	Beschreibt a Element.
...	Hebt einen bestimmten Teil des Textes hervor.
	Satz von Navigationslinks auf einer Webseite.
...	Ein bestimmtes Element aus einer Liste oder einem Menü.
...	Misst Daten innerhalb eines bestimmten Bereichs.
...	Platziert einen Fortschrittsbalken und verfolgt den Fortschritt.
...	Zeigt Text an, der Ruby-Anmerkungen nicht unterstützt.
...	Zeigt typografische Zeichendetails für Ostasien an.
...	Eine Rubin-Anmerkung für ostasiatische Typografie.
...	Identifiziert Uhrzeit und Datum.
Ein Zeilenumbruch innerhalb des Inhalts.
¹HTML5-Zeichenobjekte
" ODER "	Anführungszeichen
< ODER <	Kleiner-als-Zeichen (
> ODER >	Größer als Zeichen (>)
ODER	Geschützter Raum
© OR &Kopieren ;	Copyrightzeichen
™ ODER û	Markensymbol
@ ODER &Uuml ;	„at“-Symbol (@)
& ODER &	Und-Zeichen (&)
• ODER ¨	Kleine Kugel
¹Ignorieren Sie Leerzeichen vor dem Semikolon bei der Eingabe von HTML-Zeichen.

Erstellen Sie eine Website für praktische Erfahrungen

Sobald du verstanden hast die Grundlagen des HTML-Codes und verfügen über Grundkenntnisse in CSS und JavaScript, Versuchen Sie es mit dem Erstellen einer Website So erstellen Sie eine Website: Für AnfängerHeute werde ich Sie durch den Prozess der Erstellung einer kompletten Website von Grund auf führen. Machen Sie sich keine Sorgen, wenn das schwierig klingt. Ich begleite Sie bei jedem Schritt. Weiterlesen . Speichern Sie auch unsere CSS3-Eigenschaften-Spickzettel Der Spickzettel für wesentliche CSS3-EigenschaftenBeherrschen Sie die grundlegende CSS-Syntax mit unserem CSS3-Eigenschaften-Spickzettel. Weiterlesen und JavaScript-Spickzettel Der ultimative JavaScript-SpickzettelHolen Sie sich mit diesem Spickzettel eine schnelle Auffrischung von JavaScript-Elementen. Weiterlesen Für zukünftige Verwendung!