HTML steht für Hypertext Markup Sprache. Es werden mehrere Tags verwendet, um eine Struktur von Webseiten zu erstellen. Diese Tags sind auch als HTML -Elemente bekannt. Die HTML -Elemente zeigen Inhalte im Browser an.

Die Lernergebnisse dieses Artikels sind:

• Was ist HTML -Dokumentstruktur?
• Was sind HTML -Tags?
• Was sind HTML -Elemente und -attribute??

Im kommenden Abschnitt wird die HTML -Dokumentstruktur erörtert.

Was ist eine HTML -Dokumentstruktur?

Ein Dokument der HTML -Struktur sieht folgt aus:

LinuxHint

Beste Tutorial -Website

Die Elemente, die im oben genannten Code verwendet werden, werden nachstehend erläutert:

• “Ist die Erklärung eines HTML5 -Dokuments.
• “Ist die hE primäre Komponente einer HTML -Seite. Das Lang -Attribut mit dem Wert “en”Repräsentiert die englische Sprache.
• “”Hält die Meta-Information über die Seite.
• “”Geben Sie die UTF-8.
• “”Enthält den Link zum CSS -Stylesheet.
• “”Definiert einen HTML -Seitentitel, der in der Titelleiste des Browsers angezeigt wird.
• “Schließen Sie das Tag des Elements.
• “Das Element enthält den im Browser sichtbaren Inhalt.
• “

  Das Element bestimmt die Überschrift im Dokument.

• “

  ”Definiert einen Absatz.

• “Ist das Schlussetikett des Körperselements.
• “Ist das Schlussetikett des HTML -Rootelements.

Ausgang

In der obigen Ausgabe repräsentiert der rote Pfeil den Titel, der blaue Pfeil repräsentiert die Überschrift und der grüne Pfeil repräsentiert den Absatz.

Was sind HTML -Tags?

Es gibt mehrere Tags, mit denen eine HTML -Seite bildet. Diese Tags werden auch als HTML -Elemente bezeichnet und werden nach einem Start -Tag, Inhalt im Tag und dem End -Tag bestimmt. Die Tags sind von zwei Typen, die sind:

• Gepaarte Tags
• Leere Tags

Beispiel 1: Verwenden Sie gepaarte Tags in HTML?

HTML -Elemente mit Start- und Schließen -Tags werden als gepaarte Tags bezeichnet. Einige Beispiele für gepaarte Tags werden unten erwähnt:

Das Überschriften -Tag

Der Absatz -Tag

Dieser Text ist kursiv
Ein Schlägestext

Diese Elemente sind im Körperelement der HTML -Datei geschrieben.

Die Ausgabe des oben genannten Codes ist unten angezeigt:

Also das Ergebnis der

Tag wird vom blauen Pfeil gezeigt,

Tag wird durch den grünen Pfeil angezeigt, Tag wird durch den rosa Pfeil angezeigt, und der rote Pfeil zeigt auf ein Ergebnis von Tag.

Beispiel 2: Was sind leere Tags in HTML?

Einige HTML -Tags werden als leere Elemente bezeichnet, weil sie nur aus Start -Tags bestehen, wie z
,

---

Tags und mehr.

Was sind HTML -Elemente und -attribute??

Die HTML -Elemente, die manchmal als Tags bezeichnet werden, können den Attributen zugeordnet werden. Diese Attribute werden im Start -Tag geschrieben und verwendet, um den Elementen zusätzliche Informationen hinzuzufügen. Attribute haben Namen und Werte.

Beispiel: HTML -Seitenstruktur

Unten finden Sie ein Beispiel für eine HTML -Seite:

• “”Element gibt einen Teil oder eine Komponente in einem HTML -Dokument an.
• “KlasseIst das Attribut, das Klassennamen für ein Element in CSS und JavaScript angibt:

Nachdem der DIV -Behälter hinzugefügt wurde. Jetzt werden wir einen Header -Abschnitt angeben, indem wir die folgenden Elemente verwenden:

• “Das Element enthält den ersten Einführungsteil.
• “Ist ein Anker -Tag, das einen Hyperlink für HTML -Dateien erstellt.
• “hrefIst das Attribut mit Tag, das den Link anderer HTML -Dateien enthält.
• “
• “
  ”Wird verwendet, um dem HTML -Dokument eine ungeordnete Liste hinzuzufügen, z. B. eine Kugelliste.
  • “
  • ”Repräsentiert einen Element in einer Liste:

  
  LOGO
  
  

  Fügen Sie nach dem Hinzufügen des Header -Elements ein Div -Element mit dem Klassennamen hinzu “hauptsächlichDas hält das Bild. Ein Bild platzieren, ein HTML “Das Tag wird mit den Attributen zugeordnet:

  • “srcIst das Attribut, das den Pfad eines Bildes angibt.
  • “AltDas Attribut wird verwendet, um einen Text anzugeben, der auf dem Bildschirm anstelle des Bildes angezeigt wird, wenn das Bild nicht geladen wird:

  
  
  

  Fügen Sie dann einen Div mit dem Klassennamen hinzu “Artikel”. Es enthält die unten aufgeführten Elemente:

  • “Element gibt in sich geschlossener und unabhängiger Inhalt an.
  • “

    ”Wird hinzugefügt, um die Überschrift einzuschließen.

  • “

    Element wird verwendet, um einen Absatz in HTML anzugeben:

  
  

  
  

  Artikelüberschrift

  
  

  LinuxHint ist die beste Online -Website. Es wurde zu Bildungszwecken entwickelt. Wir schreiben Artikel und machen Videos, um die Welt online zu unterrichten!

  
  

  
  

  Fügen Sie dann ein Fußzeilenelement wie folgt hinzu:

  • “Element fügt dem HTML -Dokument eine Fußzeile hinzu. Es enthält normalerweise Informationen zu Urheberrechtsdaten, Links und über den Autor.
  • “Element gibt die kleine Schriftgröße an:

  Wir haben also mehrere Elemente und Attribute erfahren, die in einem HTML -Dokument verwendet werden. Speichern Sie nun die Änderungen in der Datei und öffnen Sie sie im Webbrowser. Infolgedessen sieht Ihre Webseite so aus:

  Lassen Sie uns nun unsere Webseite mit CSS stylen.

  Stil „Körper“ Element

  Körper
  Rand: 0;
  Polsterung: 0;
  Kastengrößen: Border-Box;
  Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
  

  Im Folgenden finden Sie die Eigenschaften, die auf den HTML -Körperabschnitt angewendet werden:

  • “RandEigenschaft wird verwendet, um Platz um das Element hinzuzufügen.
  • “PolsterungEigenschaft, die zum Einfügen von Platz in den Rand des Elements oder um den Inhalt des Elements verwendet wird.
  • “Kastengrößen"Mit dem Wert"Grenzschachtel”Erweitert die Breite und Höhe des Tieres an den Grenzkanten.
  • “SchriftfamilieEigenschaft wird mit der Liste der Werte festgelegt. Diese Liste wird bereitgestellt, um sicherzustellen.

  Stil „Container“ div

  .Container
  Max-Breite: 90%;
  Rand: 0 Auto;
  

  Hier:

  • “maximale BreiteEigenschaft gibt die maximale Breite des Elements an.
  • “RandEigenschaft fügt Platz um das Element um.

  Stil „Haupt“ Div

  hauptsächlich
  Anzeige: Flex;
  Justify-Content: Center;
  

  Das Hauptelement wird mit den folgenden Eigenschaften gestaltet:

  • “AnzeigeProperty Flex macht das Layout des Elements für die darin enthaltenen Elemente flexibel.
  • “RechtfertigungsbekämpfungDie Eigenschaft legt die Ausrichtung des Artikel des flexiblen Elements vertikal fest.

  Stil „Header“ Element

  Header
  Padding-Top: 10px;
  Padding-Bottom: 10px;
  Hintergrundfarbe: #ffffff;
  Anzeige: Flex;
  Rechtfertigungsbekämpfung: Weltraum zwischen;
  Ausrichtung: Zentrum;
  

  Das Header -Element ist mit den unten genannten Eigenschaften dekoriert:

  • “PolsterungEigenschaft fügt den Raum oben im Element hinzu.
  • “Padding-BottomDie Eigenschaft legt den Platz vom Boden des Elements fest.
  • “HintergrundfarbeEigenschaft verteilt die Hintergrundfarbe des Elements.
  • “Anzeige”Eigenschaft mit dem Wert“biegen”Wird das Element für die darin enthaltenen Elemente flexibel machen.
  • “Rechtfertigungsbekämpfung”Mit dem Wert der Wertschöpfung erhöht der Platz zwischen seinen Elementen Platz.
  • “AusrichtungDie Eigenschaft legt die Ausrichtung des Artikels horizontal fest.

  Stil "ul" des "Header" Elements

  Header ul
  Listenstil: Keine;
  Anzeige: Flex;
  

  Das UL -Element des Header -Tags wird mit diesen Styling -Eigenschaften angewendet:

  • “Listenstil"Eigenschaft ist auf" eingestellt "keinerDas entfernen den Bulleted -Stil aus der Liste.
  • “AnzeigeDas Eigentum funktioniert genauso wie zuvor besprochen.

  Stil „A“ Element

  Header ul li a
  Textdekoration: Keine;
  Polsterung: 10px;
  Farbe: #000000;
  

  Hier:

  • “Textdekoration”Eigenschaft mit dem Wert“keiner”Entfernt die Untersteuerung aus dem Text.
  • “PolsterungEigenschaft fügt Platz in der Grenze des Elements hinzu.
  • “FarbeEigenschaft gibt die Farbe der Schrift an.

  Stil „img“ Element

  img
  Objekt-Fit: Deckung;
  Breite: 100%;
  Höhe: 300px;
  

  Der "imgDas Element wird durch Bereitstellung der folgenden Eigenschaften gestaltet:

  • “Objektfit”Legt den Inhalt des ersetzten Elements fest.
  • “BreiteEigenschaft definiert die Breite des Elements.
  • “HöheEigenschaft wird verwendet, um die Höhe des Elements zu definieren.

  Stil "Artikel" Element

  Artikel
  Breite: 450px;
  Text-Align: Mitte;
  Rand: Auto;
  

  Das Artikelelement wird mit den unten erläuterten Eigenschaften gestaltet:

  • “BreiteEigenschaft wird für die Einstellung der Breite des Elements verwendet.
  • “TextausrichtungDefiniert die Textausrichtung des Elements.
  • “RandEigenschaft erzeugt Platz um das Element.

  Stil „Fußzeile“ Element

  Fusszeile
  Padding-Top: 20px;
  Padding-Bottom: 20px;
  Hintergrundfarbe: #000000;
  Farbe: #ffffff;
  Text-Align: Mitte;
  

  Der "FusszeileDas Element wird mit den unten erklärten Eigenschaften gestaltet:

  • “PolsterungDie Eigenschaft fügt Platz oben im Inhalt des Elements hinzu.
  • “Padding-BottomEigenschaft wird verwendet, um den unteren Bereich des Inhalts des Elements hinzuzufügen.
  • “Hintergrundfarbe”Legt die Hintergrundfarbe des Elements fest.
  • “Farbe”Wird verwendet, um die Schriftfarbe anzugeben.

  Stil "H2" des "Artikel" -Elements

  Artikel H2
  Text-Align: Mitte;
  

  Das H2 -Element innerhalb des Artikel -Tags wird mit dem “angewendetTextausrichtungEigenschaft mit dem Wertzentrum.

  Stil "P" des "Artikel" -Elements

  Artikel P
  Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
  Schriftgröße: 20px;
  

  Hier:

  • “SchriftfamilieDie Eigenschaft wird mit den Werten Verdana, Genf, Tahoma und Sans-Serif festgelegt. Diese Liste wird bereitgestellt, um sicherzustellen, dass der erste Stil, wenn der erste Stil nicht unterstützt wird, der andere angewendet wird.
  • “Schriftgröße”Legt die Größe der Schriftart fest.

  Hier ist der endgültige Aussehen der HTML -Seite nach Anwendung der CSS -Eigenschaften:

  Das waren alles wesentliche Informationen zur Struktur einer HTML -Seite.

  Abschluss

  Ein HTML -Dokument ist eine Struktur einer Webseite. In HTML -Dokumenten werden mehrere Elemente verwendet, die den Browser anweisen, was auf der Webseite angezeigt werden soll. Diese Elemente können mit ihren Start- und End -Tags gepaart oder leer sein, wie z
  ,

  ---

  Tags und mehr. Die HTML -Elemente werden unter Verwendung von CSS Styling -Eigenschaften angewendet. Für ein besseres Verständnis hat dieser Artikel die HTML -Seitenstruktur mit Hilfe eines praktischen Beispiels erläutert.