Jaka jest różnica między znacznikami HTML a?

Tak dla kompletności, zapraszam do myślenia o tym w ten sposób:

• istnieje wiele elementów blokowych (linebreaks przed i po) zdefiniowanych w HTML i wiele tagów inline (bez linebreaks).
• ale we współczesnym HTML wszystkie elementy powinny mieć znaczenia : A <p> jest akapitem, an <li> jest elementem listy itp. i powinniśmy używać odpowiedniego tagu do właściwego celu . nie tak jak w dawnych czasach, gdy wcięliśmy używając <blockquote> czy treść była cytatem lub nie.
• więc, co robisz, gdy nie ma żadnego znaczenia dla rzeczy, którą próbujesz zrobić? Nie ma znaczenia dla kolumny o szerokości 400px, prawda? Chcesz tylko, aby Twoja kolumna tekstu miała szerokość 400px, ponieważ pasuje do twojego projektu.
• z tego powodu dodali do HTML jeszcze dwa elementy: ogólne lub bezsensowne elementy <div> i <span>, ponieważ w przeciwnym razie ludzie powróciliby do nadużywania elementów, które mają znaczenie.

Są tu już dobre, szczegółowe odpowiedzi, ale nie ma przykładów wizualnych, więc oto krótka ilustracja:

<div> jest znacznikiem blokowym, podczas gdy {[1] } jest znacznikiem inline.

<div> jest elementem blokowym, a {[2] } jest elementem inline.

Jeśli chcesz zrobić coś z tekstem wbudowanym, <span> jest dobrym rozwiązaniem, ponieważ nie będzie wprowadzał podziałów wierszy, które byłyby używane przez <div>.

Jak zauważyli inni, istnieją pewne semantyki implikowane z każdym z nich, najbardziej istotne jest to, że <div> implikuje logiczny podział w dokumencie, podobny może do sekcji dokumentu lub czegoś takiego, 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>

Prawdziwa istotna różnica jest już wspomniana w odpowiedzi Chrisa. Jednak konsekwencje nie będą oczywiste dla wszystkich.

Jako element inline, <span> może zawierać tylko inne elementy inline. Poniższy kod jest zatem błędny:

<span><p>This is a paragraph</p></span>

Powyższy kod jest nieprawidłowy. Aby zawinąć elementy na poziomie bloku, należy użyć innego elementu na poziomie bloku (np. <div>). Z drugiej strony, <div> może być używany tylko w miejscach, w których elementy blokowe są legalne.

Ponadto reguły te są stałe w (X)HTML i są Nie zmienione przez obecność reguł CSS! Zatem poniższe kody są również błędne!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

Znaczenie "elementu blokowego" jest dorozumiane, ale nigdy nie jest wyraźnie określone. Jeśli zignorujemy całą teorię (teoria jest dobra), to Poniżej znajduje się pragmatyczne porównanie. Następujące:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

Produkuje:

This paragraph has a span.

This paragraph

has
a div.

To pokazuje, że nie tylko powinno a div nie być używane w linii, to po prostu nie spowoduje pożądanego wpływu.

Jak wspomniano w innych odpowiedziach, Domyślnie div będzie renderowany jako element blokowy, podczas gdy span będzie renderowany inline w jego kontekście. Ale żaden z nich nie ma żadnej wartości semantycznej; istnieją po to, aby umożliwić zastosowanie stylizacji i tożsamości do dowolnego fragmentu treści. Używając stylów, możesz sprawić, że div będzie działać jak span i odwrotnie.

Jednym z użytecznych stylów dla div jest inline-block

Przykłady:

1. Http://dustwell.com/div-span-inline-block.html

2. Wyświetlacz CSS: inline vs inline-block

Używałem inline-block do wielkiego sukcesu, w projektach internetowych gier.

Div jest elementem blokowym, a span jest elementem inline, a jego szerokość zależy od jego zawartości, gdzie div nie

