Blockebenenelemente in HTML-HTML-Tutorial-php.cn

HTML verfügt über einige vordefinierte Tags und Elemente; Es kann einige der Funktionen und Typen in Elementen wie Blockebene oder Inline-HTML-Elementen enthalten. Die Webseiten verfügen über unterschiedliche Navigationssätze, die Logik wird vom benutzerdefinierten Front-End-HTML implementiert oder es werden benutzerdefinierte Anforderungen verwendet, um die Webseiten hervorzuheben, z. B. die Verwendung von CSS und Bootstrap-Frameworks. Wir haben bereits über frühere Artikel wie Span und besprochen div Das Element wird für Inline-Elemente in HTML und

verwendet. Das Tag wird für Elemente auf Blockebene in HTML verwendet. Jede Abteilung der HTML-Kategorien verfügt über unterschiedliche Funktionen. Logiken sollten im Frontend implementiert werden.

Syntax:

Die HTML-Tags verfügen über eigene vordefinierte Strukturen und Funktionen für vordefinierte Tags und Elemente. Elemente auf Blockebene in HTML verfügen über einen anderen Satz von Tags. Auf den Webseiten werden Elemente verwendet. Einige der unten aufgeführten Tags.

<address>,<article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption>
<figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p>
<pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>

Nach dem Login kopieren

Die oben genannten Tags sind vordefinierte Tags in HTML-Tags auf Blockebene; Jedes Tag hat unterschiedliche Sprachen und Funktionen, wenn wir die Tags in HTML-Seiten aufrufen. Höchstwahrscheinlich verwenden wir

Tags in Elementen auf Blockebene in HTML.

<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html>

Nach dem Login kopieren

Der obige Code ist die allgemeine Syntax für die Elemente auf Blockebene in HTML. Wir werden auch einige vordefinierte Tags verwenden, die in den vorherigen Absätzen erwähnt wurden; Bei Bedarf verfügt jedes Tag über unabhängige und eigenständige Inhalte in HTML.

Was sind Block-Level-Elemente in HTML?

Die Elemente auf Blockebene verwenden CSS-Stile zum Hervorheben der Webseiten und ein anspruchsvolleres HTML-Formatierungsmodell für Webbenutzer zur Entwicklung des Geschäftswachstums. Es gibt Regeln, die sowohl die Inline- als auch die Blockelemente abdecken. Höchstwahrscheinlich wird es verwendet, um die Formatierungselemente auf Blockebene abzudecken. Jedes CSS-Element erstellt die Formulare mithilfe von HTML-Tags und enthält Felder. es kann einige Komponenten wie Inhalt, Abstand und Rahmen enthalten; Dies sind einige Komponenten in CSS-Stilen.

Elemente auf Blockebene möchten die Ränder und Abstände in Webseiten festlegen, da sie eine ordnungsgemäße Ausrichtung und Ansicht benötigen. Gleichzeitig enthält der Abschnitt „Elemente“ auch Ränder, die früher an der Außenseite eines Elements vorhanden waren. Es existiert innerhalb eines Elements und deckt den gesamten Inhalt des HTML-Körpers ab. Wenn die Elemente Hintergrundfarben oder Bilder benötigen, werden diese zugewiesen und diese werden sowohl im Inhalts- als auch im Füllbereich angezeigt. Im Allgemeinen dienen Randbereiche immer dazu, den transparenten Bereich abzudecken und den Hintergrund der übergeordneten Elemente anzuzeigen. Ausnahmen treten auf, wenn dem übergeordneten Element keine Anzeigeeigenschaften zugewiesen wurden, in denen es dazu führt, dass an beiden Rändern Farben oder Bilder angezeigt werden und Auffüllbereiche Hinweis: Als Rand wird der Abstand zwischen der Außenkante der HTML-Elemente (sowohl Inhalt als auch Auffüllung) bezeichnet.

Wir können auch die Randbereiche festlegen, um die Webseiten auf die nächste Ebene hervorzuheben; Es umfasst Rahmenfarben, Stile, Breite und Rand. Das Gleiche gilt für den auf Webseiten angezeigten Rahmen um ein Element sowie für alle Typen. CSS verfügt über eine eigene Eigenschaft „Border-Style“, mit der der Benutzer seine eigenen benutzerdefinierten Rahmenstile mit einigen Werten wie „none“, „solid“, „double“ und „double“ festlegen kann. verdeckt, gepunktet, gestrichelt, Rille, Grat, Einschub und Anfang. Wenn wir die Dokumente mit Rändern ausgerichtet haben, geben wir keine Werte an. Der Standardwert „Keine“ wird zugewiesen, was bedeutet, dass den Webseiten kein Rahmen zugewiesen wird. Diese Rahmenstile sind in der CSS1-Version enthalten und verfügbar, mit Ausnahme versteckter Werte, die in der nächsten Version, d. h. der CSS2-Version, hinzugefügt wurden.

Ab HTML 4 ist ein div-Element das Element auf Blockebene und wird für das Design verwendet und das Dokument mit den angegebenen Unterteilungen getrennt; Das Element hat kein spezifisches Merkmalsformat und ist außerdem veraltet. Attribute in HTML ausrichten. Es kann standardmäßig zur Zentrierung oder rechten Seite seines Inhalts im

verwendet werden. Das Tag sollte alle Formate in CSS-Stilen annehmen. Außerdem verfügt es über Optionen wie verschachtelte Div-Tags. Es muss die anderen mit div verschachtelten Elemente kombinieren. Was auch immer wir deklariert und zugewiesen haben, die Stile, Rahmen und Ausrichtungen werden im div-Tag in einem Dokument angegeben und wirken sich auf diese spezifischen verschachtelten Elementbereiche aus. Einige grundlegende Attribute und Werte, die für das div-Tag verwendet werden, sind ein Rahmen, ein Hintergrundbild und andere benutzerdefinierte Formatstile.

div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}

Nach dem Login kopieren

Die markierten Codes sind Beispiele zum Verständnis der CSS-Attribute und -Funktionen, die mit dem div-Tag implementiert werden.

Beispiele für Blockebenenelemente in HTML

Ein Beispiel für Elemente auf Blockebene in HTML finden Sie unten:

Beispiel #1

<html>
<head>
<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>
</body>
</html>

Nach dem Login kopieren

Ausgabe:

Blockebenenelemente in HTML

Beispiel #2

<html>
<head>
<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>
</head>
<body>
<p>Sample <span style = "color:black">Home</span><br/>
<span style = "color:LightGreen">Contactus</span></p>
</body>
</html>

Nach dem Login kopieren

Ausgabe:

Blockebenenelemente in HTML

Example #3

<html>
<head>
<style>
.example1 {
background-color: darkgreen;
list-style-type: none;
text-align: center;
margin: 3;
padding: 13;
}
.example2 {
display: inline-block;
font-size: 32px;
padding: 27px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#products">Products</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#support">Support</a></li>
</ul>
</body>
</html>

Nach dem Login kopieren

Output:

Blockebenenelemente in HTML

In the above examples, we have used the basics of the block-level elements in the first two examples and also aligned the menus tabs with text values in the

and tags. is used for in-line elements but

paragraph tag will be used for blocking the text which has already specified in the user-level areas. In the final example, we will use for

element in html is used for navigating the web pages with some block-level contents in the documents. We already shared information about the working of block-level elements and specified with some css properties are enabled for block-level attributes using background-color,text-styles with some options like list text-alignments, padding and margins font-styles; these are some attributes with values specified within the navigation web pages.

Conclusion

The block-level elements are covered with the entire space for elements that are used to create the blocks. The User browsers will display the block-level elements by using the new line and full-width for both before and after the html elements. We can visualize the elements using boxes like a stack.

Das obige ist der detaillierte Inhalt vonBlockebenenelemente in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

html html5 HTML Tutorial HTML Properties HTML tags

Quelle：php

Vorheriger Artikel：HTML-Inline-Block Nächster Artikel：HTML-Formularattribut

Erklärung dieser Website

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

Neueste Artikel des Autors