HTML5 - Dokument- und Attributerstellung

HTML5 - Dokument- und Attributerstellung

Dies ist der am wenigsten interessante Teil, aber ohne Zweifel einer der kritischsten. Jedes Dokument HTML verwendet zumindest einen Teil dieser Elemente und manchmal alle, daher schadet es nicht, dass wir wissen, wie man sie richtig zum Erstellen von Dokumenten verwendet HTML5 richtig und allgemein.
Elemente des Dokumenttyps
Beginnen wir mit den Elementen von type dokumentieren. Dies sind die Blöcke, die unser Dokument prägen HTML und legt einen anfänglichen Kontext für den Browser fest.
Das doctype-Element
Das Element Dokumenttyp es ist einzigartig in seiner kategorie. Es empfiehlt sich, jedes Dokument zu starten HTML die wir mit einem Element vom Typ . erstellen Dokumenttyp. Dies ist das Element, das dem Browser mitteilt, dass er damit zu tun hat HTML.
Die meisten Browser werden unsere Inhalte trotzdem korrekt anzeigen, wenn wir die Dokumenttyp, aber es ist eine schlechte Praxis, dem Browser so zu vertrauen.
Die richtige Syntax zum Anwenden eines Elements vom Typ Dokumenttyp ist der nächste:
Das HTML-Element
Dieses Element wird meistens als Wurzelelement bezeichnet und zeigt den Anfang des HTML-Codes in unserem Dokument an.
Die Syntax lautet wie folgt:


Inhalte und Elemente hier

Das Kopfelement
Das Element Kopf Es enthält alle Metadaten für das Dokument. In HTML, liefern die Metadaten dem Browser Informationen über den Inhalt und das Markup im Dokument, aber zusätzlich können wir Skripte und Verweise auf externe Ressourcen wie Stylesheets einschließen CSS.
Die Syntax innerhalb des Dokuments lautet wie folgt:



Hallo


Das Körperelement
Dieses Element kapselt den Inhalt eines Dokuments HTML, ist das Gegenteil des Head-Elements, das die Metadaten und Informationen des Dokuments kapselt. Das Element Karosserie es folgt immer dem Head-Element, was bedeutet, dass es das zweite Kind in der Struktur des Root-HTML-Elements ist.
Sehen wir uns seine Syntax an:

Beispiel

ich mag Äpfel und Orangen.

Elemente vom Typ Metadaten
Die Metadatentyp-Elemente ermöglichen es uns, Informationen über das Dokument bereitzustellen HTML. Sie sind nicht selbst zufrieden, geben jedoch Auskunft über die Inhalte, die ihnen folgen werden. Dem Kopfelement werden Elemente vom Typ Metadaten hinzugefügt.
Einen Titel für unser Dokument setzen
Das Element Titel einen Titel oder einen Namen für unser Dokument setzen. Browser zeigen den Inhalt dieses Elements normalerweise am oberen Rand des Fensters oder der Registerkarte an.
Sehen wir uns an, wie wir es zu unserer Struktur hinzufügen:

Beispiel

ich mag Äpfel und Orangen.

Basis für relative URLs schaffen
Das Basiselement fixiert a URL Basis, in der welche relativen Links im Dokument enthalten sind HTML wird gelöst. Ein relativer Link ist ein Link, der das Protokoll, den Host und den Port der URL auslässt und gegen eine andere URL ausgewertet wird. Das Basiselement legt außerdem fest, wie Links geöffnet werden, wenn ein Benutzer darauf klickt und wie sich der Browser nach Eingabe eines Formulars verhält.
Nachdem wir die wesentlichen Elemente für das Dokument gesehen haben, können wir nur mit den restlichen Elementen vervollständigen, die für die Metadaten funktionieren und so ein Dokument erstellen HTML korrekt ist und von jedem Browser am besten interpretiert werden kann.
Attribute

• dir

Attribut dir gibt die Richtung des in einem Element enthaltenen Texts an. Die unterstützten Werte dafür sind:

• ltr (Text von links nach rechts)
• rtl (Text von rechts nach links)

Sehen wir uns ein einfaches Beispiel für seine Anwendung an:

Beispiel

dir = "rtl"> Dies ist von rechts nach links

dir = "ltr">Das ist von links nach rechts

• Kontextmenü

Mit diesem Attribut können wir den Kontext der Elemente für die Menüs definieren. Diese erscheinen auf dem Bildschirm, wenn der Benutzer sie sozusagen auslöst, zum Beispiel wenn wir mit der rechten Maustaste auf ein Element klicken.

• ziehbar

Attribut ziehbar ist Teil der HTML5-Unterstützung für ziehen und loslassen und wird verwendet, um anzuzeigen, wann ein Element gezogen werden kann.

• Abwurfgebiet

Attribut Abwurfgebiet ist Teil der HTML5-Unterstützung für ziehen und loslassen y ist das Gegenstück zum ziehbaren Attribut, das oben erläutert wurde.

• versteckt

Attribut versteckt Es ist ein boolesches Attribut, das angibt, dass ein Element nicht relevant ist und daher im Dokument nicht sichtbar ist. Browser interpretieren dieses Attribut so, dass das Element aus der Sicht des Benutzers ausgeblendet wird. Sehen wir uns ein Beispiel dafür an:

Beispiel
Umschalten



versteckt>

Süßkartoffel	Stadt
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

In diesem Beispiel definieren wir eine Tabelle, die ein tr-Element enthält, das eine Zeile repräsentiert, in der das versteckte Attribut vorhanden ist. Zusätzlich definieren wir einen Button, der beim Drücken die Javascript-Funktion aufruft toggleVersteckt wodurch das versteckte Attribut entfernt wird.

• gehen

Eines der bekanntesten Attribute ist gehen, mit dem Sie einem Element eine eindeutige Kennung zuweisen können. Diese Bezeichner werden häufig verwendet, um ein Element zu stylen oder ein Element mit Javascript auszuwählen. Sehen wir uns ein Beispiel an, wie wir das id-Attribut verwenden, um ein Element zu formatieren.

Beispiel

id = "w3clink"href =" http://w3c.org "> W3C-Website

• Rechtschreibprüfung

Attribut Rechtschreibprüfung wird verwendet, um anzugeben, ob der Browser die Syntax einiger Inhalte überprüfen soll. Die Verwendung dieses Attributs ist nur sinnvoll, wenn es auf ein Element angewendet wird, das der Benutzer bearbeiten kann.
Sehen wir uns ein Beispiel an:

Beispiel
Rechtschreibprüfung = "wahr"> Dies ist ein falsch geschriebener Text

• Stil

Attribut Stil ermöglicht es uns, einen CSS-Stil direkt in einem Element zu definieren, wir sehen:

Beispiel
style = "Hintergrund: grau; Farbe: weiß; Polsterung: 10px">
Besuchen Sie die Apress-Website

• tabindex

Mit diesem Attribut können wir die Reihenfolge der Brennpunkte der Elemente steuern, wenn wir über den Tabellenschlüssel darauf zugreifen.
Beispiel
Süßkartoffel: tabindex = "1"/>

Stadt: tabindex = "- 1"/>

Land: tabindex = "2"/>

tabindex = "3"/>

Wir konnten alles über Attribute und ihre Anwendung auf Elemente in unserem HTML-Dokument lernen. Dies, um deren Funktionalität so zu erweitern, dass sie den Bedürfnissen unserer Website entspricht.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben