HTML-Blockelemente

HTML besteht aus verschiedenen Elementen, die als Baustein jeder Webseite dienen. Für jede Webseite gibt es unterschiedliche Standpunkte, und sowohl das Front-End als auch das Back-End implementieren Logik. Für HTML gelten benutzerdefinierte oder benutzerdefinierte Anforderungen zur Hervorhebung von Webseiten wie CSS, Bootstrap-Frameworks usw. Im Allgemeinen unterteilt der CSS-Stil HTML-Elemente für seinen Zweck in zwei Kategorien: 1. Elemente auf Blockebene und 2. Inline-Elemente. Wir haben bereits frühere Artikel wie span und div besprochen. -Element wird für Inline-Elemente in HTML und verwendet. Tag wird für Elemente auf Blockebene in HTML verwendet.

Syntax:

----------codes------ ---------------------- Im Allgemeinen hat jedes HTML-Tag seine vordefinierten Strukturen und Funktionen. Blockelemente in HTML haben unterschiedliche Tags, die wir in den Dokumenten verwenden werden. Einige der Tags sind unten aufgeführt.

Tags:

, , , , - , , , , , , , , , , , , ,

Die genannten Tags sind vordefinierte Blockelemente in HTML. Jedes Tag erfüllt eine andere Funktionalität, wenn es in HTML-Dokumenten aufgerufen wird. Höchstwahrscheinlich verwenden wir Tags in Elementen auf Blockebene. Codes sind eine allgemeine Syntax für die Elemente auf Blockebene in HTML. Außerdem verwenden wir bei Bedarf die oben genannten vordefinierten Tags. Jedes Tag verfügt über unabhängige und eigenständige Inhalte in HTML.

Wie funktioniert das Blockelement in HTML? Es verwendet die CSS-Stile mit dem Formatierungsmodell und deckt sowohl die Inline- als auch die Blockelemente ab. Höchstwahrscheinlich wird es sich um die Formatierung von Blockelementen kümmern. Das Formatieren von Blockelementen ist eines der Elemente auf Blockebene in HTML. Jedes CSS-Element sieht aus wie ein Formular; es enthält eine Box mit einigen Komponenten wie Inhalt, Innenabstand und Rahmen; Dies sind die verschiedenen Komponenten in CSS-Stilen.

Inhalt: Bezeichnet den allgemeinen Inhalt der HTML-Elemente wie Text, Bilder und Videos usw. Auffüllung: Es bezeichnet alle Auffüllungen, die durch das Format in beliebige Inhalte einbezogen werden, wie z. B. Polsterung oben, Polsterung links, Polsterung rechts, Polsterung unten usw. Dies sind die Eigenschaften. Rand: Bezeichnet alle Ränder in HTML-Inhalten und -Auffüllungen; Wir setzen Grenzen mit „Border-Top“, „Border-Bottom“ usw. Blockelemente möchten die Ränder und Abstände in HTML-Dokumenten festlegen. Denn Webseiten benötigen die richtige Ausrichtung, um den Benutzern einen attraktiveren Charakter zu verleihen. In gewisser Weise enthält der Abschnitt „Blockelemente“ Ränder außerhalb eines Elements. Die Polsterung innerhalb der Elemente umgibt den Inhalt. Wenn Sie Hintergrundfarben oder Bilder für die Elemente benötigen, können Sie diese zuweisen und sie werden sowohl im Inhalts- als auch im Füllbereich angezeigt. Im Allgemeinen sind Randbereiche transparent und zeigen den Hintergrund der übergeordneten Elemente an. Eine Ausnahme tritt jedoch auf, wenn dem übergeordneten Element, beispielsweise dem Körperabschnitt, keine Anzeigeeigenschaften zugewiesen wurden. In solchen Fällen werden sowohl im Rand- als auch im Füllbereich Farben oder Bilder angezeigt. Der Rand bezieht sich auf den Abstand zwischen der Außenkante von HTML-Elementen, einschließlich Inhalt und Innenabstand.

Wir legen auch die Ränder fest, um die Webseiten hervorzuheben, einschließlich Rahmenfarben, Stile, Breite und Rand. Wir steuern das Erscheinungsbild des Rahmens um ein Element und können verschiedene Rahmentypen festlegen. Mit der CSS-Eigenschaft „border-style“ können Benutzer ihre eigenen benutzerdefinierten Rahmenstile festlegen, die mit Werten wie „keine“, „durchgehend“, „doppelt“, „versteckt“, „gepunktet“, „gestrichelt“, „Rille“, „Rippe“, „Einsatz“ und „Anfang“ angegeben werden. Wenn wir die Dokumente mit Rändern ausgerichtet haben, geben wir keine Werte an, was bedeutet, dass der Standardwert „Keine“ ist; Dies bedeutet, dass Ihrer Seite kein Rahmen zugewiesen ist. Alle diese Rahmenstile sind in der CSS1-Version enthalten, mit Ausnahme versteckter Werte, die in der CSS2-Version hinzugefügt wurden.

Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.

Code:

div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;} div.sample ul {color:green;} The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.

Examples of HTML Block Elements Given below are the following examples:

Example #1 Code:

div.sample {width:150px;border:2px dotted black;padding:7px;} div.sample ul {color:green;} Samples

Apple Orange Pineapple Output:

Example #2 Code:

div.sample {width:150px;border:2px dotted black;padding:7px;} div.sample ul {color:green;} Sample green black

Output:

Example #3 Code:

.first { background-color: green; list-style-type: none; text-align: center; margin: 2; padding: 2; } .second { display: inline-block; font-size: 30px; padding: 23px; } Home AboutUs Contact Us Output:

In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the and tags. is used for inline elements, but paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.

Conclusion In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.