Was ist der Unterschied zwischen HTML-Tags
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich möchte für einige einfache Beispiele bitten, die Verwendung von <div> und <span> zeigt. Ich habe beide gesehen, wie sie verwendet, um einen Abschnitt einer Seite mit einem id oder class zu markieren, aber ich bin daran interessiert zu wissen, ob es gibt Zeiten, wenn man über die andere bevorzugt wird.
Lösung
div ist ein Blockelement, span inline ist.
Das bedeutet, dass sie semantisch zu verwenden, divs verwendet werden sollten Abschnitte eines Dokuments zu wickeln, während Spannweiten kleine Portionen von Text, Bilder zu wickeln, etc. verwendet werden soll.
Zum Beispiel:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Beachten Sie, dass es illegal ist, ein Block-Level-Element innerhalb eines Inline-Elements zu platzieren, so:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
... ist illegal.
EDIT: Wie von HTML5 können einige Blockelemente innerhalb einiger Inline-Elemente platziert werden. Siehe die MDN-Referenz hier für eine ziemlich klare Auflistung. Die oben ist immer noch illegal, da <span> nur Phrasierung Inhalt akzeptiert und <div> ist Fluss Inhalt.
Sie haben gefragt, für einige konkrete Beispiele, so dass man von meiner Bowling Website genommen ist, BowlSK :
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Ok, was ist los? Ganz oben auf meiner Seite habe ich einen logischen Abschnitt, die „Header“. Da dies ein Abschnitt ist, verwende ich ein div (mit einer entsprechenden ID). Innerhalb dass habe ich ein paar Abschnitte: die Benutzerleiste und die aktuellen Seitentitel. Der Titel nutzt den entsprechenden Tag, h1. Die userbar, einen Abschnitt zu sein, wird in einem div gewickelt. Innerhalb dass wird der Benutzername in einem span gewickelt, so dass ich den Stil ändern. Wie Sie sehen können, habe ich auch eine span um 2 Buchstaben im Titel eingewickelt -. Dies ermöglicht es mir, ihre Farbe in meinem Sheet zu ändern
Beachten Sie auch, dass HTML5 eine breite neue Reihe von Elementen enthält, die gemeinsame Seitenstrukturen definieren, wie Artikel, Abschnitt, nav usw. Abschnitt 4.4 der html5shiv .
Andere Tipps
Nur aus Gründen der Vollständigkeit, lade ich Sie darüber so denken:
- Es gibt viele Blockelemente (Zeilenumbrüche vor und nach) in HTML definiert, und viele Inline-Tags (keine Zeilenumbrüche).
- Aber in der modernen HTML alle Elemente haben sollen Bedeutungen : a
<p>ist ein Absatz, eine<li>ein Listenelement, usw., und wir sind der richtige Tag für die verwenden soll richtiger Zweck -. nicht in den alten Tagen, wie wenn wir mit<blockquote>eingekerbt, ob der Inhalt ein Zitat war oder nicht - Also, was tun Sie, wenn es ist keine Bedeutung für das, was Sie zu tun versuchen? Es gibt keine Bedeutung zu einer 400px-breiten Spalte, oder? Sie wollen einfach nur Ihre Textspalte 400px breit zu sein, weil, dass Ihr Design passen.
- Aus diesem Grund fügten sie zwei weitere Elemente zu HTML: die generische oder sinnlose Elemente
<div>und<span>, denn sonst würden die Menschen zu missbrauchen, die Elemente zurückgehen, die Bedeutungen zu tun haben .
Es gibt bereits gute, ausführliche Antworten hier, aber keine visuellen Beispiele, so ist hier eine schnelle Darstellung:
<div> ist ein Block-Tag, während <span> ein Inline-Tag ist.
<div> ist ein Blockelement und <span> ist ein Inline-Element.
Wenn Sie etwas mit einigem Inline-Text tun wollten, ist <span> der Weg zu gehen, da sie nicht einführen Zeilenumbrüche, dass ein <div> würde.
Wie bereits von anderen erwähnt, gibt es einige mit jeder implizierten Semantik von ihnen, was am wichtigsten ist die Tatsache, dass ein <div> impliziert eine logische Unterteilung in dem Dokument, ähnlich vielleicht einen Abschnitt eines Dokuments oder etwas, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
Der eigentliche wichtige Unterschied ist bereits in Chris' Antwort erwähnt. Allerdings wird nicht die Folgen für alle offensichtlich sein.
Als Inline-Element kann <span> enthält nur andere Inline-Elemente. Der folgende Code ist also falsch:
<span><p>This is a paragraph</p></span>
Der obige Code ist ungültig. In dem Block-Elemente zu umhüllen, ein weiteres Blockelement muss (wie <div>) verwendet werden. Auf der anderen Seite, <div> dürfen nur dort eingesetzt werden, wo Elemente auf Blockebene legal sind.
Darüber hinaus sind diese Regeln festgelegt in (X) HTML und sie sind nicht durch die Anwesenheit von CSS-Regeln geändert! So sind die folgenden Codes sind auch falsch!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Die Bedeutung von „Blockelement“ wird angedeutet, aber nie explizit erwähnt. Wenn wir alle die Theorie ignorieren (Theorie ist gut), dann wird die folgende pragmatische Vergleich. In dem folgenden:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
erzeugt:
This paragraph has a span.
This paragraph
has
a div.
Das zeigt, dass nicht nur sollte ein div nicht Inline verwendet werden, es wird einfach nicht den erhofften Erfolg brachten.
Wie in anderen Antworten erwähnt, wird standardmäßig div wird als Blockelement wiedergegeben werden, während span in seinem Kontext inline gerendert wird. Aber weder hat jeden semantischen Wert; sie existieren, damit Sie Styling und eine Identität zu jedem gegebenen Bit von Inhalten anzuwenden. Stile können Sie eine div wirken wie ein span und umgekehrt machen.
Eines der nützlichen Arten für div ist inline-block
Beispiele:
I inline-block zu einem großen Erfolg, in Spiel Web-Projekte verwendet haben.
Div ist ein Blockelement und Spanne ist ein Inline-Element und seine Breite hängt von dem Inhalt der es sich von selbst, wo div nicht
Ich würde sagen, dass, wenn man ein bisschen spanisch wissen, betrachten diese , wo richtig erklärt wird.
jedoch eine schnelle Definition wäre, daß div zum Dividieren Abschnitt und span ist für eine Art von der Art eines Element in einem anderen Block Elementen wie div Anwendung.
Ich wollte nur einigen historischen Kontext hinzufügen, wie es kam vs span wird div
Die Geschichte des span:
Am 3. Juli 1995 Benjamin C. W. Sittler schlägt einen allgemeinen Text Container für Arten auf bestimmte Textblöcke anwenden. Die Rendering-neutral ist, außer wenn in Verbindung eines gebrauchten Sheet. Es gibt eine Debatte um gegenüber etwa Lesbarkeit Bedeutung. Bert Bos ist zu erwähnen, die Erweiterbarkeit der Natur des Elements durch das Klassenattribut (mit Werten wie Stadt, Person, Datum, etc.). Paul Prescod ist besorgt, dass beide Elemente wird missbraucht. Er ist im Gegensatz mentionning, dass „jeder neuen in Text Element sollte auf einer alten sein „und fügte hinzu:“ Wenn wir einen Tag erstellen mit keine Semantik kann es anywehere ohne jemals falsch zu sein. verwendet werden Wir müssen Autoren zwingen, richtig die Semantik ihres Dokuments zu markieren. Wir Force-Editor-Anbieter müssen ihre dass Wahl explizit machen in Schnittstellen. "
Aus dem RFC Entwurf, der span führt:
Zuerst wird eine allgemeine Con- Tainers benötigt, um die LANG und BIDI Attribute in tragen Fälle, in denen kein anderes Element geeignet ist; SPAN Ele- ment wird zu diesem Zweck eingeführt.
Die Geschichte des div:
DIV-Elemente können verwendet werden, HTML-Dokumente als eine Hierarchie von Teilungen zu strukturieren.
...
CENTER wurde von Netscape eingeführt, bevor sie Unterstützung für die zugegebene HTML 3.0 DIV-Element. Es ist in HTML 3.2 aufgrund behielt seine weit verbreiteter Einsatz.
Auf den Punkt gebracht, entstand beide Elemente aus einem Bedürfnis nach einer semantisch-generic-Container. Span wurde als generischer Ersatz für ein <text> Element Stil Text vorgeschlagen. Div wurde als generische Art und Weise vorgeschlagen Seiten zu teilen und hatte den zusätzlichen Vorteil, dass die <center> Tag für Mitte ausrichtende Inhalt ersetzt. Div war schon immer ein Block-Element gewesen wegen seiner Geschichte als Seitenteiler. Span war schon immer ein Inline-Element, weil sein ursprünglicher Zweck Textstil und heute div und Spanne war beide angekommen jeweils an generische Elemente mit Standard-Block und Inline-Anzeigeeigenschaften zu sein.
In HTML gibt es Tags, die Struktur oder Semantik zum Inhalt hinzufügen. Zum Beispiel wird der <p>-Tag verwendet, um einen Absatz zu identifizieren. Ein weiteres Beispiel ist der <ol> Tag für eine geordnete Liste.
Wenn es keinen geeigneter Tag in HTML ist, wie oben gezeigt, sind die <div> und <span>-Tags in der Regel zurückgegriffen.
Der <div>-Tag wird verwendet, um eine Blockebene Sektion / Abteilung eines Dokuments zu identifizieren, die einen Zeilenumbruch hat sowohl vor als auch nach.
Beispiele, wo div-Tags verwendet werden können, sind Kopf- und Fußzeilen, Navigationen etc. Jedoch in HTML 5 Tags wurden bereits zur Verfügung gestellt worden ist.
Der <span>-Tag wird verwendet, um eine Inline-Sektion / Abteilung eines Dokuments zu identifizieren.
Zum Beispiel kann ein span-Tag verwendet wird Inline-Piktogramme auf ein Element hinzuzufügen.
Denken Sie daran, im Grunde genommen und sie selbst führt keine Funktion entweder. Sie sind nicht spezifisch über Funktionalität nur durch ihre Tags .
Sie können nur mit Hilfe von CSS angepasst werden.
Nun, da auf Ihre Frage kommen:
SPAN-Tag zusammen mit einigem Styling auf mit Halt in einer Linie von Nutzen sein wird, sagen sie in einem Absatz im html. Dies ist eine Art von Line-Pegel oder auf Anweisungsebene in HTML.
Beispiel:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
DIV-Tag Funktionalität wie gesagt nur sichtbar mit Styling gesichert werden, halten große Stücke von HTML-Code haben.
DIV ist Blockebene
Beispiel:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
Beide haben ihre Zeit und Fall, wenn verwendet werden soll, basierend auf Ihrer Anforderung.
Hope Uhr klar mit der Antwort. Danke.
<div> ist ein Blockelement.
Als das, was alle Absätze oder jeder Inhalt in einem div geschrieben, können wir CSS auf die ganzen Elemente in der div gelten. Mit nur geben Stil in div allein.
<span> ist ein Inline-Element.
Was alle CSS-Änderungen vorgenommen werden, die nur auf dieses Element reflektiert.
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
