HTML-Grundlagen. HTML-Grundlagen HTML-Paar-Tags

Etikett ( pl. Tags, manchmal Tag) ist ein Element der HTML-Sprache, das zum Markieren des Quelltexts einer Webseite verwendet wird. Tags sind Abkürzungen oder Abkürzungen englischer Wörter in spitzen Klammern, zum Beispiel tag

…

Jedes Tag in HTML hat eine besondere Bedeutung und ist für die Anzeige bestimmter Daten verantwortlich. Die Groß-/Kleinschreibung von Buchstaben in Tag-Namen spielt keine Rolle, z. B. Tag

…

…

Es gibt mehr als 90 Tags in HTML. Normalerweise betrifft ein Tag nur einen Teil des Dokuments, zum Beispiel das Überschriften-Tag der ersten Ebene ... In solchen Fällen werden gepaarte Tags verwendet: Öffnung Und Schließen. Ein öffnendes Tag (z. B. ) erzeugt den Effekt und ein schließendes Tag ( ) stoppt den Effekt. Wie Sie dem Beispiel entnehmen können, enthält das schließende Tag immer dieses Symbol (/) – einen Schrägstrich. Diese Tags werden aufgerufen Doppel.

Einige Tags haben dort, wo sie erscheinen, einen einmaligen Effekt. Zum Beispiel ein horizontales Balken-Tag oder ein Bildanzeige-Tag . Solche Tags haben keine schließenden Tags. Solche Tags werden als nicht gepaart bezeichnet.

Darüber hinaus werden Tags in mehrere Typen unterteilt, die sich in ihren Funktionen unterscheiden:

• Dokumenttitel-Tags;
• Blockelemente;
• Inline-Elemente;
• universelle Elemente;
• Listen;
• Tische;
• Rahmen.

Diese Unterteilung ist nicht streng, daher sind einige Tags vorhanden verschiedene Gruppen. Zum Beispiel Tags zum Erstellen von Listen und

gelten sowohl für Listen als auch für Blockelemente.
Tag-Struktur

Beim Laden im Browser werden die Tags selbst nicht angezeigt, sie beeinflussen jedoch die Art und Weise, wie ihr Inhalt angezeigt wird. Wenn ein Tag falsch geschrieben ist, wird es vollständig ignoriert.

Alle Tags haben eine bestimmte Struktur, die beim Schreiben beachtet werden muss. Darüber hinaus verfügen fast alle Tags über verschiedene Attribute, die die Darstellung des Inhalts verändern können.

Schauen wir uns die korrekte Struktur von Tags an, die Attribute enthalten:

• 
• Ihr eigener Webmaster

Als Beispiel habe ich zwei völlig unterschiedliche Tags angegeben. Erste Single – verantwortlich für die Anzeige von Bildern, Attribut – src="logo.jpg" . Zweite … der gepaarte ist für die Erstellung von Links verantwortlich, das Attribut ist href = "site" .

Schlussfolgerung 1: Attribute können gepaarte und ungepaarte Tags haben.

Schlussfolgerung 2: Nur öffnende Tags können Attribute haben, schließende Tags haben keine Attribute.

Bild zur Verdeutlichung:



Abbildung 1. HTML-Tag-Struktur

Prüfung der Aufmerksamkeit und Kenntnis der HTML-Syntax

Schauen wir uns das Beispiel einer einfachen Webseite an, die wir uns in der Lektion angesehen haben.

Sie haben bereits gelesen, dass jede Sprache aus Tags besteht. In dieser Lektion werden wir uns HTML-Tags genauer ansehen. In der HTML-Sprache werden Tags in einzelne (nicht gepaarte) und gepaarte Tags unterteilt. Einzelne HTML-Tags bestehen also aus einem Tag, das heißt, sie haben kein schließendes Tag. Und gepaarte Deskriptoren haben ein öffnendes und ein schließendes Tag.

Einzel HTML-Tags

Einzelne Tags haben kein schließendes Tag. Zum Beispiel:
, . Zuvor schrieben sie so:
, , jetzt ist diese Art, einzelne Tags zu schreiben, nicht relevant, also schreiben Sie nicht so. Die am häufigsten verwendeten Einzeltags:
- in eine neue Zeile wechseln, - Trennlinie, - Fügen Sie ein Bild ein.

