2009-07-08 7 views
19

Was ist der Zweck desWas ist <span></span> Element?

<span></span> 

Element? Und wo sollten wir es verwenden?

+0

Span ist sehr CSS centric. Es fügt kein eigenes Markup hinzu, aber Sie können eine ID, einen Stil oder eine Klasse auf einen Teil von HTML anwenden. Anstatt beispielsweise irgendeinen Text zu verwenden, würden Sie einen Test oder etwas Ähnliches verwenden. – Wedge

+0

@Wedge: kleiner Tippfehler einige Tests sollten sein einige Tests Xn0vv3r

+4

Diese Frage scheint off-topic zu sein, weil sie es kann leicht beantwortet werden durch eine der Tausenden von Referenzen online und es geht um ein bestimmtes Coding-Problem. – j08691

Antwort

28

Von here:

Definition und Verwendung

Der Tag bietet keine visuelle ändern sich.

Das Tag bietet eine Möglichkeit, einen Hook zu einem Teil eines Textes oder eines Teils von einem Dokument hinzuzufügen.

Wenn der Text in einer Spanne Elemente angeschlossen ist, können Sie Stile auf den Inhalt hinzufügen oder den Inhalt mit zum Beispiel JavaScript manipulieren.

So ist die kurze Version ist, dann ist es etwas Text Stil (ohne Absatz oder Zeilenumbrüche, die von <div> Tag unterscheidet)

+1

+1. Ein typisches Beispiel ist es, einen Text mit einer anderen Hintergrundfarbe (oder einem anderen Stilelement, das kein eigenes HTML-Tag hat) zu verwenden. –

+1

Ist nicht w3schools eine schlechte Referenz zu verwenden? –

6

Es ist nur ein Weg, um logische Gruppen zusammen Subelementen. Sie können auch Stile usw. auf dieser Ebene anwenden, die kaskadieren.

Werfen Sie einen Blick auf die wikipedia article, die in die Tiefe geht.

7

Es ist für die Elemente und den Inhalt für die Anwendung Struktur HTML Gruppierung, definiert für HTML 4.0 bei http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4:

Die DIV und SPAN-Elemente, in Verbindung mit der ID und Klasse Attribute, bieten eine generischer Mechanismus zum Hinzufügen von Struktur zu Dokumenten. Diese Elemente definieren den Inhalt Inline (SPAN) oder Block-Ebene (DIV), aber erzwingen keine anderen Präsentations-Idiome auf den Inhalt. Daher können Autoren diese Elemente in Verbindung mit Stylesheets, dem lang-Attribut, usw. verwenden, um HTML an ihre eigenen Bedürfnisse und Vorlieben anzupassen.

Es geht um ein Beispiel für die Verwendung zu geben.

4

Span hat keine strukturelle Bedeutung für das Dokument (wie zum Beispiel h1), kann aber als Container verwendet werden, wenn keiner der anderen Inline-Container geeignet ist. Sie würden zum Beispiel einen Bereich verwenden, wenn Sie etwas CSS auf ein kleines Stück Text innerhalb eines anderen Textes anwenden müssen.

http://htmlhelp.com/reference/html40/special/span.html

+0

Was meinen Sie mit struktureller Bedeutung? – user1451111

4

Der span-Tag sagt nur den Browser anwenden, was jemals Stiländerungen innerhalb der Spanne enthalten sind, und wenn es kein Styling innerhalb der Spanne ist dann gäbe es keine Formatierung den beigefügten Text angewandt werden. Dies ist ein bisschen anders als das div-Tag, das einen Absatzumbruch enthält, auch wenn in einem div keine Styling-Optionen enthalten sind.

So ist es nützlich, wenn Sie Stile auf Elemente anwenden möchten, ohne sie in einem separaten Block zu platzieren.

prost

1

Es ist nur ein Platzhalter für Javascript oder CSS.

Wenn Sie nicht Javascript/CSS verwenden, hat keinen Nutzen für Sie.

+1

Müll können Sie Spannweiten, wenn Sie dies wünschen. –

+0

Was ist das für ein Müll, mP? "Es ist nur ein Platzhalter für Javascript oder CSS." so kann jeder es manipulieren, wenn er/sie css/javascript kennt. Kannst du mir sagen, wenn er/sie nicht über Javascript/CSS weiß, was bedeutet für ihn/sie? Und ich habe nicht gesagt, dass es nicht gestylt werden kann. Was ich meinte, ist Tag nur nützlich für diese Javascripter oder Css'er, für interaktives Design oder Grafik-Design. – janetsmith

+1

Ihre Antwort ist ein wenig irreführend. Es ist ein Platzhalterelement - wie ein Div - mit dem Unterschied, dass es kein Blockelement ist - es wird als Inline-Element gerendert. Es hat standardmäßig kein Styling. Kann gestylt werden. Hat keine semantische Bedeutung. – easwee

3

Zusätzlich zu Styling/Gruppierung/Scripting können Spannen den Textzeilen tatsächliche Funktionalität und/oder Bedeutung geben. Betrachten Sie diese:

<p>This <span title="Punk IPA">beer</span> tastes good.</p> 
<p>Come on, <span lang="kr">여보</span>!`</p> 
<p>Hello <span contenteditable="true">Wordl</span>!?</p> 

Auch die dir, übersetzen oder Rechtschreibprüfung Attribute sind nicht nur für CSS oder JS, aber brauchbar auf ihren eigenen auch!