Umfassende Analyse von Standardattributen und benutzerdefinierten Attributen in HTML5_html5-Tutorial-Fähigkeiten

Wie in der HTML5-Syntax erläutert, können Elemente Attribute enthalten, um verschiedene Eigenschaften für ein Element festzulegen.

Einige Eigenschaften sind als global definiert und können für jedes Element verwendet werden, während andere als elementspezifisch definiert sind. Alle Eigenschaften haben einen Namen und einen Wert, die wie im folgenden Beispiel aussehen.

Hier ist ein Beispiel für die Verwendung von HTML5-Attributen, das zeigt, wie ein div-Element mit einem Attribut namens class und dem Wert „example“ markiert wird:

Das Attribut

...

kann nur im öffnenden Tag angegeben werden und darf nicht im schließenden Tag verwendet werden.

HTML5-Attribute unterscheiden nicht zwischen Groß- und Kleinschreibung und können ausschließlich in Großbuchstaben oder einer Mischung aus Groß- und Kleinbuchstaben verwendet werden, obwohl die gängigste Konvention darin besteht, immer Kleinbuchstaben zu verwenden.

Standardattribute
Die unten aufgeführten Attribute werden von fast allen HTML5-Tags unterstützt.

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

Attribute Optionen Funktion Zugriffsschlüssel Benutzerdefiniert Definieren Sie Tastaturkürzel für den Zugriff auf Elemente. ausrichten rechts, links, in der Mitte Beschriftungen horizontal ausrichten. Hintergrund URL Legen Sie ein Hintergrundbild hinter dem Element fest. bgcolor Numerischer Wert, Hexadezimalwert, RGB-Wert Legt eine Hintergrundfarbe hinter dem Element fest. Klasse Benutzerdefiniert. Kategorisiert ein Element, um die Verwendung von Cascading Style Sheets zu erleichtern. contenteditable wahr, falsch Definiert, ob Benutzer den Inhalt des Elements bearbeiten können. Kontextmenü Menü-ID Definieren Sie ein Kontextmenü für das Element. data-XXXX Benutzerdefiniert. Benutzerdefinierte Attribute. Autoren von HTML-Dokumenten können ihre eigenen Attribute definieren. Benutzerdefinierte Eigenschaften müssen mit „data-“ beginnen. ziehbar true,false,auto Definiert, ob der Benutzer das Element ziehen kann. Höhe numerischer Wert Definieren Sie die Höhe einer Tabelle, eines Bildes oder einer Tabellenzelle. versteckt versteckt Definiert, ob das Element sichtbar sein soll. id Benutzerdefiniert. benannte Elemente, um die Verwendung von Cascading Style Sheets zu erleichtern. Element Elementliste. wird zum Kombinieren von Elementen verwendet. itemprop Liste der Einträge. wird zum Zusammenfassen von Einträgen verwendet. Rechtschreibprüfung wahr, falsch Definiert, ob das Element über eine Rechtschreib- oder Fehlerprüfung verfügen muss. Stil CSS-Stylesheet. definiert Inline-Stile für Elemente. Betreff Benutzerdefinierte ID. definiert die mit dem Element verknüpften Elemente. tabindex Tab-Nummer wird durch die Tab-Reihenfolge der Elemente bestimmt. Titel Benutzerdefiniert. Der „Popup“-Titel des -Elements. valign oben, Mitte, unten Vertikale Ausrichtung von Tags innerhalb von HTML-Elementen. Breite Numerischer Wert. Definiert die Breite von Tabellen, Bildern und Tabellenzellen.

Benutzerdefinierte Attribute
HTML5 führt außerdem eine neue Funktion ein, nämlich die Möglichkeit, benutzerdefinierte Datenattribute hinzuzufügen.

Benutzerdefinierte Datenattribute beginnen mit „Daten“ und werden entsprechend unseren Anforderungen benannt. Hier ist ein einfaches Beispiel:

...

Zwei der oben genannten Beispiele Benutzerdefiniert Attribute namens data-subject und data-level sind in HTML5 vollständig gültig. Wir können ihre Werte auch über die JavaScript-API oder in CSS abrufen, ähnlich wie bei Standardeigenschaften.

Fügen Sie benutzerdefinierte Attribute zu HTML-Elementen hinzu und greifen Sie über JavaScript darauf zu. Wenn Sie es schon einmal versucht haben, werden Sie feststellen, dass es einfach ist, die Tag-Validierung zu ignorieren, und HTML5 Ihnen die Möglichkeit bietet, Ihre eigenen Elemente darin zu erstellen und zu verwenden eine gültige Attributfunktion.

HTML5-Datei erstellen:

