Zusammenfassung der Studiennotizen zu Elementen auf Blockebene und Elementen auf Zeilenebene (Inline) in HTML (einschließlich HTML5)

1. Zuerst müssen wir wissen, was Elemente auf Blockebene und Elemente auf Zeilenebene (Inline) ?

Eigenschaften von Blockelementen:

①Immer in einer neuen Zeile beginnen

②Höhe, Zeilenhöhe, Ränder und Abstand können alle gesteuert werden

③Die Standardbreite beträgt 100 % des Containers, sofern keine Breite festgelegt ist

④ Es kann Inline-Elemente und andere Blockelemente aufnehmen.

Eigenschaften von Inline-Elementen:

① und andere Elemente befinden sich in derselben Zeile;


② Höhe, Zeilenhöhe sowie Ränder und Polsterung können nicht sein geändert;


③Die Breite ist die Breite des Texts oder Bildes und kann nicht geändert werden

④Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen.

2. Okay, werfen wir einen Blick auf das Element auf Blockebene :

div:DokumentabschnittAbschnitt:Dokumentabschnitt
nav:Navigation
header:Seitenkopf
article:Article
aside:Article sidebar
footer:Seitenfuß
Details: Details des Elements
Zusammenfassung: Details sichtbarer Titel des Elements
Dialog: Dialogfenster
h1,h2,h3,h4,h5,h6:Titel
p:Absatz
ul: ungeordnete Liste
ol: geordnete Liste
dir: Verzeichnisliste
li: Projekt
dl: Liste
dt: Listenelement
dd: Projektbeschreibung
Menü : Menü, Liste der Befehle
menuiitem: Menüpunkt
Befehl: Befehlsschaltfläche
Formular: Formular
Feldsatz: Rahmen um das Element (kann zum Gruppieren von Elementen innerhalb des Formulars verwendet werden)
Legende : Titel am Rand
select: Liste auswählen (Inline-Element)
optgroup: kombinierte Auswahllistenoption
Option: Listenoption auswählen (kann auch als Datenlistenoption verwendet werden)
Datenliste: Dropdown list (id soll an den Listenattributwert in der Eingabe gebunden werden)
table: Tabelle
caption: Tabellentitel
thead: kombinierter Header-Inhalt (th)
tbody: kombinierter Body-Inhalt (td)
tfoot :Kombinierter Tabellennotizinhalt (td)
tr:Tabellenzeile
th:Kopfzelle
td:Tabellenzelle
col:Tabellenspaltenattribut;(leere Beschriftung)
colgroup :Tabellenformat-Spaltengruppe;
iframe: Inline-Frame
Abbildung: Medieninhaltsgruppierung
figcaption: Abbildungstitel
Karte: Bildkarte
Bereich: Bildbereich
Leinwand: Grafikcontainer ( Skript zum Zeichnen von Grafiken)
Video: Video
Quelle: Medienquelle
Track: Textspur
Audio: Toninhalt
br: Newline (leeres Etikett)
hr: horizontale Trennlinie (leerer Tag)
pre: formatierter Text
blockquote: Blockzitat
Adresse: Kontaktinformationen des Dokuments
center: zentrierter Text (veraltet)
spacer: horizontal und vertikal eingefügt Leerzeichen (leeres Element)

3. Schauen wir uns als Nächstes das Element Zeilenebene (inline) an:

span: Inline-Container Abkürzung: Abkürzung
em: Hervorhebung
stark: Hervorhebung durch Fett
Markierung: hervorgehobener Text
b: Fett
i:kursiv
bdi:Textrichtung
bdo:Textrichtung
groß:große Schriftart
klein:kleine Schriftart
sup:superscript
sub:subscript
del: Gelöschter Text
strike: durchgestrichen
s: durchgestrichen
ins: eingefügter Text
u: unterstreichen
nobr: Zeilenumbrüche verbieten
wbr: Zeitpunkt der Wortzeilenumbrüche (leerer Tag)
tt: Schreibmaschinentext
kbd: Tastaturtext
Zeit: Datum/Uhrzeit
zitieren: Zitat
q: kurzes Zitat ("")
Schriftart: Schriftarteinstellung (nicht häufig verwendet)
Akronym: Abkürzung (nicht unterstützt von HTML5)
dfn: Feld (nicht häufig verwendet)
a: Anker
img: Bild
embed: eingebettet (leerer Tag)
label:input tag (klicken Sie auf den Text, um ihn auszulösen das Steuerelement)
Eingabe: Eingabefeld
Schaltfläche: Schaltfläche
keygen: Schlüssel generieren (leere Beschriftung)
Textbereich: mehrzeiliges Texteingabefeld
Ausgabe: Ergebnisse ausgeben
Rubin: Chinesische phonetische Notation
rt: phonetische Notation
rp: Der Browser unterstützt den von Ruby-Elementen angezeigten Inhalt nicht
progress: Fortschrittsbalken
meter: Messung
var: Variablen definieren
Code:Computercodetext
samp:Computercodebeispiel
Auswählen:Dropdown-Liste

Bitte korrigieren Sie mich, wenn es Fehler oder Auslassungen gibt, vielen Dank!