HTML-Attribute-HTML-Tutorial-php.cn

HTML-Attribute sind spezielle Wörter, die das Verhalten eines HTML-Elements ändern. Sie werden in den Eröffnungs-Tags von Elementen verwendet und können entweder die Standardfunktionalität eines Elements ändern oder die erforderliche Funktionalität bereitstellen. Syntaktisch wird dem HTML-Start-Tag ein Attribut hinzugefügt. Sie können als erforderliche, optionale, Standard- oder Ereignisattribute kategorisiert werden und werden als Name-Wert-Paare geschrieben, die durch ein Gleichheitszeichen „=“ im Start-Tag eines Elements getrennt sind.

Verschiedene HTML-Attribute

Im Folgenden sind die verschiedenen HTML-Attribute und ihre Funktionsweise im Detail aufgeführt:

1. Kernattribute

Es werden hauptsächlich vier Kernattribute verwendet:

ID: Dieses Attribut identifiziert ein Element eindeutig innerhalb einer HTML-Seite. Wenn ein Element ein ID-Attribut trägt, dient es als eindeutige Kennung, die die Identifizierung des Elements und seines Inhalts erleichtert. Dies ist besonders nützlich, wenn es auf einer Webseite mehrere Elemente mit demselben Namen gibt.
Titelattribut: Dieses Attribut bietet einen vorgeschlagenen Titel für ein Element. Sein Verhalten hängt vom Kontext ab, in dem es verwendet wird, und es kann als Tooltip angezeigt werden, wenn sich der Cursor über dem Element befindet oder wenn das Element geladen wird. Es kann auch zusätzliche Informationen zu einem Element bereitstellen, wenn der Benutzer mit dem Mauszeiger darüber fährt.
Klassenattribut: Dieses Attribut verknüpft ein Element mit einem Stylesheet, indem es die Klasse des Elements angibt. Weitere Informationen zu diesem Attribut erhalten Sie, wenn Sie das Cascading Style Sheet erlernen. Der Wert des Klassenattributs kann eine durch Leerzeichen getrennte Liste von Klassennamen sein. Zum Beispiel: class=“className1 className2 className3″
Stilattribut: Mit diesem Attribut kann der Benutzer CSS-Regeln für ein einzelnes Element festlegen. Mit dem style-Attribut kann der Benutzer verschiedene CSS-Effekte auf HTML-Elemente anwenden, wie zum Beispiel die Änderung der Schriftgröße, der Schriftfamilie und der Farbe.

2. Internationalisierungsattribut

Dir: Das dir-Attribut hilft dabei, dem Browser die Richtung anzugeben, der der Text folgen soll. Dieses Attribut kann zwei Werte annehmen: LTR und RTL. LTR bedeutet links nach rechts, was der Standardwert ist, während RTL für rechts nach links steht. Bei Verwendung innerhalb des Tag legt es fest, wie Text im gesamten Dokument dargestellt werden soll. Es kann auch die Richtung des Textes innerhalb des Inhalts des Tags steuern.
Sprachattribut: Dieses Attribut hilft dabei, die in einem Dokument verwendete Hauptsprache darzustellen. Man kann es in HTML verwenden, um die Abwärtskompatibilität mit früheren HTML-Versionen aufrechtzuerhalten. Außerdem ersetzt man es durch das XML:lang-Attribut in neuen XHTML-Dokumenten. Die Werte des lang-Attributs basieren auf dem ISO-639-Standard und bestehen aus zweistelligen Sprachcodes. Die Deklaration einer Sprache ist wichtig für die Barrierefreiheit und für die ordnungsgemäße Indexierung von Inhalten durch Suchmaschinen.
XML-Lang-Attribut: Dieses Attribut ersetzt tendenziell das lang-Attribut. Der Wert des XML-lang-Attributs muss die in ISO-639 angegebenen Sprach- und Ländercodes enthalten.

3. Generisches Attribut

Align-Attribut: Dieses Attribut ist nützlich, wenn Sie bestimmte Elemente auf Ihrer Webseite positionieren möchten. Damit können Sie die Ausrichtung nach links, rechts oder in der Mitte der Seite ändern. Die Standardausrichtung für alle Elemente ist auf links eingestellt, Sie können sie jedoch mithilfe des align-Attributs ändern.
Src-Attribut: Wenn man ein Bild in eine Webseite einfügen möchte, muss man das Tag mit dem src-Attribut. Man kann die Adresse des Bildes als Attributwert in doppelten Anführungszeichen angeben. Man kann das src-Attribut wie folgt verwenden, um das Bild auf der Webseite einzubinden.

