Heim >Web-Frontend >HTML-Tutorial >Span-Tag in HTML
Span-Tag in HTML
- WBOYOriginal
- 2024-09-04 16:25:35645Durchsuche
Span-Tag in HTML wird als Inline-Element betrachtet. Es ähnelt dem div-Tag, aber das div-Tag wird absichtlich für Elemente auf Blockebene verwendet, während das span für Inline-Elemente verwendet wird. Es wird hauptsächlich dann verwendet, wenn ein Benutzer eine Gruppierung der Inline-Elemente in seiner Codestruktur vornehmen möchte. Das Span-Tag in HTML wird verwendet, um bestimmten Inhalten mithilfe der Elementklasse oder des ID-Attributs Stil zu verleihen. Es ist nicht möglich, mithilfe des Span-Tags im HTML-Dokument allein visuelle Änderungen vorzunehmen. Es fungiert als Inline-Tag im HTML-Dokument. Die Verwendung der Span-Tags in Ihrem Code trägt dazu bei, Code- und HTML-Attribute zu reduzieren.
Syntax mit Beispiel
Die Syntax zum Definieren eines Span-Tags lautet wie folgt:
Syntax:
<span class=""> Contents </span>
- Wie oben gezeigt, ist der Syntaxtext im öffnenden und schließendes Tag wird als Span-Attribut betrachtet.
- Dies wird hauptsächlich zum Gruppieren von Inline-Elementen verwendet. Es hilft, unseren Code in einem HTML-Dokument zu minimieren.
- Es funktioniert ähnlich wie das div-Tag, aber ein wesentlicher Unterschied besteht darin, dass div als Element auf Blockebene verwendet wird, während das span-Tag in HTML als Inline-Tag funktioniert.
- Das Span-Tag allein kann keine visuelle Veränderung bewirken.
- Es funktioniert mit Tags wie , , ,
, , und viele mehr. - Dieses Tag kann keinen Zeilenumbruch erstellen, aber es gibt dem Benutzer die Möglichkeit, Dinge von anderen Elementen zu trennen. So ist es möglich, Änderungen nur am ausgewählten Text vorzunehmen, anstatt Änderungen am gesamten Code vorzunehmen.
- Es wird nur so viel benötigt, wie die Breite erfordert, anstatt die gesamte verfügbare Breite im Container einzunehmen. Das beste Beispiel für ein Span-Tag ist Attribut und Bild. Es verwendet Container für einige Texte, die die Verwendung von Span-Tags zeigen.
- Es sind keine spezifischen Attribute in der Codierung erforderlich. Mit Hilfe einiger gängiger CSS und Klassen können wir ein Span-Tag definieren.
- Wir können einen bestimmten Text hervorheben, eine Hintergrundfarbe auf den Text anwenden und mithilfe des Span-Tags von HTML ein Hintergrundbild zum Text hinzufügen.
- Es ist auch möglich, die Schriftart des Textes mithilfe des Span-Tags zu ändern. Es hilft dabei, Schriftgröße, Farbe, Hintergrundfarbe, Schriftstil usw. zu ändern.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Span tag in HTML </title>
<style>
.demo {
color: blue;
font-size: 200%;
position: relative;
top: 5px;
}
</style>
</head>
<body>
<p><span class="demo">О</span>Pride make us artificial and Humility make us real.</p>
<p>True fact about life </p>
</body>
</html>
Ausgabe:
- Span-Tag hat kein spezifisches Attribut; Wie andere Tags unterstützt es auch globale Attribute und Ereignisattribute.
Eigenschaften des Span-Tags in HTML
Hier sind einige Eigenschaften zum Anwenden von Styling mit . Diese lauten wie folgt:
- CSS-Schriftstil: Wird verwendet, um Stile auf den angegebenen Text anzuwenden. Der Text sollte normal, kursiv, initial, übernommen usw. sein.
- CSS-Schriftfamilie: Wird verwendet, um verschiedene Schriftarten aus einer bestimmten Liste auf bestimmten Text anzuwenden.
- CSS-Schriftgröße: Es ist hilfreich, die Schriftgröße an den Text anzupassen.
- CSS-Schriftstärke: Mit dieser Eigenschaft wird die Schriftart festgelegt, die entweder fett oder dick sein soll.
- CSS-Texttransformation: Der Text wird großgeschrieben.
- CSS-Textdekoration: Diese Eigenschaft wird zum Dekorieren von Text in Form einer Textdekorationslinie, Textdekorationsfarbe usw. verwendet.
- CSS-Farbe: Diese Eigenschaft des Span-Tags wird zum Färben des Textinhalts und der Textdekorationen verwendet.
- CSS-Hintergrundfarbe: Dies ist eine nützliche Eigenschaft, um die Hintergrundfarbe für das Element festzulegen.
- CSS text-shadow: Mit dieser Eigenschaft kann der Benutzer dem Text Schatten hinzufügen.
- CSS text-align-last: Es hilft bei der Ausrichtung des Textes.
- CSS-Wortabstand: Diese Eigenschaft im Span-Tag wird verwendet, um den Abstand zwischen Wörtern zu verwalten.
- CSS-Leerzeichen: Diese Eigenschaft hilft uns, Leerzeichen innerhalb des angegebenen Elements zu verarbeiten.
- CSS-Zeilenhöhe: Gibt die Höhe der Zeile im HTML-Code an.
- CSS-Wortumbruch: Diese Eigenschaft hilft uns zu definieren, wo die tatsächliche Zeile umgebrochen werden soll.
- CSS-Textüberlauf: Dies ist die nützlichste Eigenschaft des Span-Tags, die uns hilft, übergelaufene Inhalte zu identifizieren, die nicht angezeigt werden, was dem Benutzer signalisieren sollte.
Beispiele für Span-Tags in HTML
Ein Beispiel für das Span-Tag in HTML finden Sie unten:
Beispiel #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<style>
.imgdemo {
padding-left:25px;
background:url(./Content/data/2.jpg) no-repeat top left;
display: inline-block;
height: 150px;
width: 150px;
}
</style>
<body>
<!-- span tags with inline style/css -->
<h2>Span tag with text color</h2>
<span style="color:brown;">
Do those things which makes your soul happy </span>
<br>
<h2> Span tag with background color</h2>
<span style="background-color:lightblue;">
Everybody have natural beauty. Try look at your picture when you are a baby. Your eyes, eyebrows, lips, body. When you are smiling, crying, staring, etc. That it, you got it.</span>
<br>
<h2> Span tag with background image</h2>
<br>
<span class="imgdemo" style="color: azure; font-size: 16px; font-display: block;">
Image as background</span>
</body>
</html>
Ausgabe:
Beispiel #2
Code:
<!--Example 2--> <!DOCTYPE html> <html> <head> <title>HTML Span Tag</title> </head> <body> <h2> Span tag Examples</h2> <p>Good, Better, Best Never let it rest. <span style="color:crimson;"> "Till your good is better and your better is best" </span></p> <p>Everyday you have a choice -<span style="font-family: cursive; font-weight: 200; font- size: 18px;"> STAY THE SAME OR CHANGE </span> </p> <p>Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them."<span style="background-color: aqua ; color:darkblue;"> "Opportunities don't happen, you create them" </span></p> </body> </html>
Ausgabe:
Example #3
Code:
<!DOCTYPE html>
<html>
<style>
.spandemo {
background:url(./Content/data/3.jpg) no-repeat top left;
display: inline-block;
padding-top: 20px;
width: 1800px;
height: 500px;
}
</style>
<body>
<h2> Span tag for image</h2> <br>
<span class="spandemo" style="color: aliceblue; font-weight: bold;">
<p> Nature always wears<br> Color of SPIRIT. </p> <br>
Heaven is under our feet <br>as well as over our heads <br>
<p> Deep in their roots,<br>all flowers Keep the light </p>
<p> My soul steers me<br> into nature's silence</p>
</span>
</body>
</html>
Output:
Conclusion
From all the above information, we came to know that the tag in HTML is used to give styling to inline elements. One can group this styling attribute and specifies them inline. Span tag mainly used to arrange structural sections and proper layout sections on our webpage with the help of inline CSS.
Das obige ist der detaillierte Inhalt vonSpan-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
css html define for require break signal using class Attribute Property Event this overflow background transform word
Stellungnahme：
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
Vorheriger Artikel：Pre-Tag in HTMLNächster Artikel：Pre-Tag in HTML