Wondershare EdrawMind
Mindmap-Galerie CSS-Frontend-HTML-Grundkurs-Schulungsprogramm
- 2
CSS-Frontend-HTML-Grundkurs-Schulungsprogramm
CSS-Frontend-HTML-Grundkurs-Trainingsprogramm, eine Webseite besteht aus drei Teilen, die Struktur ist die Gesamtstruktur der Seite, wo ist der Titel, wo ist der Absatz, wo ist das Bild, die Struktur ist in HTML geschrieben und Die Leistung ist der äußere Stil der Seite, wie z. B. Schriftart, Schriftgröße, Schriftfarbe, Hintergrund.
Bearbeitet um 2022-11-08 10:53:34
- Hundert Jahre Einsamkeit Charakter-Beziehungsdiagramm
Einhundert Jahre Einsamkeit ist das Meisterwerk von Gabriel Garcia Marquez. Die Lektüre dieses Buches beginnt mit der Klärung der Beziehungen zwischen den Figuren. Im Mittelpunkt steht die Familie Buendía, deren Wohlstand und Niedergang, interne Beziehungen und politische Kämpfe, Selbstvermischung und Wiedergeburt im Laufe von hundert Jahren erzählt werden.
- Hundert Jahre Einsamkeit Charakter-Beziehungsdiagramm
Einhundert Jahre Einsamkeit ist das Meisterwerk von Gabriel Garcia Marquez. Die Lektüre dieses Buches beginnt mit der Klärung der Beziehungen zwischen den Figuren. Im Mittelpunkt steht die Familie Buendía, deren Wohlstand und Niedergang, interne Beziehungen und politische Kämpfe, Selbstvermischung und Wiedergeburt im Laufe von hundert Jahren erzählt werden.
- Projektmanagement-Prozess-Vorlage
Projektmanagement ist der Prozess der Anwendung von Fachwissen, Fähigkeiten, Werkzeugen und Methoden auf die Projektaktivitäten, so dass das Projekt die festgelegten Anforderungen und Erwartungen im Rahmen der begrenzten Ressourcen erreichen oder übertreffen kann. Dieses Diagramm bietet einen umfassenden Überblick über die 8 Komponenten des Projektmanagementprozesses und kann als generische Vorlage verwendet werden.
CSS-Frontend-HTML-Grundkurs-Schulungsprogramm
- Hundert Jahre Einsamkeit Charakter-Beziehungsdiagramm
Einhundert Jahre Einsamkeit ist das Meisterwerk von Gabriel Garcia Marquez. Die Lektüre dieses Buches beginnt mit der Klärung der Beziehungen zwischen den Figuren. Im Mittelpunkt steht die Familie Buendía, deren Wohlstand und Niedergang, interne Beziehungen und politische Kämpfe, Selbstvermischung und Wiedergeburt im Laufe von hundert Jahren erzählt werden.
- Hundert Jahre Einsamkeit Charakter-Beziehungsdiagramm
Einhundert Jahre Einsamkeit ist das Meisterwerk von Gabriel Garcia Marquez. Die Lektüre dieses Buches beginnt mit der Klärung der Beziehungen zwischen den Figuren. Im Mittelpunkt steht die Familie Buendía, deren Wohlstand und Niedergang, interne Beziehungen und politische Kämpfe, Selbstvermischung und Wiedergeburt im Laufe von hundert Jahren erzählt werden.
- Projektmanagement-Prozess-Vorlage
Projektmanagement ist der Prozess der Anwendung von Fachwissen, Fähigkeiten, Werkzeugen und Methoden auf die Projektaktivitäten, so dass das Projekt die festgelegten Anforderungen und Erwartungen im Rahmen der begrenzten Ressourcen erreichen oder übertreffen kann. Dieses Diagramm bietet einen umfassenden Überblick über die 8 Komponenten des Projektmanagementprozesses und kann als generische Vorlage verwendet werden.
- Für Sie empfohlen
- Gliederung
CSS-Frontend-HTML-Grundkurs-Schulungsprogramm
CSS
CSS heißt Cascading Style Sheets und wird zum Stylen von Elementen auf der Seite verwendet. Hintergrundfarbe, Schriftfarbe, Schriftgröße. . .
CSS ist für die Leistung in Struktur, Präsentation und Verhalten verantwortlich.
geschriebener Ort
1. Inline-Stile
Schreiben Sie den Stil in das Stilattribut des Tags
Dieser Stil funktioniert nur mit dem aktuellen Tag und kann nicht wiederverwendet werden. Er ist für die spätere Wartung unpraktisch und wird nicht empfohlen.
2. Internes Stylesheet
Schreiben Sie das Stylesheet in das Style-Tag im Kopf
Verwenden Sie interne Stylesheets, um Leistung und Struktur weiter zu trennen. Sie können Stile für mehrere Elemente gleichzeitig festlegen, um die spätere Wartung zu erleichtern.
3. Externe Stylesheets
Schreiben Sie das Stylesheet in eine externe CSS-Datei und führen Sie dann die externe Datei über das Link-Tag ein
Schreiben Sie die Stile in ein externes Stylesheet. Sie können dasselbe Stylesheet auf verschiedenen Seiten verwenden und so Leistung und Struktur vollständig trennen, was die spätere Wartung erleichtert.
Grundgrammatik
Wähler
Verwenden Sie Selektoren, um eine Gruppe von Elementen auf der Seite auszuwählen und dann Stile für sie festzulegen
Elementauswahl
Wählen Sie das angegebene Element auf der Seite basierend auf dem Tag-Namen aus
Syntax: Tag-Name { }
Beispiel:
div{}
P{}
h1{}
ID-Selektor
Wählen Sie ein eindeutiges Element basierend auf seinem ID-Attributwert aus
Syntax: #id {}
Beispiel:
#box1{}
#Hallo{}
Klassenselektor
Wählen Sie eine Gruppe von Elementen basierend auf dem Klassenattributwert des Elements aus
Syntax: .class{}
Beispiel:
.Hallo{}
.Kasten{}
Wildcard-Selektor
Wählen Sie alle Elemente auf der Seite aus
Grammatik:*{}
Die Leistung von Wildcard-Selektoren ist relativ schlecht, daher sollten Sie deren Verwendung vermeiden.
Union-Selektor
Elemente, die mit mehreren Selektoren übereinstimmen, können gleichzeitig ausgewählt werden
Syntax: Selektor 1, Selektor 2, Selektor N{}
Beispiel:
div,p,#box,.hello{}
Kreuzungsauswahl
Es können Elemente ausgewählt werden, die mehrere Bedingungen erfüllen
Syntax: Selektor 1 Selektor 2 Selektor N{}
Beispiel: p.hello{}
Auswahl für abgeleitete Elemente
Wählt die angegebenen Nachkommenelemente des angegebenen Elements aus
Syntax: Vorgängerelement Nachkommenelement {}
Beispiel:
div span {}
div p{}
Auswahl für untergeordnete Elemente
Wählen Sie das angegebene untergeordnete Element des angegebenen Elements aus
Syntax: übergeordnetes Element > untergeordnetes Element {}
Beispiel:
div > span {}
div >p{}
Deklarationsblock
Der Deklarationsblock ist eigentlich eine CSS-Deklaration
Stellungnahme
Jede CSS-Deklaration ist ein Stil, der eigentlich eine Struktur aus Name-Wert-Paaren ist.
Verwendung: Verknüpfung zwischen Name und Wert
:Die linke Seite ist der Name des Stils
:Die rechte Seite ist der Wert des Stils
Jede Aussage endet mit;
Beispiel
Farbe Rot;
Schriftgröße:20px;
Beziehung zwischen Elementen
übergeordnetes Element
Ein Element, das direkt untergeordnete Elemente enthält, wird als übergeordnetes Element bezeichnet.
untergeordnetes Element
Elemente, die direkt in einem übergeordneten Element enthalten sind, werden als untergeordnete Elemente bezeichnet.
Vorfahrenelemente
Elemente, die direkt oder indirekt Nachkommenelemente enthalten, werden als Vorfahrenelemente bezeichnet, und das übergeordnete Element ist auch ein Vorfahrenelement.
Nachkommende Elemente
Elemente, die direkt oder indirekt in Vorgängerelementen enthalten sind, werden als Nachkommenelemente bezeichnet, und untergeordnete Elemente sind ebenfalls Nachkommenelemente.
Bruderelemente
Elemente, die das gleiche übergeordnete Element haben, werden als Geschwister bezeichnet
Blockelemente und Inline-Elemente
Blockelement
Ein Blockelement belegt unabhängig von seinem Inhalt eine eigene Zeile auf der Seite.
Verwenden Sie im Allgemeinen Blockelemente zum Layouten der Seite
Gemeinsame Blockelemente
div
P
h1~h6
Inline-Elemente
Inline-Elemente nehmen nur ihre eigene Größe ein und belegen keine Zeile.
Inline-Elemente werden auch Inline-Elemente (Inline) genannt.
Im Allgemeinen werden Inline-Elemente verwendet, um Effekte für Text festzulegen.
Gemeinsam inline
Spanne
A
Bild
Paketregeln
Im Allgemeinen werden Blockelemente zum Umschließen von Inline-Elementen verwendet, Inline-Elemente werden jedoch nicht zum Umschließen von Blockelementen verwendet.
Das a-Element kann jedes Element außer a selbst enthalten
Das p-Element darf keine Blockelemente enthalten
Pseudoklassen und Pseudoelemente
Pseudoklassen und Pseudoelemente werden verwendet, um einen speziellen Zustand oder eine spezielle Position des Elements darzustellen.
:Verknüpfung
Stellt einen normalen Link dar (unbesuchter Link)
:hat besucht
Stellt besuchte Links dar
:schweben
Links, über die die Maus fährt, können auch für andere Elemente so eingestellt werden, dass sie schweben.
:aktiv
Der angeklickte Link kann auch für andere Elemente aktiv gesetzt werden.
:Fokus
Gibt den Status des Elements an, das den Fokus erhält, und wird im Allgemeinen in Textfeldern verwendet.
::Auswahl
Zeigt an, dass der Inhalt ausgewählt ist
Verwenden Sie in Firefox stattdessen ::-moz-selection
:erster Brief
Stellt das erste Zeichen dar
:erste Linie
Stellt die erste Textzeile dar
:Vor
Wählen Sie die Vorderseite des Elements aus
Im Allgemeinen wird diese Pseudoklasse in Verbindung mit Inhalten verwendet, über die Inhalte zum angegebenen Speicherort hinzugefügt werden können.
:nach
Wählen Sie die letzte Kante des Elements aus
Im Allgemeinen wird diese Pseudoklasse in Verbindung mit Inhalten verwendet, über die Inhalte zum angegebenen Speicherort hinzugefügt werden können.
Attributselektor
Wählen Sie das angegebene Element basierend auf seinen Attributen aus
[Attributname]
Wählen Sie Elemente mit angegebenen Attributen aus
[Attributname="Attributwert"]
Wählen Sie Elemente aus, deren Attributwert dem angegebenen Wert entspricht
[Attributname^="Attributwert"]
Wählen Sie Elemente aus, deren Attributwert mit dem angegebenen Inhalt beginnt
[Attributname$="Attributwert"]
Wählen Sie Elemente aus, deren Attributwert mit dem angegebenen Inhalt endet
[Attributname*="Attributwert"]
Wählen Sie Elemente aus, deren Attributwert den angegebenen Inhalt enthält
Auswahl für Geschwisterelemente
Wählen Sie das nächste gleichgeordnete Element aus
Vorherige Nächste
Wählen Sie alle folgenden Geschwisterelemente aus
Vorheriges ~ Alles Folgende
Pseudoklasse für untergeordnete Elemente
:erstes Kind
Suchen Sie das erste untergeordnete Element des übergeordneten Elements und sortieren Sie alle untergeordneten Elemente
:letztes Kind
Suchen Sie das letzte untergeordnete Element des übergeordneten Elements und sortieren Sie alle untergeordneten Elemente
:ntes Kind
Suchen Sie das untergeordnete Element an der angegebenen Position im übergeordneten Element und sortieren Sie es unter allen untergeordneten Elementen
Beispiel
p:nth-child(3)
Sie können even verwenden, um untergeordnete Elemente mit gerader Nummer zu finden
Sie können odd verwenden, um ungerade untergeordnete Elemente zu finden
:erster Typ
Sucht das erste untergeordnete Element des angegebenen Typs
:letzter Typ
Sucht das letzte untergeordnete Element des angegebenen Typs
:n-tel-Typ
Sucht das angegebene untergeordnete Element des angegebenen Typs
Pseudoklasse negieren
Eliminieren Sie Elemente, die den Anforderungen entsprechen, aus einer Menge von Elementen
Grammatik:
:nicht(Selektor)
Beispiel:
.abc:nicht(div)
Stilvererbung
Das Festlegen von Stilen für ein Vorgängerelement wird auch auf seine Nachkommenelemente angewendet. Diese Funktion wird als Stilvererbung bezeichnet.
Durch die Stilvererbung können einige Stile einheitlich auf Vorgängerelemente festgelegt werden, sodass auf alle Nachkommen derselbe Stil angewendet wird.
Es werden jedoch nicht alle Stile vererbt, z. B. hintergrundbezogen, randbezogen, positionierungsbezogen. Spezifische Referenzdokumente
Selektorpriorität
Wenn bei der Verwendung von Selektoren zum Stylen von Elementen Stilkonflikte auftreten, bestimmt die Priorität des Selektors, welcher Stil verwendet wird.
Priorität
Inline-Stile
1000
ID-Selektor
100
Klassen- und Pseudoklassenselektoren
10
Elementauswahl
1
Wildcard-Selektor
0
Geerbte Stile
keine Priorität
Bei Stilkonflikten müssen die zugehörigen Selektorprioritäten summiert und berechnet werden. Der Stil mit der höheren Priorität wird zuerst angezeigt. Wenn die Prioritäten gleich sind, wird der spätere Stil angezeigt.
Bei der Berechnung der Prioritäten darf die Gesamtgröße ihre maximale Größenordnung nicht überschreiten.
Sie können nach dem Stil ein !important hinzufügen. Wenn dieser Inhalt dem Stil hinzugefügt wird, erhält der Stil die höchste Priorität und wird vor allen Stilen, einschließlich Inline-Stilen, angezeigt.
Selektorleistung
Wenn der Browser eine Gruppe von Selektoren analysiert, analysiert er sie einzeln von hinten nach vorne.
Wenn der Selektor zu lang ist, ist die Analyseleistung des Browsers schlecht. Beim Schreiben des Selektors gilt also: Je kürzer, desto besser.
*Wildcard-Selektoren weisen eine schlechte Leistung auf. Vermeiden Sie die Verwendung von Wildcard-Selektoren.
Einheit
Längeneinheit
px
Pixel, Pixel ist die kleinste Einheit, aus der ein Bild besteht. Unser Bildschirm besteht aus einzelnen Pixeln.
Ein Pixel bezieht sich auf ein Pixel
Bei verschiedenen Displays ist die Größe eines Pixels unterschiedlich. Je klarer der Bildschirm, desto kleiner sind die Pixel.
%
Sie können den Stilwert eines Elements auf einen Prozentwert festlegen, sodass der Browser den entsprechenden Wert basierend auf dem Wert des übergeordneten Elements berechnet.
Wenn sich der Wert des übergeordneten Elements ändert, ändert sich auch der Wert des untergeordneten Elements entsprechend einem bestimmten Verhältnis, das häufig in adaptiven Seiten verwendet wird.
em
em wird relativ zur Schriftgröße des aktuellen Elements berechnet
1em = 1Schriftgröße
em wird häufig zum Festlegen einiger textbezogener Stile verwendet, da sich em entsprechend ändert, wenn sich die Textgröße ändert.
Farbeinheit
Farbwörter
Verwenden Sie englische Wörter direkt, um Farben darzustellen
rot grün blau orange
RGB-Wert
Der sogenannte RGB-Wert dient dazu, verschiedene Farben durch unterschiedliche Kombinationen der drei Grundfarben Rot, Grün und Blau anzupassen.
Grammatik:
RGB (Rot, Grün, Blau)
Diese drei Werte erfordern einen Wert zwischen 0-255
0 bedeutet keine
255 stellt das Maximum dar
RGB(50.200,30)
Sie können auch Prozentsätze verwenden, um RGB-Werte festzulegen, die einen Wert zwischen 0 % und 100 % erfordern.
Der Prozentsatz wird schließlich in 0-255 umgewandelt
0 % entspricht 0
100 % entspricht 255
RGB(100%,0%,0%)
Hexadezimaler RGB-Wert
Es ist auch eine Möglichkeit, RGB-Werte auszudrücken. Der Unterschied besteht darin, dass hexadezimale Zahlen anstelle von Dezimalzahlen verwendet werden.
Grammatik:
#rot grün blau
Die Farbe benötigt hier einen Wert zwischen 00 und ff
Beispiel:
#ff0000
Wenn sich die Farbe paarweise wiederholt, kann sie abgekürzt werden.
#aabbcc kann beispielsweise als #abc geschrieben werden
Beispielsweise kann #bbffaa als #bfa geschrieben werden
Textstil
Schriftart
Farbe
Schriftfarbe
Schriftgröße
Schriftgröße
Die Standardschriftgröße im Browser beträgt im Allgemeinen 16 Pixel und wird bei der Entwicklung normalerweise auf 12 Pixel vereinheitlicht.
Schriftfamilie
Legen Sie die Schriftart für den Text fest
Schriftstil
Kursivschrift setzen
Schriftstärke
Legen Sie die Fettschrift des Textes fest
Schriftartvariante
Kapitälchen
Schriftart
Textabkürzungsattribut
Alle schriftbezogenen Stile können gleichzeitig festgelegt werden
Grammatik:
Schriftart: [fett, kursiv, Kleinbuchstaben], Größe [/Zeilenhöhe] Schriftart
Fett, kursiv, klein und groß, die Reihenfolge spielt keine Rolle, Sie können es schreiben oder nicht, wenn nicht, verwenden Sie den Standardwert
Textgröße und Schriftart müssen geschrieben werden, und die Größe muss die vorletzte sein und die Schriftart muss die letzte sein
Nach der Größe können Sie die Zeilenhöhe festlegen, die geschrieben werden kann oder nicht. Andernfalls wird der Standardwert verwendet.
Textstil
Zeilenhöhe
Zeilenhöhe
Standardmäßig wird der Text vertikal in der oberen Mitte der Zeile zentriert.
Die Zeilenhöhe kann über line-height geändert werden
Zeilenabstand = Zeilenhöhe – Schriftgröße
Texttransformation
Legen Sie die Groß-/Kleinschreibung fest
Textdekoration
Textdekoration festlegen
Textausrichtung
Legen Sie die Textausrichtung fest
Texteinzug
Legen Sie den Einzug der ersten Zeile fest
Es ist eine Längeneinheit erforderlich. Wenn es sich um einen positiven Wert handelt, wird die erste Zeile nach rechts verschoben. Wenn es sich um einen negativen Wert handelt, wird sie nach links verschoben.
Buchstaben-Abstand
Zeichenabstand
Wortabstände
Wortabstand
Hintergrund
Hintergrundfarbe
Hintergrundfarbe
Hintergrundbild
Hintergrundbild
Als Parameter ist eine URL-Adresse erforderlich
Beispiel: Hintergrundbild:URL (Pfad zum Bild)
Hintergrund Wiederholung
Stellen Sie den Wiederholungsmodus für Hintergrundbilder ein
Optionale Werte:
wiederholen
Standardmäßig wird das Hintergrundbild gekachelt angezeigt
Wiederholen Sie dies in beide Richtungen entlang der x- und y-Achse
keine Wiederholung
Das Hintergrundbild wiederholt sich nicht
wiederholen-x
Das Hintergrundbild wird horizontal wiederholt
wiederholen-y
Das Hintergrundbild wird vertikal wiederholt
Hintergrundposition
Legen Sie die Position des Hintergrundbilds fest
Einstellungsmethode eins
Sie können die Position des Bildes direkt über mehrere Positionsschlüsselwörter festlegen
Spitze
links
Rechts
unten
Center
Sie können das Hintergrundbild an eine beliebige Position des Elements setzen, indem Sie die oben genannten Schlüsselwörter paarweise kombinieren.
Wenn nur ein Wert angegeben ist, wird der zweite Wert standardmäßig auf „Mitte“ gesetzt
Einstellungsmethode zwei
Sie können direkt zwei Werte angeben, um den Versatz des Hintergrundbilds festzulegen.
Beispiel:
Hintergrundposition: X-Achsen-Versatz, Y-Achsen-Versatz;
X-Achsen-Versatz, der zur Angabe der horizontalen Position des Bildes verwendet wird
Wenn Sie einen positiven Wert angeben, bewegt sich das Bild nach rechts
Wenn Sie einen negativen Wert angeben, bewegt sich das Bild nach links
Y-Achsen-Versatz, der zur Angabe der vertikalen Position des Bildes verwendet wird
Wenn Sie einen positiven Wert angeben, bewegt sich das Bild nach unten
Wenn Sie einen negativen Wert angeben, wird das Bild nach oben verschoben
Hintergrundanhang
Wird verwendet, um festzulegen, ob der Hintergrund mit der Seite scrollt
Optionaler Wert
scrollen
Standardmäßig scrollt das Hintergrundbild mit der Seite
Fest
Das Hintergrundbild scrollt nicht mit der Seite und wird an der angegebenen Position auf der Seite fixiert.
Wenn Sie den Hintergrund dieser Eigenschaft festlegen, wird der Hintergrund immer relativ zum Browserfenster positioniert.
Im Allgemeinen wird dieser Hintergrund auf den Körper festgelegt
Hintergrund
Abkürzungsattribut für Hintergrund
Sie können damit alle Hintergrundstile festlegen
Für dieses abgekürzte Attribut gibt es keine Bestell- oder Mengenanforderung. Der Standardwert wird für Attribute verwendet, die nicht geschrieben werden.
Opazität
Wird verwendet, um die Deckkraft des Hintergrunds festzulegen
Optionaler Wert
0-1
0 bedeutet völlig transparent
1 bedeutet völlig undurchsichtig
0,5 durchscheinend
Browser IE8 und niedriger unterstützen diesen Stil nicht. Sie können stattdessen Filter verwenden.
filter:alpha(Deckkraft=Wert)
Der Wert hier erfordert einen Wert zwischen 0 und 100
0 entspricht vollständiger Transparenz
100 völlig undurchsichtig
HTML
Die Struktur der Webseite
Eine Webseite besteht aus drei Teilen
Struktur
Struktur ist die Gesamtstruktur der Seite, wo ist der Titel, wo ist der Absatz, wo ist das Bild
Die Struktur wird mit HTML geschrieben
Leistung
Leistung ist der äußere Stil der Seite, wie Schriftart, Schriftgröße, Schriftfarbe und Hintergrund. . .
Verwenden Sie CSS, um Elemente auf Ihrer Seite zu gestalten
Verhalten
Interaktion zwischen Seite und Benutzer
Verwenden Sie JavaScript, um das Seitenverhalten festzulegen
Eine gut gestaltete Webseite erfordert die Trennung von Struktur, Präsentation und Verhalten.
In der Entwicklung stehen wir immer vor einem Problem, nämlich der Kopplung zwischen Programmen. Die Trennung der drei besteht darin, die Kopplung zu verstehen.
HTML, Hypertext Markup Language
Verantwortlich für die Struktur der Seite und die Definition der verschiedenen Komponenten der Seite
HTML wird in Form von reinem Text geschrieben und verwendet HTML-Tags, um verschiedene Teile der Seite zu identifizieren.
Etikett
erscheinen paarweise
selbstschließendes Etikett
Attribute
Sie können die Wirkung der Beschriftung über Attribute festlegen
Attribute müssen im öffnenden Tag oder im schließenden Tag definiert werden
Eigenschaften sind eigentlich eine Reihe von Name-Wert-Paaren.
Beispiel:
Grundstruktur einer HTML-Seite
Dokumentationserklärung
Die HTML-Version, die zur Identifizierung der aktuellen Seite verwendet wird
Diese Anweisung wird verwendet, um dem Browser mitzuteilen, dass die aktuelle Seite mit dem HTML5-Standard geschrieben ist.
Gemeinsame Tags
Das Root-Tag der Webseite
Es gibt nur ein Root-Tag auf einer Seite
Der gesamte Inhalt der Webseite muss in das HTML-Tag geschrieben werden
Kopfzeile der Webseite
Der Inhalt dieses Tags wird nicht direkt auf der Webseite angezeigt
Dieses Tag wird verwendet, um dem Browser beim Parsen der Seite zu helfen
Untertag
Wird verwendet, um den Titel der Webseite festzulegen
Standardmäßig wird es in der Titelleiste des Browsers angezeigt
Wenn eine Suchmaschine eine Webseite abruft, ruft sie hauptsächlich den Inhalt im Titel ab, der sich auf das Ranking der Seite in der Suchmaschine auswirkt.
Wird zum Festlegen von Metadaten von Webseiten verwendet, z. B. des von Webseiten verwendeten Zeichensatzes
Legen Sie Schlüsselwörter für Webseiten fest
Legen Sie die Beschreibung der Webseite fest
Angeforderte Weiterleitung
Der Hauptteil der Webseite
Alle sichtbaren Teile der Webseite müssen im Hauptteil geschrieben werden
~
Titel-Tag
Es gibt sechs Überschriftenebenen in HTML
Unter den sechsstufigen Überschriften ist h1 die wichtigste und h6 die unwichtigste. Auf allgemeinen Seiten werden nur h1~h3 verwendet.
Die Bedeutung von h1 ist nach dem Titel zweitrangig. Der Browser durchsucht hauptsächlich den Inhalt in h1, um den Hauptinhalt der Seite zu ermitteln.
Im Allgemeinen kann nur ein h1 auf eine Seite geschrieben werden.
Absatz-Tags
Newline-Tag
Horizontale Linienbeschriftung
iframe
Kann andere externe Seiten in eine Seite einbinden
Attribute
src
Für die Adresse der externen Seite können Sie relative Pfade verwenden
Breite und Höhe
Sie können die Breite und Höhe des Rahmens einstellen
Name
Einem Inline-Frame kann ein Name gegeben werden
Dieser Attributwert kann auf den Wert des Zielattributs des Hyperlinks gesetzt werden
Auf diese Weise wird beim Klicken auf den Hyperlink die Seite im entsprechenden Inline-Frame geöffnet
Der Inhalt in Inline-Frames wird von Suchmaschinen nicht abgerufen. Versuchen Sie daher, während der Entwicklung keine Inline-Frames zu verwenden.
Hyperlink
Kann die aktuelle Seite zu anderen Seiten springen lassen
<a>Linktext</a>
Attribute
href
Zeigt auf die Zieladresse des Linksprungs, bei der es sich um einen relativen Pfad handeln kann
Es kann sich auch um den Attributwert #id handeln, sodass beim Klicken auf den Hyperlink dieser zur angegebenen Position auf der aktuellen Seite springt.
Sie können mailto: verwenden, um einen Hyperlink zu erstellen, der eine E-Mail sendet
Ziel
Geben Sie das Fenster an, in dem der Link geöffnet werden soll
Optionaler Wert
_selbst
Standardwert, der Link wird standardmäßig im aktuellen Fenster geöffnet
_leer
Link in neuem Fenster öffnen
Der Wert des Namensattributs eines Inline-Frames
Öffnet den Link im angegebenen Iframe
Kommentar
Grammatik
Der Inhalt der Kommentare wird nicht auf der Seite angezeigt, sondern im Quellcode. Wir können Kommentare verwenden, um den Code der Webseite zu erklären.
Sie können auch einige Inhalte, die Sie nicht auf der Seite anzeigen möchten, durch Kommentare ausblenden.
juristische Person
Einige spezielle Symbole können nicht direkt in HTML-Seiten verwendet werden und müssen durch Entitäten ersetzt werden, um diese speziellen Symbole zu ersetzen.
Entitäten können auch als Escape-Zeichen bezeichnet werden
Entitätssyntax
&Entitätsname;
Häufig verwendete Entitäten
Raum
<
>
>
Copyrightzeichen
©
Bild-Tags
<img />
Verwenden Sie das Image-Tag, um der Seite ein externes Bild hinzuzufügen
Attribute
src
Der Pfad zeigt auf ein externes Bild. Sie können relative Pfade verwenden
alt
Geben Sie eine Beschreibung für das Bild an, wenn es nicht geladen werden kann
Suchmaschinen verwenden dieses Attribut hauptsächlich, um den Inhalt des Bildes zu identifizieren.
Wenn Sie dieses Attribut nicht schreiben, wird die Suchmaschine das Bild einbeziehen.
Breite
Legen Sie die Breite des Bildes fest
Höhe
Stellen Sie die Höhe des Bildes ein
Bildformat
JPEG
Bunte Bilder, z.B. Fotos
GIF
Einfarbige, einfache transparente Bilder, dynamische Grafiken
PNG
Bunte, komplexe und transparente Bilder
Grundsätze der Bildauswahl
Der Effekt ist konsistent, verwenden Sie wenig
Der Effekt ist inkonsistent. Verwenden Sie ihn mit besserer Wirkung
relativer Pfad
Ein Pfad relativ zum Verzeichnis, in dem sich die aktuelle Ressource befindet
Sie können ../ verwenden, um zum Verzeichnis der ersten Ebene zurückzukehren, und um zu mehreren Ebenen zurückzukehren, verwenden Sie mehrere ../
xHtml-Syntaxspezifikation
1.HTML unterscheidet nicht zwischen Groß- und Kleinschreibung, versuchen Sie jedoch, Kleinbuchstaben zu verwenden
2.HTML-Kommentare können nicht verschachtelt werden
3. Das Etikett muss eine vollständige Struktur haben
Entweder treten sie paarweise auf
oder selbstschließendes Etikett
4. Tags können verschachtelt, aber nicht kreuzweise verschachtelt werden.
5. Das Attribut muss einen Wert haben und der Wert muss in Anführungszeichen gesetzt werden. Sowohl einfache als auch doppelte Anführungszeichen sind zulässig.
Textbeschriftung
Betonung im Ton ausdrücken
Zeigt die Wichtigkeit des Inhalts an
bedeutet einfache Kursivschrift
Zeigt einfach fett an
Kennzeichnet Inhalte wie detaillierte Regeln
Um Referenzinhalte anzugeben, kann „cite“ für alles mit einem Buchtitel verwendet werden.
kurzes Zitat, Inline-Zitat
Langreferenz, Referenz auf Blockebene
hochgestellt
Index
Gelöschter Inhalt
Eingefügter Inhalt
Vorformatierte Tags können die Formatierung von Leerzeichen und Zeilenumbrüchen im Code beibehalten
stellt Programmcode dar
Liste
ungeordnete Liste
Verwenden Sie ul, um eine ungeordnete Liste zu erstellen, und verwenden Sie li, um ein Listenelement in der Liste darzustellen.
Ungeordnete Liste mit Symbolen als Aufzählungszeichen
Bestellliste
Verwenden Sie ol, um eine ungeordnete Liste zu erstellen, und verwenden Sie li, um ein Listenelement in der Liste darzustellen.
Verwenden Sie fortlaufende Nummern als Aufzählungspunkte
Definitionsliste
Listenbezogene Elemente sind alle Blockelemente und können ineinander verschachtelt werden.
Kugeln entfernen
Listenstil: keiner
Layout
schweben
Verwenden Sie Float, um Elemente auf Float zu setzen
Optionaler Wert
keiner
Standardwert, kein Float, Element im Dokumentenfluss
links
Element schwebt nach links
Rechts
Element schwebt nach rechts
Merkmale
1. Nachdem das Element schwebend ist, wird es vollständig vom Dokumentfluss getrennt.
2. Nach dem Schweben wird das Element immer an die Spitze des übergeordneten Elements verschoben.
3. Die Bewegung stoppt, bis sie auf den Rand des übergeordneten Elements oder anderer schwebender Elemente trifft.
4. Wenn sich das schwebende Element über einem Blockelement befindet, überdeckt das schwebende Element das Blockelement nicht.
5. Das schwebende Element darf das darüber liegende schwebende Geschwisterelement nicht überschreiten und kann höchstens auf einer Seite ausgerichtet werden.
6. Schwebende Elemente überdecken den Text nicht automatisch. Sie können einen Textumbrucheffekt durch Schweben erzielen.
Eigenschaften von Elementen nach dem Floating
Wenn ein Element schwebend ist, wird es vollständig aus dem Dokumentenfluss entfernt.
Blockelement
Nachdem das Blockelement den Dokumentfluss verlassen hat
1. Besetzt keine Zeile
2. Sowohl die Breite als auch die Höhe werden durch den Inhalt gestreckt
Inline-Elemente
Inline-Elemente werden zu Blockelementen, nachdem sie den Dokumentfluss verlassen.
stark eingestürzt
Die Höhe des übergeordneten Elements im Dokumentfluss wird standardmäßig durch die untergeordneten Elemente erweitert. Wenn das untergeordnete Element vom Dokumentfluss getrennt wird, kann es die Höhe des übergeordneten Elements nicht unterstützen, was zu einer Vergrößerung der Höhe führt Das übergeordnete Element soll ausgeblendet werden.
Sobald die Höhe des übergeordneten Elements sinkt, verschieben sich die Positionen aller Elemente nach oben, wodurch das Layout der gesamten Seite chaotisch wird.
Methode eins
Aktivieren Sie den BFC oder hasLayout des übergeordneten Elements
BFC
Formatierungskontext blockieren
Formatierungsumgebung auf Blockebene
BFC ist ein implizites Attribut des Elements und standardmäßig deaktiviert.
BFC kann über einige spezielle Stile aktiviert werden
Nach dem Einschalten von BFC weisen die Elemente die folgenden Eigenschaften auf:
1. Die vertikalen Ränder des übergeordneten Elements überlappen sich nicht mit den untergeordneten Elementen.
2. Elemente mit aktiviertem BFC werden nicht von schwebenden Elementen abgedeckt.
3. Elemente mit aktiviertem BFC können schwebende untergeordnete Elemente enthalten.
So aktivieren Sie BFC
1. Stellen Sie das Element auf schwebend ein
2. Stellen Sie die absolute Positionierung der Elemente ein
3. Legen Sie den Elementtyp auf Inline-Block fest
4. Stellen Sie den Überlauf auf einen nicht standardmäßigen Wert ein
Im Allgemeinen wird overflow:hidden verwendet, um BFC zu aktivieren.
hasLayout
In IE6 gibt es keinen BFC, aber ein hasLayout, das dem BFC ähnelt
In IE6 können Sie das Problem des Höhenkollapses lösen, indem Sie hasLayout aktivieren.
Der einfachste Weg zum Öffnen mit minimalen Nebenwirkungen
Zoom:1
Wenn Sie für ein Element eine nicht standardmäßige Breite festlegen, wird hasLayout automatisch aktiviert.
Methode Zwei
Fügen Sie am Ende des reduzierten übergeordneten Elements ein leeres Div hinzu und löschen Sie das Div anschließend
Dieser Ansatz fügt der Seite unnötige Struktur hinzu
Methode drei
Verwenden Sie die After-Pseudoklasse, um ein Blockelement nach dem übergeordneten Element hinzuzufügen und dessen Float zu löschen
Das Prinzip dieser Methode ist das gleiche wie bei Methode 2, es ist jedoch nicht erforderlich, der Seite die entsprechende Struktur hinzuzufügen.
Position
Durch die Positionierung können Elemente auf der Seite an einer beliebigen Stelle auf der Seite platziert werden.
Verwenden Sie Position, um die Positionierung von Elementen festzulegen
Optionaler Wert
statisch
Standardwert, Elementpositionierung ist nicht aktiviert
relativ
Aktivieren Sie die relative Positionierung von Elementen
absolut
Schalten Sie die absolute Positionierung von Elementen ein
Fest
Aktivieren Sie die feste Positionierung von Elementen
relative Positionierung
1. Nachdem die relative Positionierung des Elements aktiviert wurde, ändert sich das Element in keiner Weise, wenn der Versatz nicht festgelegt ist.
2. Relativ positionierte Elemente werden relativ zu ihrer eigenen Position im Dokumentenfluss positioniert.
3. Relativ positionierte Elemente unterbrechen den Dokumentenfluss nicht
4. Die relative Positionierung ändert nichts an der Art des Elements, unabhängig davon, ob es sich um ein Blockelement oder ein Blockelement oder ein Inline-Element oder ein Inline-Element handelt.
5. Relativ positionierte Elemente werden auf eine höhere Ebene angehoben
absolute Positionierung
1. Nachdem das Element auf absolute Positionierung eingestellt wurde und der Offset nicht festgelegt ist, ändert sich die Position des Elements nicht.
2. Ein absolut positioniertes Element wird relativ zu seinem nächstgelegenen Vorgängerelement positioniert, für das die Positionierung aktiviert ist. Wenn für alle Vorgängerelemente die Positionierung nicht aktiviert ist, wird es relativ zum Browserfenster positioniert.
3. Absolut positionierte Elemente brechen vollständig aus dem Dokumentenfluss.
4. Die absolute Positionierung verändert die Art des Elements. Inline-Variablenblock, die Höhe und Breite des Blocks werden durch den Inhalt gedehnt und belegen keine exklusive Zeile
5. Durch die absolute Positionierung wird das Element auf eine höhere Ebene gehoben
Feste Positionierung
Die feste Positionierung ist eine besondere Art der absoluten Positionierung. Die meisten ihrer Eigenschaften sind mit der absoluten Positionierung identisch.
Der Unterschied besteht darin, dass fest positionierte Elemente immer relativ zum Browserfenster positioniert werden. Und es wird nicht mit der Bildlaufleiste gescrollt
IE6 unterstützt keine feste Positionierung
Hierarchie
Positionierte Elemente > Schwebende Elemente > Elemente im Dokumentenfluss
Wenn die Positionierung für ein Element aktiviert ist, kann die Ebene des Elements über den Z-Index festgelegt werden.
Je höher der Z-Index-Wert, desto mehr Prioritätselemente werden angezeigt.
Wenn die Z-Index-Werte gleich sind oder kein Z-Index vorhanden ist, wird das untere Element zuerst angezeigt.
Übergeordnete Elemente überdecken niemals untergeordnete Elemente
Versatz
Wenn die Positionierung für ein Element aktiviert ist, kann die Position des Elements durch den Offset festgelegt werden.
links
Der Abstand links vom Element von der Positionierungsposition
Spitze
Der Abstand von der Oberseite des Elements bis zur Positionierungsposition
Rechts
Der Abstand rechts vom Element von der Positionierungsposition
unten
Der untere Abstand des Elements von der Positionierungsposition
Normalerweise werden nur zwei Werte verwendet, um die Position eines Elements zu definieren.
Kurseinführung
Softwarearchitektur
C/S, Client/Server
1. Im Allgemeinen handelt es sich bei der von uns verwendeten Software um eine C/S-Architektur
2. Zum Beispiel Software im System QQ, 360, Office, XMind
3.C stellt den Client dar. Benutzer nutzen die Software über den Client.
4.S stellt den Server dar, der für die Verarbeitung der Geschäftslogik der Software verantwortlich ist.
Merkmale
1. Die Software muss vor der Verwendung installiert werden
2. Wenn die Software aktualisiert wird, müssen der Server und der Client gleichzeitig aktualisiert werden.
3.C/S-Architektursoftware kann nicht plattformübergreifend verwendet werden
4. Der Client und der Server der C/S-Architektursoftware kommunizieren über ihre eigenen Protokolle, was relativ sicher ist.
B/S, Browser/Server
1.B/S ist im Wesentlichen C/S, aber die B/S-Architektursoftware verwendet den Browser als Client der Software.
2. B/S-Architektursoftware nutzt die Software, indem sie über einen Browser auf die Webseite zugreift.
3. Zum Beispiel: JD.com Taobao 12306 Zhihu Sina Weibo
Merkmale
1. Die Software muss nicht installiert werden. Greifen Sie einfach über den Browser auf die angegebene URL zu.
2. Wenn die Software aktualisiert wird, muss der Client nicht aktualisiert werden.
3. Die Software ist plattformübergreifend einsetzbar und kann genutzt werden, solange ein Browser im System vorhanden ist.
4. B/S-Architektursoftware verwendet das gemeinsame HTTP-Protokoll für die Kommunikation zwischen Client und Server, was relativ unsicher ist.
Base
Das Dezimalsystem besteht darin, eins zur vollen Zahl zu addieren.
binär
0 1
10 11 100 101 110 111
Dezimal
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14. . .
hexadezimal
Geben Sie 1 ein, wenn Sie über 16 Jahre alt sind
0 1 2 3 4 5 6. . . 9 a b c d e f
10 11 12 ... 19 1a 1b 1c 1d 1e 1f
Da hexadezimal eine Zahl von 16 ist, müssen mehrere Sonderzeichen festgelegt werden, um 10 11 12 13 14 15 darzustellen
Verwenden Sie a b c d e f, um jeweils 10 11 12 13 14 15 darzustellen
Oktal
Geben Sie 1 ein, wenn 8 oder mehr
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
Problem mit verstümmeltem Code
Gründe für verstümmelte Zeichen
Der Computer ist eine sehr dumme Maschine. Er kennt nur zwei Dinge: 0 1
Alle auf dem Computer gespeicherten Inhalte müssen schließlich in eine Binärkodierung von 0 1 umgewandelt werden, um gespeichert zu werden, einschließlich Inhalten auf Webseiten.
Beispiel: China unten auf dem Computer muss möglicherweise in 1010001001010101011010 konvertiert werden
Beim Lesen von Inhalten müssen Sie die Binärdatei kodieren und in den richtigen Inhalt konvertieren.
Codierung
Der Prozess der Umwandlung von Zeichen in Binärkodierung nach bestimmten Regeln
Dekodierung
Der Prozess der Umwandlung binärer Kodierung in Zeichen nach bestimmten Regeln
Zeichensatz
Die zum Kodieren und Dekodieren verwendeten Regeln werden Zeichensätze genannt
Gängige Zeichensätze
ASCII
ISO-8859-1
GBK
GB2312
Standardkodierung für chinesische Systeme
UTF-8
Universal Code unterstützt alle Texte auf der Erde
ANSI
Speichern Sie Dateien automatisch in der Standardkodierung des Systems
Die Hauptursache für verstümmelte Zeichen liegt darin, dass beim Kodieren und Dekodieren unterschiedliche Zeichensätze verwendet werden.
In chinesischen Systembrowsern wird standardmäßig GB2312 zur Dekodierung verwendet.
Box-Modell
CSS legt jedes Element auf ein rechteckiges Feld fest
Legen Sie alle Elemente als Boxen fest, um das Seitenlayout zu erleichtern
Wenn es sich bei diesen Elementen ausschließlich um Kästchen handelt, wird unser Layout zum Platzieren von Kästchen auf der Seite.
Box-Modell
Jede Box besteht aus den folgenden Teilen
Inhaltsbereich
Der Inhaltsbereich entspricht dem Raum, in dem die Box Dinge aufbewahrt
Der Inhaltsbereich befindet sich im innersten Teil der Box
Alle untergeordneten Elemente eines Elements werden im Inhaltsbereich des übergeordneten Elements platziert
Einstellungen für den Inhaltsbereich
Breite
Breite des Inhaltsbereichs
Höhe
Höhe des Inhaltsbereichs
Polsterung
Der Abstand bezieht sich auf den Abstand zwischen dem Inhaltsbereich und dem Rand. Der Abstand beeinflusst die Größe der Box.
In der Box gibt es vier Polsterungsrichtungen.
Polsterung oben
Polsterung-rechts
Polsterung unten
Polsterung links
Polsterung
Die Auffüllung in vier Richtungen kann gleichzeitig eingestellt werden, und die Regeln stimmen mit der Randbreite überein.
Polsterung: oben rechts unten links
Polsterung: oben, links, rechts, unten
Polsterung: oben, unten, links und rechts
Polsterung: oben, unten, links, rechts
Die sichtbare Boxgröße wird durch den Inhaltsbereich, den Abstand und die Ränder bestimmt.
rahmen
Die äußerste Seite der sichtbaren Box ist die Randbox, und der Rand ist der Rand der Box
Grenzen setzen
Zum Festlegen des Rahmens müssen drei Stile gleichzeitig festgelegt werden, und einer davon ist unverzichtbar.
Rahmenbreite
Rahmenbreite
Sie können die Breite der vier Ränder gleichzeitig oder separat festlegen.
Regel
vier Werte
Randbreite: 10px 20px 30px 40px;
Randbreite: oben rechts unten links;
drei Werte
Randbreite: 10px 20px 30px;
Randbreite: oben, links und unten;
zwei Werte
Rahmenbreite: 10px 20px;
Randbreite: oben, unten, links und rechts;
ein Wert
Rahmenbreite: 10px;
Randbreite: oben, unten, links und rechts;
Randfarbe
Randfarbe
Border-Stil
Grenzstil
Zusätzlich zu diesen drei Stilen bietet CSS auch
Rand-xxx-Breite
Rand-xxx-Farbe
Border-xxx-Stil
xxx kann sein
Spitze
Rechts
unten
links
Mit diesen Stilen können Sie Farbe, Breite und Stil der vier Seiten individuell festlegen.
Abkürzung für Grenze
Grenze
Rand-links
Rand-oben
Rand-rechts
Rand unten
Diese Attribute können gleichzeitig rahmenbezogene Stile festlegen.
border kann die Farbe, Breite und den Stil von vier Seiten gleichzeitig festlegen
border-xxx kann eine bestimmte Kante separat festlegen
Regel
Mit diesen Stilen können Sie die Randbreite, den Randstil und die Randfarbe gleichzeitig festlegen. Verschiedene Attribute werden durch Leerzeichen getrennt, und es gibt keine Anforderung an die Reihenfolge.
Ränder
Der Abstand zwischen der Randbox und anderen Boxen. Der Rand hat keinen Einfluss auf die Größe der sichtbaren Box, aber auf die Position der Box.
Hat auch Ränder in vier Richtungen
Rand oben
Rand rechts
Rand unten
Rand links
Abkürzungsattribut
Marge
Die Regeln sind die gleichen wie beim Auffüllen
Margenwert
Kann auf „Automatisch“ eingestellt werden
Wenn Sie den linken und rechten Rand einzeln auf „Automatisch“ setzen, wird der linke bzw. rechte Rand auf den Maximalwert gesetzt
Wenn sowohl der linke als auch der rechte Rand auf „Auto“ eingestellt sind, werden der linke und der rechte Rand auf den gleichen Wert gesetzt, wodurch ein untergeordnetes Element horizontal innerhalb seines übergeordneten Elements zentriert wird.
Rand:0 automatisch
Kann auf negative Werte eingestellt werden
Wenn der Rand auf einen negativen Wert eingestellt ist, bewegt sich das Element in die entgegengesetzte Richtung
Randüberlappung
Benachbarte vertikale Ränder überlappen
Die Ränder benachbarter Elemente nehmen den Maximalwert an
Die Ränder des untergeordneten Elements werden an das übergeordnete Element übergeben
Horizontale Ränder überlappen sich nicht, sondern werden summiert
Boxmodell für Inline-Elemente
Breite
Höhe
nicht unterstützt
Polsterung
Unterstützen Sie die horizontale Polsterung
Vertikaler Abstand wird ebenfalls unterstützt, hat jedoch keinen Einfluss auf das Layout.
Grenze
Unterstützt Ränder in vier Richtungen, vertikale Ränder haben jedoch keinen Einfluss auf das Layout
Marge
Unterstützen Sie horizontale Ränder
Unterstützt keine vertikale Ausrichtung
Boxmodellbezogene Stile
Anzeige
Legen Sie den Anzeigetyp eines Elements fest
Optionaler Wert
keiner
Das Element wird nicht auf der Seite angezeigt und nimmt nicht die Position der Seite ein
Block
Das Element wird als Blockelement angezeigt
im Einklang
Das Element wird als Inline-Element angezeigt
Inline-Block
Das Element wird als Inline-Blockelement angezeigt
Enthält sowohl Inline- als auch Blockelemente
Besetzen Sie keine Zeile
Breite und Höhe können eingestellt werden
Sichtweite
Legen Sie fest, ob das Element auf der Seite angezeigt wird
Optionaler Wert
sichtbar
Standardwert, das Element wird normal auf der Seite angezeigt
versteckt
Das Element wird nicht auf der Seite angezeigt, nimmt aber dennoch eine Position auf der Seite ein
Überlauf
Legen Sie fest, wie ein Element mit Überlaufinhalten umgeht
Optionaler Wert
sichtbar
Standardwert, Überlaufinhalt wird nicht außerhalb des übergeordneten Elements verarbeitet und angezeigt.
versteckt
Überlaufender Inhalt wird ausgeblendet und nicht angezeigt.
scrollen
Fügen Sie dem übergeordneten Element sowohl horizontale als auch vertikale Bildlaufleisten hinzu
Bildlaufleisten werden unabhängig davon hinzugefügt, ob der Inhalt überläuft.
Auto
Erzeugen Sie bei Bedarf automatisch Bildlaufleisten
Dokumentenfluss
Der Dokumentenfluss bezieht sich auf eine Stelle auf einer Webseite
Der Dokumentenfluss ist die Grundlage einer Webseite und die unterste Ebene einer Webseite. Alle Elemente sind standardmäßig im Dokumentenfluss angeordnet.
Elemente werden im Dokumentenfluss standardmäßig von links nach rechts und von oben nach unten angeordnet (im Einklang mit unseren Schreibgewohnheiten).
Blockelement
1. Blockelemente werden im Dokumentenfluss von oben nach unten angeordnet.
2. Die Breite eines Blockelements im Dokumentenfluss beträgt standardmäßig 100 % des übergeordneten Elements.
3. Die Höhe des Blockelements im Dokumentenfluss wird standardmäßig durch den Inhalt gestreckt.
Inline-Elemente
1. Inline-Elemente werden im Dokumentenfluss von links nach rechts angeordnet. Wenn eine Zeile nicht ausreicht, um alle Inline-Elemente aufzunehmen, wechseln Sie zur nächsten Zeile und ordnen Sie sie weiterhin von links nach rechts an.
2. Im Dokumentenfluss werden Breite und Höhe von Inline-Elementen standardmäßig durch den Inhalt gestreckt.