Erläuterung der Grundelemente von Html Element-HTML-Tutorial-php.cn

Erläuterung der Grundelemente von Html Element

巴扎黑

Freigeben： 2017-07-19 16:45:41

Original

2962 Leute haben es durchsucht

Ich habe diesen Artikel geschrieben, nachdem ich eine Zeit lang im IT Cultivation Park studiert und ihn rezensiert hatte. Obwohl es sich nur um einige grundlegende Wissensinhalte handelt, hoffe ich, dass es allen helfen kann.

Zuerst müssen wir verstehen, was die Definition von HTML ist.

HTML-DOM-Knoten

Im HTML-DOM (Document Object Model) ist jeder Teil ein Knoten:

Das Dokument selbst ist ein Dokumentknoten

Alle HTML-Elemente sind Elementknoten

Alle HTML-Attribute sind Attributknoten

Text innerhalb von HTML-Elementen sind Textknoten

Kommentare sind Kommentarknoten

Element-Objekt

Im HTML-DOM stellt das Element-Objekt ein HTML-Element dar.

Elementobjekte können untergeordnete Knoten vom Typ Elementknoten, Textknoten und Kommentarknoten haben.

Das NodeList-Objekt stellt eine Liste von Knoten dar, beispielsweise eine Sammlung untergeordneter Knoten eines HTML-Elements.

Elemente können auch Attribute haben. Eigenschaften sind Attributknoten.

[HTML: Hypertext--Tag -Sprache, Text: Datei im TXT-Format, Tag: -Tag verwenden, um an den Text -Semantik anzuhängen]

Wenn Sie durch das oben Genannte bereits ein Verständnis von HTML haben, beginnen wir mit dem Studium seiner drei Elemente.

Elemente auf Blockebene, Inline-Elemente und Inline-Block-Elemente

Einige Hintergrundinformationen zur Populärwissenschaft: HTML-Layout: Dokumentation Fluss, Float, Position und Anzeige: Flex-Layout .

Einige Elemente erhalten auch ihre ursprüngliche Semantik basierend auf dem ersten Auftreten des Dokumentenflusses.

Block: Das Blockebenenelement belegt eine Zeile allein, und die Breite und Höhe können eingestellt werden ; Die Breite wird angegeben, das Element auf Blockebene. Standardmäßig wird die Breite des Browsers verwendet, dh 100 % Breite.

Inline: Inline-Elemente: können mehrere Tags enthalten eine Zeile , und die Attributwerte für Breite und Höhe sind nicht wirksam, es hängt ganz vom Inhalt ab, um die Breite und Höhe zu unterstützen!

Inline-Block: Inline-Blockelement: Durch die Kombination der Schlüsselpunkte der Inline- und Blockebene können nicht nur die Breite und Höhe festgelegt werden , aber auch Mehrere Tags sind in einer Zeile vorhanden, um

(div, p, ul, li) anzuzeigen: Element auf Blockebene

Das Standardattribut besteht darin, < vor und nach ;br>Zeilenumbruch einzufügen.

(Span,img,input,a) Text: Inline-Element

Tag hat keine Semantik, Funktion: Attribute können separat festgelegt werden

Angabe einiger der wichtigsten Elemente, die es zu meistern gilt. Gleichzeitig glaube ich, dass es für das Publikum einfacher ist, diese Inhalte zu verstehen und sich daran zu erinnern. Wenn Sie ihr Aussehen noch nicht im Kopf haben. Sie können im Word-Dokument nachsehen, ob ein Textabsatz standardmäßig Zeile für Zeile von links nach rechts und von oben nach unten angeordnet ist. Unabhängig davon, ob die Tabelle eine Zeile und zwei Spalten oder eine Zeile und mehrere Spalten hinzufügt, deckt die Tabelle standardmäßig das gesamte A4-Papier ab. An diesem Punkt sollte sich jeder daran erinnern können.

Die Konzepte und Darstellungen wurden erwähnt, aber wir müssen nicht nur ihre Semantik verstehen, sondern sie auch bodenständig verwenden.

Lassen Sie uns zuerst über

Inline sprechen. Der Text und das Bild müssen rechts, zentriert und mittelverschoben positioniert werden, was genau den 6 Positionen im Word-Editor entspricht. In Webseiteneinstellungen wird häufig Text-align: center verwendet.

Ich werde es nicht einzeln erklären. Hier ist die innere Schrift wie folgt:

Textausrichtung: ist Die Einstellung im Tag der übergeordneten Box gibt an, dass die Inline-Elemente in der Box ( Text oder img Tag) zentriert werden sollen.

Zeilenhöhe: bezieht sich auf die Höhe des Zeilenfelds (Zeilenhöhe) des Textes. Bestehend aus (Abstand oben, unten und Texthöhe)

implementiert das vertikale Prinzip: Containerhöhe = Zeilenfeldhöhe. Die Standardtexthöhe beträgt 16 Pixel. Wenn die Containerhöhe = Zeilenhöhe = 200 Pixel festgelegt ist, wird der obere und untere Abstand automatisch in 184 Pixel unterteilt.

Rand: 0 automatisch: Wird im Box-Tag so eingestellt, dass es in zentriert wird. Generell muss auch die Boxbreite eingestellt werden.

vertical-align:middle: Es wird in den zwei Inline-Element-Tags festgelegt, sodass die beiden Inline-Elemente zwischen den beiden und dem letzten liegen Inline-Element Die vorhergehenden Inline-Elemente sind vertikal zueinander ausgerichtet.

Tex-align und line-height werden oft zusammen verwendet, um eine Textzeile vertikal zu zentrieren.

Vertical-align:middle wird oft für die vertikale Ausrichtung von Text und Bildern verwendet.

Wenn Sie das Vertical-Align-Attribut im Detail studieren möchten, müssen Sie wirklich viele neue Inhalte einbinden. Tatsächlich müssen wir seine Grundlinie, Mittellinie und Oberlinie nicht verstehen. Wir müssen nur wissen, wie man sie verwendet.

Eines muss noch gesagt werden:

vertikal-align ist ein Inline-Block-abhängiges Element. Wenn es sich nicht um ein Inline-Block-Element handelt, wird es ignoriert. Einige Elemente unterstützen dies standardmäßig: Bilder, Schaltflächen, einzelne Kontrollkästchen, einzeilige/mehrzeilige Textfelder und andere HTML-Steuerelemente

Das obige ist der detaillierte Inhalt vonErläuterung der Grundelemente von Html Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!