Code:

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>

Nach dem Login kopieren

Alt-Attribut: Dieses Attribut wird als alternatives Tag verwendet, das verwendet werden kann, um etwas anzuzeigen, wenn das primäre Attribut, das Tag, zeigt das ihm zugewiesene Originalbild nicht an. Es kann das Bild einem Entwickler beschreiben, der es am Ende der Codierung verwendet. Wenn das Hauptbild fehlschlägt, kann das Alternativbild angezeigt werden.
Das Breiten- und Höhenattribut:Diese Attribute können die Höhe und Breite eines Bildes anpassen.

Beispiel:

Code:

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html>

Nach dem Login kopieren

Href Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the tag. When the link is placed in the href attribute, it is associated with the text displayed within the tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.

4. Data Attribute

HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.

In order to customize, one divides the data into two parts:

Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
Attribute Value: Any string value can be associated with the attribute.

The syntax for a data attribute is as follows:

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

Nach dem Login kopieren

5. DOM Attribute Property

To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.

The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

Nach dem Login kopieren

6. Global Attributes

HTML also provides global attributes that can work with any HTML element:

Accesskey: Specifies a shortcut key to activate or focus on any element.
Translate: Specifies whether the content of the element is to be translated or not.
Class: One or more class names for an element are specified.
Title: Specifies extra information about an element.
Contenteditable: This attribute can be used to specify whether the content is editable or not.
Tabindex: Specifies the tabbing order of an element.
Dir: Specifies the text direction for any content of an element.
Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
Draggable: Specifies if an element should be draggable or not.
Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.

7. Event Attributes

HTML has the ability to trigger actions when some events take place.

Onload: Fires after the page has finished loading.
Onmessage: A script that runs when the message is triggered.
Onstorage: A script that runs when a web storage area is updated.
Onerror: The script runs when an error occurs.
Onpagehide: The script can be used when the user navigates away from a page.

8. Form Event Attributes

Actions inside an HTML form trigger these events.

Onblur: Wird ausgelöst, sobald das Element den Fokus verliert.
Onchange: Wird ausgelöst, sobald sich der Wert eines Elements ändert.
Oncontextmenu: Dies wird ausgeführt, wenn ein Kontextmenü ausgelöst wird.
Onfocus: Wird ausgelöst, sobald das Element den Fokus erhält.
Oninput: Das Skript muss ausgeführt werden, wenn das Element eine Eingabe empfängt.
Onsearch: Dies wird ausgelöst, wenn der Benutzer etwas in das Suchfeld schreibt.
Oninvalid: Dies wird ausgelöst, wenn das eingegebene Element ungültig ist.

9. Wichtige Ereignisattribute

Onkeydown: Wird ausgelöst, wenn eine Taste gedrückt wird.
Onkeypress: Wird ausgelöst, wenn eine Taste gedrückt wird.
Onkeyup: Dies wird ausgelöst, wenn ein Benutzer eine Taste loslässt.

10. Mausereignisattribute

Onclick: Dies wird ausgelöst, wenn die Maus auf ein Element klickt.
Onmousemove: Wird ausgelöst, wenn sich der Mauszeiger bewegt, während er sich über einem Element befindet.
Onmouseip: Wird ausgelöst, wenn eine Maustaste über einem Element losgelassen wird.
Auf dem Rad:Wird ausgelöst, wenn das Mausrad über ein Element nach oben oder unten rollt

11. Ereignisattribute ziehen

Ondrag: Dies wird ausgelöst, wenn ein Element gezogen wird.
Ondragleave: Das Skript wird ausgeführt, wenn ein Element ein gültiges Ablageziel verlässt.
Ondrop: Wird ausgelöst, wenn das gezogene Element abgelegt wird
Onscroll: Das Skript wird ausgeführt, wenn die Bildlaufleiste eines Elements gescrollt wird.

Fazit

HTML hat sich im Laufe der Zeit weiterentwickelt und bietet eine breite Palette von Attributen wie Kern, Internationalisierung, Daten, Global und Ereignis, wodurch Webanwendungen und Seiten interaktiver werden. In Kombination mit CSS ermöglicht HTML die einfache Anpassung von Webelementen, um optisch ansprechende Webanwendungen zu erstellen.

Das obige ist der detaillierte Inhalt vonHTML-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!