Gepaarte HTML-Tags

Es gibt viele weitere gepaarte Tags. Ein gepaarter Deskriptor verfügt über ein öffnendes und ein schließendes Tag. Das gepaarte Tag bildet einen Container. Der Inhalt des Containers ist der Inhalt zwischen dem öffnenden und dem schließenden Tag. Im Beispiel aus diesem Artikel haben Sie den Tag „Was sind Deskriptoren in HTML?“ gesehen. , das ist also ein gepaartes Tag, der Inhalt dieses Tags ist der Text „Was sind Tags in HTML?“ Sein Anfang ist das Tag und sein Ende ist .

Der Hauptfehler von Anfängern beim Schreiben gepaarter Tags ist die Verwirrung bei der Verschachtelung. Dies ist zum Beispiel der richtige Eintrag:

Fettgedruckter Absatz

. Und hier ist der Fehler:

Fettgedruckter Absatz

, wird ein HTML-Dokument mit einem solchen Layout als ungültig betrachtet. Um die Verschachtelung nicht zu verwechseln, gehen Sie wie folgt vor: Erstellen Sie gepaarte Tags, verschachteln Sie dann andere darin und schreiben Sie am Ende den Text in beide Tags

So schreiben Sie gepaarte Tags richtig

.
Was ist in HTML5 in Bezug auf Tags neu?

HTML5 ist eine Erweiterung von HTML4, behält also die meisten oder alle Deskriptoren von HTML4 bei und fügt eigene hinzu. HTML5 führte spezielle Tags ein, um die Site in Hauptblöcke zu unterteilen: Kopfzeile, Menü, Fußzeile, Seitenleiste und Inhalt.

Warum ist es wichtig zu lernen, wie man Tags verwendet?

Die Suchmaschinen Yandex und Google reagieren empfindlich auf das Layout HTML-Dokumente und prüft sie auf Gültigkeit. Sie suchen nach Schlüsselwörtern, die in spezielle Deskriptoren usw. eingeschlossen sind. Aber darum geht es in diesem Abschnitt nicht. Dies gilt für Werbung (SEO).

Wie lerne ich alle HTML-Tags?

Ja, es gibt einige Tags. Es besteht jedoch keine Notwendigkeit, sie speziell zu unterrichten. Solange Sie üben, etwas zu schreiben, werden Sie sich alle Deskriptoren, sowohl paarweise als auch einzeln, leicht merken können. Natürlich im Laufe der Zeit.

HTML-Tags sind die Grundlage der HTML-Sprache. Tags werden verwendet, um den Anfang und das Ende von Elementen im Markup abzugrenzen.

Jedes HTML-Dokument besteht aus einem Baum von HTML-Elementen und Text. Jedes HTML-Element wird durch ein Start- (öffnendes) und ein endendes (schließendes) Tag identifiziert. Die öffnenden und schließenden Tags enthalten den Namen des Tags.

Alle HTML-Elemente sind in fünf Typen unterteilt:

• leere Elemente - , ,
  , , , , , , , , , , , , ;
• Elemente mit unformatiertem Text - , ;
• Elemente, die unformatierten Text anzeigen - , ;
• Elemente aus einem anderen Namensraum – MathML und SVG;
• gewöhnliche Elemente - alle anderen Elemente.

Die Tabelle zeigt volle Liste Elemente, die von HTML4 und HTML5 unterstützt werden. Experimentelle und Legacy-Tags sind ausgeschlossen. Der HTML5-Spezifikation hinzugefügte Elemente werden blaugrün hervorgehoben.

