HTML-Block- und Inline-Tags unterscheiden
In diesem Artikel werde ich das Konzept von HTML-Block und HTML-Inline erläutern. Dies ist ein sehr wichtiges Thema, da es viele CSS-Eigenschaften betrifft.
Haben Sie sich jemals gefragt, warum sich der Inhalt von 2 p-Tags in 2 verschiedenen Zeilen befindet und in 2 span-Tags in derselben Zeile? Das liegt daran, dass der Browser bestimmt, wie Blöcke und Inline angezeigt werden. Karten, die im Blockstil angezeigt werden, befinden sich in einem separaten Block, und Karten, die inline angezeigt werden, befinden sich in einer Reihe.
Mục lục
Was ist ein HTML-Block-Tag?
HTML-Block ist die Anzeige eines HTML-Tags im Browser in Form eines Blocks mit einer Länge von 100 % und einer Höhe, die vom Inhalt abhängt. Das bedeutet, dass alle untenstehenden HTML-Tags bei der Anzeige im Browser in einer anderen Zeile stehen.
Wir haben einige Block-HTML-Tags wie: div, p, header, footer, table, ul, li, section, article .. und viele andere.
Die gemeinsamen Merkmale dieser Karten sind:
- Hat eine Standardlänge von 100 %
- Der Abstand zwischen Inhalt und Rand kann eingestellt werden.
- Die Breite kann mit der width-Eigenschaft geändert werden.
Beispiel : Zwei div-Tags werden in zwei verschiedenen Zeilen angezeigt.
<div>Nội dung thẻ div thứ nhất</div> <div>Nội dung thẻ div thứ hai</div>Ergebnis :
Nội dung thẻ thứ nhất Nội dung thẻ thứ haiWas ist ein Inline-HTML-Tag?
HTML Inline ist eine Möglichkeit, den Inhalt innerhalb eines HTML-Tags innerhalb eines bestimmten Bereichs anzuzeigen. Das heißt, seine Länge hängt von der Größe der Daten ab. Daher werden die Inline-Tags nacheinander angezeigt, nicht wie ein Block in einer Reihe.
Es gibt viele HTML-Tags, die eine Inline-Form anzeigen, z. B. span, strong, i, b, a, br, big, button, textarea, label , …
Beispiel : Zwei Span-Tags zeigen aufeinanderfolgende Daten an, nicht in zwei Zeilen wie in Beispiel 1.
<span>Nội dung thẻ span thứ nhất</span> <span>Nội dung thẻ span thứ hai</span>Wann sollten Inline- und Block-HTML-Tags verwendet werden?
Es gibt einen Grund, die beiden Formate so aufzuteilen. Wenn Sie ein HTML-Tag erstellen möchten, das einen Block umschließt, sollten Sie ein div- oder ein p-Tag verwenden, da es einen Block darstellt. Wenn Sie Daten in einer Zeile anzeigen möchten, verwenden Sie Inline-Tags.
Die Frage ist, können wir ein Block-Tag in ein Inline-Tag umwandeln? Ganz einfach, verwenden Sie einfach die CSS-Anzeigeeigenschaft.
Beispiel : Legen Sie CSS display:inline für zwei div-Tags fest.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; display: inline } </style> </head> <body> <div>Nội dung thẻ div inline thứ nhất</div> <div>Nội dung thẻ div inline thứ hai</div> </body> </html>Ergebnis :
Nội dung thẻ div inline thứ nhất Nội dung thẻ div inline thứ nhấtUmgekehrt, wenn Sie von Inline zu Block konvertieren möchten, verwenden Sie die CSS-Eigenschaft:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: white; display: block } </style> </head> <body> <span>Nội dung thẻ span block thứ nhất</span> <span>Nội dung thẻ span block thứ hai</span> </body> </html>Ergebnis : Obwohl es sich um ein Span-Tag handelt, zeigt es immer noch Block an.
Nội dung thẻ span block thứ nhất Nội dung thẻ span block thứ haiAlso habe ich das Tutorial zur Verwendung von Inline und Block in HTML beendet. Später, wenn Sie mit CSS arbeiten, werden Sie ihm häufig begegnen.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
