HTML5 - Attribute
Wie im vorherigen Kapitel erläutert, können Elemente Attribute enthalten, mit denen verschiedene Eigenschaften eines Elements festgelegt werden.
Einige Attribute sind global definiert und können für jedes Element verwendet werden, während andere nur für bestimmte Elemente definiert werden. Alle Attribute haben einen Namen und einen Wert und sehen wie im Beispiel unten gezeigt aus.
Das folgende Beispiel zeigt ein HTML5-Attribut, das zeigt, wie ein div-Element mit einem Attribut namens class mit dem Wert "example" markiert wird.
<div class = "example">...</div>Attribute dürfen nur innerhalb angegeben werden start tags und darf niemals in verwendet werden end tags.
HTML5-Attribute unterscheiden nicht zwischen Groß- und Kleinschreibung und können in Groß- oder Kleinschreibung geschrieben werden, obwohl die häufigste Konvention darin besteht, Kleinbuchstaben zu verwenden.
Standardattribute
Die unten aufgeführten Attribute werden von fast allen HTML 5-Tags unterstützt.
| Attribut | Optionen | Funktion |
|---|---|---|
| Zugangsschlüssel | Benutzerdefinierten | Gibt eine Tastenkombination für den Zugriff auf ein Element an. |
| ausrichten | rechts, links, Mitte | Richtet Tags horizontal aus |
| Hintergrund | URL | Platziert ein Hintergrundbild hinter einem Element |
| bgcolor | numerische, hexadezimale, RGB-Werte | Platziert eine Hintergrundfarbe hinter einem Element |
| Klasse | Benutzerdefinierten | Klassifiziert ein Element zur Verwendung mit Cascading Style Sheets. |
| zufriedenstellbar | wahr falsch | Gibt an, ob der Benutzer den Inhalt des Elements bearbeiten kann oder nicht. |
| Kontextmenü | Menü-ID | Gibt das Kontextmenü für ein Element an. |
| Daten-XXXX | Benutzerdefinierten | Benutzerdefinierte Attribute. Autoren eines HTML-Dokuments können ihre eigenen Attribute definieren. Muss mit "data-" beginnen. |
| ziehbar | wahr, falsch, automatisch | Gibt an, ob ein Benutzer ein Element ziehen darf oder nicht. |
| Höhe | Zahlenwert | Gibt die Höhe von Tabellen, Bildern oder Tabellenzellen an. |
| versteckt | versteckt | Gibt an, ob das Element sichtbar sein soll oder nicht. |
| Ich würde | Benutzerdefinierten | Benennt ein Element zur Verwendung mit Cascading Style Sheets. |
| Artikel | Liste der Elemente | Wird zum Gruppieren von Elementen verwendet. |
| itemprop | Liste von Gegenständen | Wird zum Gruppieren von Elementen verwendet. |
| Rechtschreibprüfung | wahr falsch | Gibt an, ob für das Element die Rechtschreibung oder Grammatik überprüft werden muss. |
| Stil | CSS Stylesheet | Gibt einen Inline-Stil für ein Element an. |
| Gegenstand | Benutzerdefinierte ID | Gibt das entsprechende Element des Elements an. |
| Tabindex | Tab-Nummer | Gibt die Tabulatorreihenfolge eines Elements an. |
| Titel | Benutzerdefinierten | "Popup" -Titel für Ihre Elemente. |
| valign | oben Mitte unten | Richtet Tags innerhalb eines HTML-Elements vertikal aus. |
| Breite | Zahlenwert | Gibt die Breite von Tabellen, Bildern oder Tabellenzellen an. |
Eine vollständige Liste der HTML5-Tags und der zugehörigen Attribute finden Sie in unserem Verweis auf HTML5-Tags .
Benutzerdefinierte Attribute
Eine neue Funktion, die in HTML 5 eingeführt wird, ist das Hinzufügen von benutzerdefinierten Datenattributen.
Ein benutzerdefiniertes Datenattribut beginnt mit data-und würde basierend auf Ihrer Anforderung benannt werden. Hier ist ein einfaches Beispiel -
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>Der obige Code ist perfekt gültiges HTML5 mit zwei benutzerdefinierten Attributen, die als Datenobjekt und Datenebene bezeichnet werden . Sie können die Werte dieser Attribute mithilfe von JavaScript-APIs oder CSS auf ähnliche Weise wie bei Standardattributen abrufen.