Powiedziałbym, że jeśli znasz trochę hiszpańskiego, aby spojrzeć na Ta strona , Gdzie jest właściwie wyjaśnione.

Jednak szybka definicja byłaby taka, że {[0] } służy do dzielenia sekcji, a span do stosowania jakiegoś stylu do elementu wewnątrz innego elementu bloku, takiego jak div.

W HTML są tagi, które dodają strukturę lub semantykę do treści. Na przykład znacznik <p> jest używany do identyfikacji akapitu. Innym przykładem jest znacznik <ol> dla listy uporządkowanej.

Gdy nie ma odpowiedniego znacznika dostępnego w HTML, jak pokazano powyżej, Tagi <div> i <span> są zwykle używane.

Znacznik <div> jest używany do identyfikacji sekcji/podziału na poziomie bloku dokumentu, który ma podział linii zarówno przed, jak i po nim.

Przykłady użycia znaczników div są nagłówki, stopki, nawigacje itp. Jednak w HTML 5 te znaczniki zostały już dostarczone.

Znacznik <span> służy do identyfikacji wewnętrznej sekcji / podziału dokumentu.

Na przykład znacznik span może być używany do dodawania piktogramów w wierszu do elementu.

Chciałem tylko dodać trochę historycznego kontekstu do tego, jak powstało span vs div

Historia span:

/ Align = "right" / 3 lipca 1995 znacznik container do stosowania stylów do niektórych bloków tekstu. Renderowanie jest neutralne, chyba że jest używane w połączeniu z arkusz stylów. Toczy się debata wokół kontra o czytelność, znaczenie. Bert Bos wspomina o rozciągliwości elementu poprzez atrybut klasy (z wartościami takimi jak miasto, osoba, data itp.). Paul Prescod martwi się, że oba elementy będą nadużywane. Przeciwstawia się tekstowi, że " wszelkie nowe element powinien znajdować się na Starym" i dodawać " jeśli utworzymy tag z nie ma semantyki może być używany anywhere bez bycia w błędzie. We musi wymusić na autorach poprawne oznaczanie semantyki dokumentu. My musi zmusić sprzedawców edytorów do dokonania tego wyboru w ich interfejsy."

- Source (W3 wiki)

Z projektu RFC, który wprowadza span:

Po pierwsze, ogólny przekręt- tainer jest potrzebny do noszenia atrybutów LANG i BIDI w przypadki, w których żaden inny element nie jest odpowiedni; zakres ele- w tym celu wprowadza się ment.

- Source (IETF Draft)

Historia div:

Elementy DIV mogą być używane do struktury HTML dokumenty jako hierarchia podziałów.

...

Centrum zostało wprowadzone przez Netscape przed dodaniem wsparcia dla HTML 3.0 div element. Jest zachowany w HTML 3.2 ze względu na jego powszechne rozmieszczenie.

HTML 3.2 Spec

W skrócie, oba elementy powstały z potrzeby bardziej semantycznie ogólnego kontenera. Span został zaproponowany jako bardziej ogólny zamiennik elementu <text> do tekstu w stylu. Div został zaproponowany jako rodzajowy sposób dzielenia stron i miał dodatkową zaletę polegającą na zastąpieniu znacznika <center> dla treści wyrównujących do środka. Div zawsze był elementem blokowym ze względu na swoją historię jako dzielnik stron. Span zawsze był elementem inline, ponieważ jego pierwotnym celem było stylizowanie tekstu, a obecnie div I span są elementami generycznymi z domyślnymi właściwościami wyświetlania bloków i wyświetlania w linii.

<div> jest elementem blokowym. Jako co wszystkie akapity lub treści napisane wewnątrz div, możemy zastosować css do całych elementów w div. Tylko dając styl w div sam.

<span> jest elementem inline.

Jakie są wszystkie zmiany CSS, które odzwierciedlają tylko ten element.

<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>