HTML - Attribute

Wir haben nur wenige HTML-Tags und deren Verwendung wie Überschriften-Tags gesehen <h1>, <h2>, Absatz-Tag <p>und andere Tags. Wir haben sie bisher in ihrer einfachsten Form verwendet, aber die meisten HTML-Tags können auch Attribute haben, die zusätzliche Informationen darstellen.

Ein Attribut wird verwendet, um die Eigenschaften eines HTML-Elements zu definieren, und wird im Eröffnungs-Tag des Elements platziert. Alle Attribute bestehen aus zwei Teilen - aname und ein value

Das nameist die Eigenschaft, die Sie festlegen möchten. Zum Beispiel der Absatz<p> Das Element im Beispiel enthält ein Attribut mit dem Namen align, mit dem Sie die Ausrichtung des Absatzes auf der Seite angeben können.
Das valueMit diesem Wert soll der Wert der Eigenschaft festgelegt und immer in Anführungszeichen gesetzt werden. Das folgende Beispiel zeigt drei mögliche Werte für das Attribut align: left, center und right.

Bei Attributnamen und Attributwerten wird die Groß- und Kleinschreibung nicht berücksichtigt. Das World Wide Web Consortium (W3C) empfiehlt jedoch in seiner HTML 4-Empfehlung Kleinbuchstabenattribute / Attributwerte.

Beispiel

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Dies zeigt das folgende Ergebnis an:

Kernattribute

Die vier Kernattribute, die für die meisten HTML-Elemente (wenn auch nicht für alle) verwendet werden können, sind:

Id
Title
Class
Style

Das ID-Attribut

Das idDas Attribut eines HTML-Tags kann verwendet werden, um jedes Element innerhalb einer HTML-Seite eindeutig zu identifizieren. Es gibt zwei Hauptgründe, warum Sie ein ID-Attribut für ein Element verwenden möchten:

Wenn ein Element ein ID-Attribut als eindeutigen Bezeichner trägt, kann nur dieses Element und sein Inhalt identifiziert werden.
Wenn eine Webseite (oder ein Stylesheet) zwei gleichnamige Elemente enthält, können Sie mit dem id-Attribut zwischen gleichnamigen Elementen unterscheiden.

Wir werden das Stylesheet in einem separaten Tutorial diskutieren. Lassen Sie uns zunächst das Attribut id verwenden, um zwischen zwei Absatzelementen zu unterscheiden, wie unten gezeigt.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Das Titelattribut

Das titleDas Attribut gibt einen vorgeschlagenen Titel für das Element an. Sie Syntax für dietitle Attribut ist ähnlich wie für erklärt id Attribut -

Das Verhalten dieses Attributs hängt von dem Element ab, das es trägt, obwohl es häufig als QuickInfo angezeigt wird, wenn der Cursor über das Element fährt oder während das Element geladen wird.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Versuchen Sie nun, den Cursor über "Beispiel für Titelüberschriften-Tags" zu bewegen, und Sie werden sehen, dass der Titel, den Sie in Ihrem Code verwendet haben, als QuickInfo des Cursors angezeigt wird.

Das Klassenattribut

Das classDas Attribut wird verwendet, um ein Element einem Stylesheet zuzuordnen, und gibt die Elementklasse an. Weitere Informationen zur Verwendung des Klassenattributs erhalten Sie, wenn Sie Cascading Style Sheet (CSS) lernen. So können Sie es jetzt vermeiden.

Der Wert des Attributs kann auch eine durch Leerzeichen getrennte Liste von Klassennamen sein. Zum Beispiel -

class = "className1 className2 className3"

Das Stilattribut

Mit dem style-Attribut können Sie CSS-Regeln (Cascading Style Sheet) innerhalb des Elements angeben.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Zu diesem Zeitpunkt lernen wir noch kein CSS. Fahren wir also fort, ohne uns um CSS zu kümmern. Hier müssen Sie verstehen, was HTML-Attribute sind und wie sie beim Formatieren von Inhalten verwendet werden können.

Internationalisierungsattribute

Es gibt drei Internationalisierungsattribute, die für die meisten (wenn auch nicht alle) XHTML-Elemente verfügbar sind.

dir
lang
xml:lang

Das dir-Attribut

Das dirMit dem Attribut können Sie dem Browser die Richtung angeben, in die der Text fließen soll. Das dir-Attribut kann einen von zwei Werten annehmen, wie Sie in der folgenden Tabelle sehen können:

Wert	Bedeutung
ltr	Von links nach rechts (Standardwert)
rtl	Von rechts nach links (für Sprachen wie Hebräisch oder Arabisch, die von rechts nach links gelesen werden)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Wenn das dir- Attribut im <html> -Tag verwendet wird, wird festgelegt, wie Text im gesamten Dokument dargestellt wird. Bei Verwendung in einem anderen Tag wird die Richtung des Texts nur für den Inhalt dieses Tags gesteuert.

Das lang-Attribut

Das langMit Attribut können Sie die in einem Dokument verwendete Hauptsprache angeben. Dieses Attribut wurde jedoch nur aus Gründen der Abwärtskompatibilität mit früheren HTML-Versionen in HTML beibehalten. Dieses Attribut wurde durch das ersetztxml:lang Attribut in neuen XHTML-Dokumenten.

Die Werte des lang- Attributs sind zweistellige Standard-Sprachcodes nach ISO-639. PrüfenHTML Language Codes: ISO 639 für eine vollständige Liste der Sprachcodes.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Dies führt zu folgendem Ergebnis:

Das xml: lang-Attribut

Das xml: lang- Attribut ist der XHTML-Ersatz für das lang- Attribut. Der Wert des Attributs xml: lang sollte ein ISO-639-Ländercode sein, wie im vorherigen Abschnitt erwähnt.

Generische Attribute

Hier ist eine Tabelle mit einigen anderen Attributen, die mit vielen HTML-Tags problemlos verwendet werden können.

Attribut	Optionen	Funktion
ausrichten	rechts, links, Mitte	Richtet Tags horizontal aus
valign	oben Mitte unten	Richtet Tags innerhalb eines HTML-Elements vertikal aus.
bgcolor	numerische, hexadezimale, RGB-Werte	Platziert eine Hintergrundfarbe hinter einem Element
Hintergrund	URL	Platziert ein Hintergrundbild hinter einem Element
Ich würde	Benutzerdefinierten	Benennt ein Element zur Verwendung mit Cascading Style Sheets.
Klasse	Benutzerdefinierten	Klassifiziert ein Element zur Verwendung mit Cascading Style Sheets.
Breite	Zahlenwert	Gibt die Breite von Tabellen, Bildern oder Tabellenzellen an.
Höhe	Zahlenwert	Gibt die Höhe von Tabellen, Bildern oder Tabellenzellen an.
Titel	Benutzerdefinierten	"Popup" -Titel der Elemente.

Wir werden verwandte Beispiele sehen, während wir andere HTML-Tags untersuchen. Eine vollständige Liste der HTML-Tags und der zugehörigen Attribute finden Sie unter HTML-Tags .