Vollständige Liste der HTML-Elemente Tabelle 1. HTML-Elemente Tag-Beschreibung

	Wird zum Hinzufügen von Kommentaren verwendet.
	Deklariert den Dokumenttyp und stellt dem Browser grundlegende Informationen zur Verfügung – seine Sprache und Version.
	Erstellt Hypertext-Links.
	Identifiziert Text als Abkürzung oder Akronym. Erklärender Text wird über das Title-Attribut angegeben.
	Gibt die Kontaktinformationen des Autors/Eigentümers des Dokuments oder Artikels an. Wird im Browser kursiv angezeigt.
	Es handelt sich um einen Hyperlink mit Text, der einem bestimmten Bereich auf einer Imagemap oder einem aktiven Bereich innerhalb einer Imagemap entspricht. Immer innerhalb eines Tags verschachtelt.
	Ein Inhaltsabschnitt, der einen unabhängigen Teil eines Dokuments oder einer Website bildet, z. B. ein Zeitschriftenartikel, ein Blogbeitrag oder ein Kommentar.
	Stellt Seiteninhalt dar, der indirekt mit dem Hauptinhalt der Seite/Site zusammenhängt.
	Lädt Audioinhalte in eine Webseite.
	Stellt eine Textpassage fett dar, ohne den hervorgehobenen Text hervorzuheben oder ihm Bedeutung zu verleihen.
	Gibt die Basisadresse (URL) an, aus der alle relativen Adressen berechnet werden. Dies hilft, Probleme beim Verschieben der Seite an einen anderen Ort zu vermeiden, da alle Links wie zuvor funktionieren.
	Isoliert eine Textpassage, die in einer Sprache verfasst ist, in der der Text von rechts nach links gelesen wird, vom Rest des Textes.
	Zeigt Text in der durch das dir-Attribut angegebenen Richtung an und überschreibt dabei die aktuelle Textrichtung.
	Hebt Text als Zitat hervor und wird zur Beschreibung großer Zitate verwendet.
	Stellt den Hauptteil des Dokuments dar (Inhalt, der nicht Teil der Metadaten des Dokuments ist).
	Text in eine neue Zeile umbrechen.
	Erstellt eine interaktive Schaltfläche. Sie können Inhalte innerhalb des Tags platzieren – Text oder Bild.
	Canvas-Container zum dynamischen Anzeigen von Bildern wie einfachen Bildern, Diagrammen, Grafiken usw. Zum Zeichnen wird die Skriptsprache JavaScript verwendet.
	Fügt der Tabelle eine Beschriftung hinzu. Unmittelbar nach dem Tag eingefügt . Wird verwendet, um die Quelle eines Zitats anzugeben. Wird kursiv angezeigt. Stellt einen Teil des Programmcodes dar, der in einer Monospace-Schriftfamilie angezeigt wird. Wählt eine oder mehrere Tabellenspalten zur Formatierung aus, die nicht denselben Informationstyp enthalten. Erstellt eine strukturelle Gruppe von Spalten, die viele logisch homogene Zellen identifiziert. Das Element dient dazu, den Wert des Wertattributs, der in einem maschinenlesbaren Format vorliegt und von einem Computer verarbeitet werden kann, mit dem Inhalt des Tags zu verknüpfen. Containerelement für ein Dropdown-Listenelement. Variantenwerte werden in Elementen platziert. Wird verwendet, um einen Begriff aus einem Tag zu beschreiben. Markiert Text durch Streichen als gelöscht. Erstellt ein interaktives Widget, das der Benutzer öffnen oder schließen kann. Stellt einen Container für Inhalte dar. Der sichtbare Titel des Widgets wird im Tag platziert. Kennzeichnet ein Wort als Begriff, indem es kursiv geschrieben wird. Der folgende Text sollte eine Definition dieses Begriffs enthalten. Ein interaktives Element, mit dem der Benutzer interagiert, um eine Aufgabe abzuschließen, z. B. ein Dialogfeld, ein Inspektor oder ein Fenster. Ohne das open-Attribut ist es für den Benutzer nicht sichtbar. Ein Container-Tag für Abschnitte eines HTML-Dokuments. Wird zum Gruppieren von Blockelementen für die Formatierung mit Stilen verwendet. Ein Container-Tag, das einen Begriff und seine Beschreibung enthält. Wird zur Angabe eines Begriffs verwendet. Hebt wichtige Textpassagen hervor, indem sie kursiv dargestellt werden. Ein Container-Tag zum Einbetten externer interaktiver Inhalte oder eines Plugins. Gruppiert verwandte Elemente in einem Formular, indem ein Rahmen um sie herum gezeichnet wird. Titel/Beschriftung für das Element. Ein eigenständiges Container-Tag für Inhalte wie Illustrationen, Diagramme, Fotos, Codebeispiele, normalerweise mit einer Beschriftung. Definiert den Endbereich (Fußzeile) eines Dokuments oder Abschnitts. Ein Formular zum Sammeln und Senden von Informationen von Benutzern an den Server. Funktioniert nicht ohne das Aktionsattribut. Erstellen Sie sechs Überschriftenebenen für verwandte Abschnitte. Ein Containerelement für HTML-Dokumentmetadaten, z. B. , , , . Abschnitt für einführende Informationen zu einer Website oder einer Gruppe von Navigationslinks. Kann eine oder mehrere Überschriften, ein Logo und Informationen zum Autor enthalten. Eine horizontale Linie zur thematischen Unterteilung von Absätzen. Das Stammelement eines HTML-Dokuments. Teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt. Es ist ein Container für alle anderen HTML-Elemente. Eine Textpassage wird kursiv gesetzt, ohne sie zusätzlich hervorzuheben. Erstellt einen Inline-Frame, indem ein anderes Dokument in das aktuelle HTML-Dokument geladen wird. Bettet Bilder mithilfe des src-Attributs in ein HTML-Dokument ein, dessen Wert die URL des eingebetteten Bilds ist. Erstellt umfangreiche Formularfelder, in die der Benutzer Daten eingeben kann. Hebt Text durch Unterstreichung hervor. Wird verwendet, um an einem Dokument vorgenommene Änderungen hervorzuheben. Wählt Text aus, der vom Benutzer über die Tastatur in einer Monospace-Schriftart eingegeben werden soll. Wird zum Speichern zusätzlicher Informationen zur Seite verwendet. Diese Informationen werden von Browsern zur Verarbeitung der Seite und von Suchmaschinen zur Indexierung der Seite verwendet. In einem Block können mehrere Tags vorhanden sein, da diese je nach verwendeten Attributen unterschiedliche Informationen enthalten. Indikator für die Messung in einem bestimmten Bereich. Ein Abschnitt eines Dokuments, der Navigationslinks für die Site enthält. Definiert einen Abschnitt, der kein Scripting unterstützt. Container zum Einbetten von Multimedia (z. B. Audio, Video, Java-Applets, ActiveX, PDF und Flash). Sie können auch eine weitere Webseite in das aktuelle HTML-Dokument einfügen. Das Tag wird verwendet, um die Parameter des Plugins zu übergeben. Geordnete nummerierte Liste. Die Nummerierung kann numerisch oder alphabetisch erfolgen. Ein Container mit einem Titel für eine Gruppe von Elementen. Gibt eine Option/Option zur Auswahl aus der Dropdown-Liste , oder an. Feld zur Anzeige des Ergebnisses einer mit dem Skript berechneten Berechnung. Absätze im Text. Definiert Parameter für Plugins, die mithilfe des Elements eingebettet werden. Ein Containerelement, das ein Element enthält und null oder mehr Elemente. An sich zeigt es nichts an. Ermöglicht dem Browser, das am besten geeignete Bild auszuwählen. Gibt Text ohne Formatierung aus, wobei Leerzeichen und Textumbrüche erhalten bleiben. Kann zum Anzeigen von Computercode, E-Mail-Nachrichten usw. verwendet werden. Ein Indikator für die Erledigung einer Aufgabe jeglicher Art. Definiert ein kurzes Zitat. Behälter für ostasiatische Symbole und deren Entschlüsselung. Definiert seinen verschachtelten Text als Basiskomponente der Anmerkung. Fügt über oder unter den im Element enthaltenen Zeichen eine kurze Beschreibung hinzu, die in kleinerer Schriftart angezeigt wird. Markiert eingebetteten Text als zusätzliche Anmerkung. Zeigt alternativen Text an, wenn der Browser das Element nicht unterstützt. Zeigt Text, der nicht aktuell ist, durchgestrichen an. Wird verwendet, um Text anzuzeigen, der das Ergebnis der Programmcode- oder Skriptausführung darstellt, sowie Systemmeldungen. Wird in Monospace-Schriftart angezeigt. Wird zum Definieren eines clientseitigen Skripts (normalerweise JavaScript) verwendet. Enthält entweder Skripttext oder verweist mithilfe des src-Attributs auf eine externe Skriptdatei. Definiert einen logischen Bereich (Abschnitt) einer Seite, normalerweise mit einer Kopfzeile. Ein Steuerelement, mit dem Sie Werte aus einem vorgeschlagenen Satz auswählen können. Variantenwerte werden in eingefügt. Zeigt Text in einer kleineren Schriftgröße an. Gibt den Speicherort und Typ alternativer Medienressourcen für , , an. Container für Inline-Elemente. Kann zum Formatieren von Textpassagen verwendet werden, z. B. zum Hervorheben einzelner Wörter durch Farbe. Betont den Text und hebt ihn fett hervor. Enthält einbettbare Stylesheets. Gibt die tiefgestellte Schreibweise von Symbolen an, beispielsweise den Elementindex in chemischen Formeln. Erstellt einen sichtbaren Titel für das Tag. Wird mit einem ausgefüllten Dreieck angezeigt. Wenn Sie darauf klicken, können Sie die Titeldetails anzeigen. Gibt die hochgestellte Schreibweise von Zeichen an. Tag zum Erstellen einer Tabelle. Definiert den Hauptteil der Tabelle. Erstellt eine Tabellenzelle. Wird zum Deklarieren von HTML-Codefragmenten verwendet, die geklont und von einem Skript in ein Dokument eingefügt werden können. Der Inhalt eines Tags ist kein untergeordnetes Element davon. Erstellt große Texteingabefelder. Definiert den Tabellenfuß. Erstellt einen Tabellenzellentitel. Definiert den Tabellentitel. Definiert Datum/Uhrzeit. Der Titel eines HTML-Dokuments, der oben in der Titelleiste des Browsers angezeigt wird. Kann auch in den Suchergebnissen erscheinen, daher sollte dies bei der Angabe eines Titels berücksichtigt werden. Erstellt eine Tabellenzeile. Fügt Untertitel für Elemente und hinzu. Hebt eine Textpassage durch Unterstreichung ohne zusätzliche Hervorhebung hervor. Erstellt eine Liste mit Aufzählungszeichen. Hebt Variablen aus Programmen hervor, indem sie kursiv angezeigt werden. Fügt der Seite Videodateien hinzu. Unterstützt 3 Videoformate: MP4, WebM, Ogg. Zeigt dem Browser an, wo eine lange Zeile möglicherweise unterbrochen wird. Spickzettel mit Tags Zur Vereinfachung der Verwendung habe ich die Tags in thematische Abschnitte gruppiert und für jedes Tag Anzeigeeigenschaftswerte hinzugefügt. Um zur Tabelle zu gelangen, klicken Sie auf das Bild. HTML ist eine normale Textdatei mit der Erweiterung .htm (html). Um zunächst eine einfache Seite zu erstellen, wenn Sie gerade trainieren, benötigen Sie lediglich einen Notizblock. Öffnen Sie den Notizblock und schreiben Sie einen Text. Jedes HTML-Element ist ein Tag, der von Klammern umgeben ist. Jede Datei und jede HTML-Seite beginnt mit einem Tag und endet mit einem Tag. Dieses Tag zeigt dem Browser (das ist das Programm, in dem Sie Internetseiten anzeigen) lediglich an, dass es sich bei diesem Dokument um ein HTML-Markup-Dokument handelt. Das Tag bedeutet den Anfang des HTML-Dokuments und das schließende Tag bedeutet das Ende des HTML-Dokuments. Innerhalb dieser Tags gibt es mehrere andere wichtige Tags. Unmittelbar nach dem Tag folgen Tags, die den Seitentitel und den Seitentext angeben. Meine erste HTML-Seite Das Tag bezeichnet den Titel des Fenstertitels, wenn diese Seite angezeigt wird. Jetzt können Sie im Editor ein neues Textdokument erstellen, den oben angezeigten Text kopieren und als Seite1.html speichern und im Browser ausführen. In der Titelleiste des Browserfensters sehen Sie den Namen der Seite und a leere Seite, weil Wir zeigen im Hauptteil der Seite nichts in Tags an. Daher ist der obige Text für uns das Grundgerüst jeder Webseite. Gepaarte und ungepaarte Tags! , , Dies sind einfach gepaarte Tags – jene Tags, die als Paar vorliegen: ein Tag und sein schließendes Tag, ein schließendes Tag mit dem /-Symbol. Bei gepaarten Tags ist der Wert zwischen dem Anfang und dem Ende des Tags die Aktion des Tags. Die Aktion wird fortgesetzt, bis ein Tag mit dem /-Symbol gefunden wird. Ungepaarte Tags – sie haben kein schließendes Tag. Im Folgenden geben wir Beispiele für solche Tags. – Der Titel der HTML-Seite, der Schlüsselwörter für Suchmaschinen, verschiedene Skripte usw. enthält. – Der Hauptteil des HTML-Dokuments selbst. Ungepaartes Tag. Hinweis: In den meisten Fällen werden beim Erstellen von Websites jetzt vorgefertigte Routinen, Plugins usw. verwendet. – für eine schnellere Site-Erstellung, aber um solche Routinen und Vorlagen anzuwenden und zu nutzen, sind immer noch minimale Kenntnisse der Sitzungsdaten erforderlich. Ein HTML-Element ist die grundlegende Struktureinheit einer Webseite, die in HTML geschrieben ist. Gepaarte und einzelne HTML-Tags Die Syntax von HTML-Elementen, die aus gepaarten Tags bestehen, lautet: Das Element beginnt mit einem öffnenden Tag. Das Element endet mit einem schließenden Tag. Der Inhalt eines Elements ist alles zwischen dem öffnenden und dem schließenden Tag. Der Inhalt kann Text und/oder andere HTML-Elemente sein. Hinweis: Vergessen Sie nicht, ein „/“ in das schließende Tag einzufügen. Dadurch wird dem Browser mitgeteilt, dass Ihr Element beendet wurde und dass das, was danach kommt, ein weiteres Element ist. Wenn Sie das Zeichen „/“ nicht in das schließende Tag einfügen, verwechselt der Browser es mit einem neuen Element, das in einem vorherigen verschachtelt ist und von dem der Browser annimmt, dass es noch nicht geschlossen ist. Die Syntax für HTML-Elemente, die aus einzelnen Tags bestehen, lautet: Das Element besteht nur aus einem öffnenden Tag. Elemente, die aus einzelnen Tags bestehen, werden als leer bezeichnet. Es gibt insgesamt 16 einzelne Tags in HTML: Verschachtelte Elemente HTML-Elemente, die aus gepaarten Tags bestehen, können entweder beliebige andere Elemente enthalten oder sie selbst können in anderen Elementen verschachtelt sein, und die Verschachtelungstiefe der Elemente ist nicht begrenzt. Das folgende Beispiel besteht aus drei Elementen, von denen zwei verschachtelt sind: Mein erster Absatz Wenn ein Element in einem anderen verschachtelt ist, müssen Sie sicherstellen, dass das verschachtelte Element innerhalb desselben Elements beginnt und endet. So ist beispielsweise der folgende Code falsch: Das ist sehr Interessant Hier geht das Element über die Grenzen des Elements hinaus Beispiel mit korrekter Verschachtelung: Es ist sehr interessant Hier ist das Element richtig verschachtelt – es liegt vollständig innerhalb des Elements Leerzeichen Der Browser ignoriert Leerzeichen im HTML-Code, sodass Sie sie zu Ihrem Vorteil nutzen können, um Ihren Code besser lesbar zu machen. Zu den Leerzeichen gehören Tabulatoren, Zeilenumbrüche usw regelmäßige Räume Sie können in beliebiger Menge verwendet werden. Beispielcode, der Leerzeichen verwendet: Titel Mein erster Titel Mein erster Absatz Der Beispielcode könnte ohne die Verwendung von Leerzeichen geschrieben werden, aber ein solcher Code wäre weniger lesbar: TitelMein erster Titel Mein erster Absatz Da der HTML-Dokumentcode mit der Zeit größer und komplexer wird, werden Sie feststellen, dass die Verwendung von Leerzeichen tatsächlich die Lesbarkeit des Codes verbessert. Freunden erzählen Twitter Frisch... So öffnen Sie das Samsung Galaxy A3 Nächster Artikel So erkennen Sie Blacklists in Samsung-Telefonen Lesen Sie auch Schwarze Liste der Kontakte in Samsung 2023-11-03 00:02:19 So formatieren Sie Ihren Computer, damit Windows nicht gelöscht wird 2023-11-03 00:02:19 Die besten Datenbanken sammeln wir selbst 2023-11-02 00:06:06 Automatische Erkennung der Forum-Engine Bespravny powered by smf 2023-11-02 00:06:06