Wenn Sie sich noch nicht entschieden haben, welches Sie verwenden möchten, können Sie den folgenden Code kopieren:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. /span>
2. >
5. html
6. >
9. Kopf
10. >
13. Skript
14. >
16. /*funktioniert hier*/ 
18. Skript
19. >
22. Kopf
23. >
26. Körper
27. >
30. Körper
31. >
34. html
35. >

Legen Sie benutzerdefinierte Elemente im Hauptteil fest und greifen Sie mithilfe von JavaScript-Elementen im Hauptskriptbereich darauf zu.

Element erstellen:

Fügen Sie zunächst einige einfache Inhalte und Elemente wie benutzerdefinierte Attribute und IDs hinzu, damit wir das JavaScript-Beispiel identifizieren können.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

2. div id="product1" data-product-category="Kleidung"
3. >
5. Baumwollhemd
7. div
8. >

Wie Sie sehen, hat das benutzerdefinierte Attribut die Form: „data-*“, geben Sie den Namen im „data-“-Teil oder einen Namen Ihrer Wahl ein. Verwenden Sie benutzerdefinierte Attribute in HTML5. Nur so funktioniert es. Verwenden Sie diese Methode daher nur, wenn Sie überprüfen möchten, ob die Webseite gültig ist.

Natürlich bestimmen die Projektdetails, ob die benutzerdefinierte Eigenschaft für Sie nützlich ist und wie Sie sie benennen. Dieses Beispiel kann auf Einzelhandels-Websites verschiedener Produktkategorien angewendet werden.

Benutzerdefinierte Attribute ermöglichen die Verwendung von JavaScript-Code innerhalb der Seite, um Elemente auf besondere Weise festzulegen, beispielsweise um die Anzeigefunktion zu animieren. Wenn keine Standard-HTML-Elemente vorhanden sind, empfehlen wir die Verwendung benutzerdefinierter Attribute.

Testschaltfläche hinzufügen

Verwenden Sie Ihre eigenen JavaScript-Elemente auf der Seite, um Ereignisse auszuführen, vorausgesetzt, dass der Seite der folgende Code hinzugefügt wird:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

2. Eingabe Typ="Schaltfläche" Wert="get attribute" onclick="getElementAttribute ('Produkt1')"
3. />

Attribute abrufen:

Der häufigste Weg, auf Attribute in JavaScript zuzugreifen, ist die Verwendung von „getAttributes“, was auch der erste Schritt ist, den wir ausführen müssen. Fügen Sie im Kopfskriptbereich der Seite die folgende Funktion hinzu:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. Funktion getElementAttribute(elemID) {
2. var theElement = document.getElementById(elemID);
3. var theAttribute = theElement.getAttribute('data-product-category' 🎜> alert(theAttribute);
4. } 

5. Hier haben wir den Alarmwert zum Beispiel hinzugefügt. Natürlich können Sie ihn auch entsprechend Ihren eigenen Bedürfnissen im Skript hinzufügen.

   Daten abrufen:

   Sie können einen Elementdatensatz anstelle von DOM „getAttributes“ verwenden, was insbesondere in bestimmten Fällen, in denen der Code mehrere Attribute durchläuft, immer noch sehr gering ist , dieser Code führt den gleichen Prozess aus wie die Methode // danach.

   //var theAttribute = theElement.getAttribute('data-product-category');
   var theAttribute = theElement.dataset.productCategory;
   Entfernen Sie „data-“ aus dem Attributnamen im Datensatz Immer noch im HTML enthalten.

   Bitte beachten Sie, dass, wenn Ihr benutzerdefinierter Attributname einen Bindestrich enthält, dieser beim Zugriff über Daten in Groß-/Kleinschreibung angezeigt wird, d. h. („data-product-category“ wird zu „productCategory“).

   Weitere Module und Funktionen

   Wir haben die Eigenschaft erhalten, Skripte können sie weiterhin festlegen und entfernen. Der folgende Code zeigt, wie Eigenschaften mithilfe von Standard-JavaScript-Modulen und -Datensätzen festgelegt werden.

   JavaScript-CodeInhalt in die Zwischenablage kopieren

   1. //DOM-Methode
   3. theElement.setAttribute('data-product-category', 'sale');
   4. //Datensatzversion
   theElement.dataset.productCategory =
   6. "sale"; Sie können auch DOM-Methoden oder Datensätze verwenden, um ein Attribut zu löschen:
   //DOM-Methode
   9. theElement.removeAttribute(
   'data-product-category'
   10. );
   //Datensatzversion
   11. theElement.dataset.productCategory =
   null
   12. ; Die Implementierung benutzerdefinierter Attribute in HTML5 ist technisch nicht sehr kompliziert. Die eigentliche Schwierigkeit besteht darin, ob die von Ihnen gewählte Methode für Ihr Projekt geeignet ist. Bitte beachten Sie, dass es noch zu früh ist, die Datensatzmethode als Seitenfunktion zu aktivieren, da viele Browser diese Funktion noch nicht unterstützen.