Grundlegende Konzepte und Anwendungsbeispiele für HTML-Inline-Elemente und Elemente auf Blockebene_HTML/Xhtml_Webseitenproduktion

HTML-Tags werden in zwei Typen unterteilt: Inline-Elemente und Elemente auf Blockebene. Lassen Sie uns zunächst die Konzepte von Inline-Elementen und Elementen auf Blockebene verstehen:

Elemente auf Blockebene: ist im Allgemeinen ein Container für andere Elemente, der Inline-Elemente aufnehmen kann, und andere Elemente auf Blockebene schließen andere Elemente aus, die sich in derselben Zeile wie sie befinden. Breite und Höhe können durch das Attribut height (Höhe) festgelegt werden. Elemente auf Blockebene werden im normalen Fluss vertikal platziert. Gängige Blockelemente sind „div“

Inline-Elemente (Inline-Elemente): Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen. Sie sind Nachkommen von Elementen auf Blockebene. Sie ermöglichen die Platzierung anderer Inline-Elemente in derselben Zeile und kann nicht in Höhe und Breite eingestellt werden. Ein häufiges Inline-Element ist „a“.

Gemäß dem Konzept der Elemente auf Blockebene können wir verstehen, dass Elemente auf Blockebene Zeilenumbrüche vor und nach ihnen haben, was dem Hinzufügen eines
-Tags vor und nach dem Element entspricht. Wir können uns Elemente auf Blockebene als Block oder Rechteck vorstellen, sodass Elemente auf Blockebene die Höhen- und Breitenattribute festlegen können

Beispiel:
CSS-Datei:

Code kopieren

Der Code lautet wie folgt:

#div1{
width:200px;
background:#666
}
div2{
width:200px; 200px;
Hintergrund:#F00
}


HTML-Datei:

Code kopierenDer Code lautet wie folgt:

Das Element auf Blockebene schließt andere Elemente in derselben Zeile aus

Anzeigeeffekt:


Die beiden div-Elemente befinden sich nicht in derselben Zeile

Nach dem Konzept der Inline-Elemente können wir verstehen, dass es vor und nach Inline-Elementen keine Zeilenumbrüche gibt. Wir können uns ein Inline-Element als Linie vorstellen, sodass es die Höhen- und Breitenattribute nicht festlegen kann.

Blockelement-Tag
address – Adresse

blockquote – Blockzitat

center – zentrierte Ausrichtung

dir – Verzeichnisliste div – häufig verwendete Blockebene ist auch das Haupt-Tag des CSS-Layouts dl – Definition Liste

Feldsatz – Formularkontrollgruppe

Formular – interaktives Formular
h1 – Überschrift
h2 – Untertitel
h3 – Titel der Ebene 3
h4 – Titel der Ebene 4
h5 – 5 Leveltitel
h6 – Level 6-Titel
hr – Horizontale Trennlinie
isindex – Eingabeaufforderung
menu – Menüliste
noframes – Frames optionaler Inhalt (für Browser, die keine Frames unterstützen) Anzeigen dieser Blockinhalt
noscript – optionaler Skriptinhalt (diesen Inhalt für Browser anzeigen, die kein Skript unterstützen)
ol – Sortierform
p – Absatz
vorformatierter Text
Tabelle – Tabelle
ul – unsortierte Liste


Inline-Element


a – Anker
Abbr – Abkürzung

Akronym – erstes Wort

b – fett (nicht empfohlen)bdo – bidi overridebig – große Schriftart

br – Zeilenumbruch

Zitieren – Zitat
Code – Computercode (erforderlich beim Zitieren von Quellcode)
dfn – Feld definieren
em – Hervorhebung
Schriftart – Schriftarteinstellung (nicht empfohlen)
i – kursiv
img – Bild
input – Eingabefeld
kbd – Tastaturtext definieren
label – Tabellenbezeichnung
q – kurzes Anführungszeichen
s – Unterstrich
samp – Beispielcomputercode definieren
select – Elementauswahl
small – Kleiner Schrifttext
span – Häufig verwendete Inline-Container, Blöcke im Text definieren
strike – Unterstrichen
strong – Fett Hervorhebung
sub – tiefgestellt
sup – hochgestellt
textarea – mehrzeiliges Texteingabefeld
tt – Schreibmaschinentext definieren
var – Variable definieren

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn