Was bedeutet das HTML-Span-Tag? Detaillierte Erläuterung der Funktion des Span-Tags

寻∝梦
Freigeben: 2018-08-22 13:58:29
Original
58367 Leute haben es durchsucht

Was bedeutet das HTML-Span-Tag? In diesem Artikel werden Ihnen die Funktion des Span-Tags, die Verwendung des HTML-Span-Tags und die Attribute des HTML-Span-Tags vorgestellt. Werfen wir einen Blick auf die Details dieses Artikels

Die Definition und Funktion des HTML-Span-Tags:

Das Span-Tag ist ein Inline-Tag der Hypertext Markup Language (HTML), das zum Kombinieren von Inline-Elementen im Dokument verwendet wird. span hat kein festes Format. Wenn ein Stil darauf angewendet wird, entsteht eine visuelle Veränderung. Das

-Tag selbst erzeugt keinen visuellen Effekt.

Es bietet Ihnen lediglich die Möglichkeit, auf einen Teil des Dokuments zu verweisen.

Auf diese Weise können Sie Textteile zitieren und formatieren oder mit JavaScript bearbeiten. Das Tag

wird zum Gruppieren von Inline-Elementen in einem Dokument verwendet.

Hier ist ein Beispiel:

<p><span>some text.</span>some other text.</p>
Nach dem Login kopieren

Erklärung des Beispiels:

Wenn auf span kein Stil angewendet wird, hat der Text im span-Element keinen visueller Unterschied zu anderen Texten. Dennoch fügt das span-Element im obigen Beispiel dem p-Element zusätzliche Struktur hinzu.

Sie können ID- oder Klassenattribute auf Spans anwenden, was eine entsprechende Semantik hinzufügen und die Anwendung von Stilen auf Spans erleichtern kann.

Es ist möglich, entweder Klassen- oder ID-Attribute auf dasselbe -Element anzuwenden, es ist jedoch üblicher, nur eines davon anzuwenden. Der Hauptunterschied zwischen den beiden besteht darin, dass die Klasse für Gruppen von Elementen (ähnliche Elemente oder als eine bestimmte Art von Elementen verstanden werden kann) verwendet wird, während die ID zur Identifizierung einzelner und eindeutiger Elemente verwendet wird.

Tipp: Möglicherweise ist Ihnen aufgefallen, dass einige Texte auf der W3School-Website einen anderen Stil haben als andere Texte. „Tipps“ sind beispielsweise in kräftigem Orange dargestellt. Obwohl es viele Möglichkeiten gibt, diesen Effekt zu erzielen, lautet unser Ansatz: Verwenden Sie den „Hinweis“, um das Span-Element zu verwenden, und wenden Sie dann die Klasse auf das übergeordnete Element des Span-Elements, also das p-Element, an, damit Sie es anwenden können span zum untergeordneten Element dieser Klasse Entsprechender Stil.

HTML:
<p><span>提示:</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
Nach dem Login kopieren

So verwenden Sie den HTML-Span-Tag:

Definieren Sie einen Bereich innerhalb einer Zeile, d. h. eine Zeile kann durch < ;span> Bereich, um einen bestimmten Effekt zu erzielen. selbst hat keine Eigenschaften. und

ist ein Element auf Blockebene. ist ein großer Container, natürlich kann ein großer Container einen kleinen Container enthalten,

Hier sind Beispiele:

<html><body><script>
function setspan{if( id==1){a.innerText="设置文字"};
if( id==2){a.innerHTML="<font color=red size=7>设置代码</font>"};}
</script><span id=a></span>
<a href=javascript:setspan(1)>设置span的文字</a></br>
<a href=javascript:setspan(2)>设置span的代码</a></br>
</body></html>
Nach dem Login kopieren

Zum Beispiel:

<span id=&#39;span_slide_container&#39; style=&#39;display:block; overflow-y: auto; overflow-x: auto; height: 500px;&#39;>
Nach dem Login kopieren

Display:block; muss hier hinzugefügt werden, sonst funktioniert span nicht

Wenn Sie möchten Um das Span-Tag so zu definieren, dass es zentriert wird, müssen Sie den Span zunächst als Element auf Blockebene anzeigen. Das heißt, Sie müssen zuerst das Attribut display:block des Spans definieren und dann das Margin-Attribut margin:0px hinzufügen auto; bis zur Spanne. Dadurch wird der gewünschte Effekt erzielt. Es gibt viele Attribute von span, die jedoch nur dann wirksam werden, wenn span in ein Element auf Blockebene umgewandelt wird Hilfs-Tag und wird im Allgemeinen nur zum Identifizieren des Textstils verwendet. Wenn Sie also weitere Stilattribute für Span-Tags definieren möchten, müssen Sie zunächst Attribute auf Blockebene zu Span hinzufügen, dh das Attribut display:block; , damit Ihr Stil in Zukunft funktioniert

Die Kernattribute des HTML-Span-Tags:

Die DTD-Spalte gibt an, welcher Dokumenttyp dieses Attribut unterstützt. S=Streng, T=Übergang, F=Frameset. Das

-Tag unterstützt die folgenden Kernattribute:

Was bedeutet das HTML-Span-Tag? Detaillierte Erläuterung der Funktion des Span-Tags

Schreiben Sie danach einen Stil="", und Sie können nach Belieben Stile hinzufügen.

style ist nur ein Attribut von span. Es gibt auch diese, unter denen das Mausaktionsattribut nur onclick auflistet, und es gibt viele andere Mausaktionsattribute.

Textinhalt

Tipps und Hinweise:

Tipp: Verwenden Sie , um Inline-Elemente zu gruppieren, um sie mit Stilen zu formatieren.

Hinweis: span hat keine feste Formatdarstellung. Es ändert sich nur optisch, wenn Sie einen Stil darauf anwenden.

Oben finden Sie eine detaillierte Erläuterung der Bedeutung, Funktion und Verwendung des HTML-Span-Tags. Wenn Sie Fragen haben, stellen Sie diese bitte unten.

[Verwandte Empfehlungen]

Wie stelle ich den Schriftstil für das HTML-Schriftart-Tag ein? So steuern Sie die Textgröße mit CSS

Welche Rolle spielt der HTML-EM-Tag? Der Unterschied zwischen - und -Tags

Das obige ist der detaillierte Inhalt vonWas bedeutet das HTML-Span-Tag? Detaillierte Erläuterung der Funktion des Span-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!