Was sind die Unterschiede zwischen Inline-Elementen und Elementen auf Blockebene in HTML?

Dieses Mal werde ich Ihnen die Unterschiede zwischen Inline-Elementen und Elementen auf Blockebene in HTML vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Inline-Elementen und Elementen auf Blockebene in HTML? ? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

HTML-Tag ist 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:

Block -level-Element: Im Allgemeinen ein Container für andere Elemente, der Inline-Elemente aufnehmen kann, und andere Elemente auf Blockebene können andere Elemente ausschließen, die sich in derselben Zeile wie sie befinden Elemente auf Blockebene im normalen Fluss werden vertikal platziert. Gängige Blockelemente sind „div“

Inline-Elemente (Inline-Elemente): Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen und sind Nachkommen von Elementen auf Blockebene. Sie ermöglichen die Lokalisierung anderer Inline-Elemente. In derselben Zeile können Höhe und Breite nicht festgelegt 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:

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

HTML-Datei:

<div id="div1">  
     div1  
块级元素排斥其他元素与其位于同一行  
</div>  
  <div id="div2">  
     div2  
块级元素排斥其他元素与其位于同一行  
</div>

Zwei div-Elemente befinden sich nicht in derselben Zeile

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

Blockelement-Tag

Adresse - Adresse
blockquote - Blockzitat
center - zentrierte Ausrichtung
dir - Verzeichnisliste
div - häufig verwendet Blockebene ist einfach und ist auch das Haupt-Tag des CSS-Layouts
dl – Definitionsliste
fieldset – Formularkontrollgruppe
form – interaktives Formular
h1 – Überschrift
h2 – Untertitel
h3 – Ebene 3 Überschrift
h4 – Überschrift der Ebene 4
h5 – Überschrift der Ebene 5
h6 – Überschrift der Ebene 6
hr – Horizontale Trennlinie
isindex – Eingabeaufforderung
menu – Menüliste
noframes – Frames optionaler Inhalt, (dieser Blockinhalt wird für Browser angezeigt, die keine Frames unterstützen)
noscript – optionaler Skriptinhalt (dieser Inhalt wird für Browser angezeigt, die keine Skripte unterstützen)
ol – Sortierform
p – Absatz
vorformatierter Text
Tabelle – Tabelle
ul – unsortierte Liste

Inline-Element

a – Ankerpunkt
Abbr – Abkürzung
Akronym – erstes Zeichen
b – fett (nicht empfohlen)
bdo – bidi override
big – große Schriftart
br – Zeilenumbruch
cite – Quote
code – Computercode ( erforderlich beim Zitieren von Quellcode)
dfn – Definitionsfeld
em – Hervorhebung
font – Schriftarteinstellung (nicht empfohlen)
i – ​​kursiv
img – Bild
Eingabe – Eingabefeld
kbd – Tastaturtext definieren
label – Tabellenbezeichnung
q – kurzes Anführungszeichen
s – Unterstrich
samp – Beispiel-Computercode definieren
select – Elementauswahl
small – kleine Schriftart Text
span – häufig verwendeter Inline-Container, der Blöcke innerhalb von Text definiert
strike – unterstrichen
strong – fette Hervorhebung
sub – tiefgestellt
sup – hochgestellt
textarea – mehrzeilige Texteingabe Box
tt - Schreibmaschinentext definieren
var - Variable definieren

Ich glaube, Sie haben diese gelesen. Sie beherrschen die Methode in diesem Fall. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website für weitere spannende Inhalte! js in HTML verwenden, um die lokale Systemzeit abzurufen

So verbergen Sie andere Attribute in einem Tag und zeigen nur Bilder an

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen Inline-Elementen und Elementen auf Blockebene in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!