CSS Pre -Tag
Beispiel 01:
Beginnen wir mit dem ersten Beispiel unseres Artikels. Wir müssen diesen Beispiel für HTML -Code mit der Verwendung des Basistags „HTML“ starten. Das Head -Tag setzt mit der Verwendung eines Titel -Tags darin fort, ich.e. "CSS PRE". Um das HTML -Skript vollständig zu verstehen, müssen wir zuerst den Körperabschnitt unserer Webseite betrachten. Die Überschrift der Größe 1 wird im Körper initialisiert. Danach wird ein „Div“ -Element abgeschoben, um einen neuen Abschnitt zu erstellen und ihm einige andere Elemente hinzuzufügen. Dieser Div -Abschnitt enthält eine Überschrift der Größe 2. Nach der Überschrift wird ein Spannwechsel -Tag verwendet, um eine neue Spannweite innerhalb des Abschnitts „Div“ zu erstellen. Diese Spanne enthält lange Textdaten darin.
Nach all diesen Sätzen folgt das Span -Tag eng von der Schließung des „DIV“ -Tags. Der Körper unserer HTML -Seite ist abgeschlossen. Danach müssen wir uns das CSS -Styling dieses HTML -Code im Style -Tag ansehen. Das Span -Element wird verwendet, um es entsprechend zu stylen. Das Attribut „Weißraum“ wird mit dem Wert "Pre" verwendet. Das "Pre" -Wertungsattribut wird hier verwendet, um alle Räume und Linienbrüche zu erhalten, die das darin enthalten. Danach ist die Schriftfamilie auf Monospace eingestellt, und die Anzeigeeigenschaft weist den Wert "Block" zu. Die Schriftgröße ist auf 20 Pixel mit der Farbe Braun eingestellt. Während die Hintergrundfarbe auf "Bisque" eingestellt ist. Es gibt andere Schriftfamilien, die im Styling verwendet werden, die von dieser Zeitspanne verwendet werden sollen. Das Kopf -Tag ist abgeschlossen und wir können unseren Code mit dem VS -Code ausführen.
Die Ausgabe für diese HTML -Seite im Chrombrowser ist im folgenden Bild angegeben. Sie können sehen, dass die Seite einen neuen Abschnitt erstellt und ein Span -Element darin hinzugefügt wurde. Das Span -Element enthält einige Zeilen als Inhalt, während die Linie durchbricht und Räume aufgrund der Verwendung des „Pre“ -attributs als Wert für die Eigenschaft „White Space“ von CSS erhalten bleiben.
Beispiel 02:
Im vorherigen Beispiel haben wir uns die Verwendung des „Pre“ -attributs als Wert der weißen Raumeigenschaft angesehen. Jetzt verwenden wir es als Tag in der HTML -Datei. Wir beginnen dieses Beispiel mit dem gleichen HTML-, Kopf- und Körper -Tag -Format. Innerhalb des Body -Tags dieses Beispielcode. Dieser Inhalt enthält Zeilenbrüche und Räume zwischen den Wörtern.
Danach verwenden wir eine weitere Überschriften der Größe 1, um festzustellen, dass das Vorelement die feste Breite und Höhe enthält. Das "Div" -Element wird hier verwendet, um nach der Überschrift einen neuen Abschnitt zu erstellen. Das Style -Tag wird im Eröffnungs -Tag „DIV“ verwendet, um den Abschnitt „Div“ auf eine Breite von 300 Pixel, Überlauf auf Auto, Höhe von 200 Pixel und eine Hintergrundfarbe von Hellgrün zu stylen. Dieser Abschnitt „Div“ enthält ein „Pre“ -Tag, um einige Zeilen auf ganz andere Weise anzuzeigen, anstatt einige Textzeilen als Inhalt zu verwenden. Dieser gestaltete "Pre" -T -Tag -Inhalt wird im folgenden Bild angezeigt. Das Pre-Tag und das "Div" -Tag sind hier geschlossen.
Danach schließen wir die Tags „Körper“ und „HTML“. Dieser Code kann mit der Option "Ausführen" im Visual Studio -Code ausgeführt werden.
Die Ausgabe dieses HTML -Codes ist unten im folgenden Bild angezeigt. Es zeigt deutlich die Verwendung des Standard-Pre-Tags in den einfachen Zeilen von Texten, die die Räume enthalten. In den Pausen wird der Inhaltstext so angezeigt, wie er ohne einzelne Zeichenänderung ist. Außerdem verhindert die Verwendung der festen Breite und Höhe für den Abschnitt „Div“ das „PRE“ -Tag, um seine Daten so anzuzeigen. Nach der Überschrift 2 zeigt der grüne Hintergrund mit Scrollbar dieselben Stildaten, die mit dem „PRE“ -Tag "PRE" angegeben sind.
Beispiel 03:
Lassen Sie uns unser letztes Beispiel für diesen Artikel haben, der einen Vormagne enthält. Der HTML -Code beginnt mit demselben Format - HTML -Tag und dem Kopf -Tag, das dem Tag "Titel" folgt, um einer HTML -Seite einen neuen Namen zu geben. Dann die Verwendung eines Body -Tags zum Hinzufügen einiger Elemente, die auf dem Browserbildschirm angezeigt werden sollen. Nachdem wir das Kopf -Tag verwendet haben, verwenden wir die Überschrift der Größe 1 im Körper einer HTML -Seite. Das Figuren -Tag wird vor der Verwendung von „Pre“ verwendet. Der Pre-Tag ist mit dem braunen Hintergrund, der weißen Textfarbe, einer Breite von 600 Pixel, einer Polsterung von 10 Pixel und einer Schriftgröße von 16 Pixel über das Inline-Styling gestaltet.
Wir fügen das Zeichen weniger und größer als die HTML -Seite mit den Schlüsselwortzeichen wie LT, GT und der Form einer Kuh hinzu. Der Pre-Tag ist jetzt abgeschlossen und wir haben das Tag „Figcaption“ initialisiert, um die Form, die wir in der Pre-Tag gebildet haben. Die ID für das Figcaption-Tag wird als „Kuhkaption“ angegeben und enthält 2 Datenzeilen mit einigen Räumen und Linienbrüchen. Das Figuren -Tag, das Body -Tag und die HTML -Tags sind danach geschlossen. Wir verwenden diesen Code im VS -Code, um ihn auszuführen.
Die Ausgabe zeigt, dass die Überschrift vom separaten Abschnitt „Div“ getrennt ist. Dieser Div-Abschnitt enthält eine Kuhform mit einem braunen Hintergrund und der angegebenen Beschriftung am Ende dieser bildähnlichen Figur. Die Räume werden aus der Beschriftung entfernt.
Abschluss
In diesem Artikel handelt. Wir haben einige Beispiele ausprobiert, um die Verwendung auf die einfachste und bestmögliche Weise zu demonstrieren. Wir haben versucht, das Schlüsselwort „PRE“ als Attributwert der weißen Raumeigenschaft in einem unserer Beispiele zu verwenden. In den restlichen Beispielen haben wir es als separates Tag versucht, um zu demonstrieren, dass es klarer und effizienter funktioniert.