Div i przęsła nie są wymienne w tworzeniu stron internetowych. Każda z nich służy innym celom, a wiedza o tym, kiedy użyć każdego z nich, pomoże Ci w tworzeniu czystych, łatwych w zarządzaniu stron internetowych.
Korzystanie z elementu Div
Div zdefiniuj logiczne podziały na swojej stronie internetowej. ZA div—skrót od podziału — to w zasadzie pudełko, w którym można umieścić inne elementy HTML które należą do siebie. Podział może zawierać wiele innych elementów, takich jak akapity, nagłówki, listy, linki, obrazy itp. Może nawet mieć w sobie inne działy, aby zapewnić dodatkową strukturę i organizację.
Aby użyć div element, umieść otwarty tag przed obszarem strony, który chcesz jako osobny podział, i zamykający
zawartość div
Jeśli będziesz stylizować ten obszar za pomocą CSS, możesz dodać ID selektor otwierającego znacznika div:
Możesz też dodać selektor zajęć:
Następnie możesz pracować z tymi elementami w CSS lub JavaScript.
Obecne najlepsze praktyki skłaniają się do używania selektorów klas zamiast identyfikatorów, częściowo ze względu na to, jak konkretne są selektory identyfikatorów. Każdy z nich jest jednak do zaakceptowania i możesz nawet dać
div zarówno identyfikator, jak i selektor klasy.Divy czy sekcje?
div element różni się od HTML5Sekcja elementu, ponieważ nie nadaje zawartej treści żadnego znaczenia semantycznego. Jeśli nie masz pewności, czy blok treści powinien być div lub Sekcja, zastanów się nad przeznaczeniem elementu i zawartością.
- Jeśli potrzebujesz elementu po prostu do dodania stylów do tego obszaru strony, powinieneś użyć div element.
- Jeśli treść ma wyraźny charakter i może być samodzielna, rozważ użycie Sekcja zamiast tego elementu.
Ostatecznie oba div i Sekcje zachowują się podobnie i możesz nadać im atrybuty i stylizować je za pomocą CSS. Oba są elementami blokowymi.
Korzystanie Spans
Zakres jest domyślnie elementem wbudowanym, w przeciwieństwie do div i Sekcja elementy. Zakres element jest zwykle używany do owijania określonego fragmentu treści, takiego jak tekst, aby nadać mu dodatkowy zaczep, którego można użyć do dodawania stylów. Jednak bez żadnych atrybutów stylu Zakres nie ma żadnego wpływu na tekst.
Kolejna różnica między Zakres i div elementy jest to, że div element zawiera podział akapitu, podczas gdy Zakres element tylko mówi przeglądarce, aby zastosowała skojarzone reguły stylu CSS do tego, co jest zawarte w tagi:
Wyróżniony tekst i niewyróżniony tekst.
Możesz dodać.
class="podświetl"
lub podobny do Zakres element do stylizacji tekstu za pomocą CSS.
Element span nie ma wymaganych atrybutów, ale trzy najbardziej przydatne są takie same jak te w div element:
- styl
- klasa
- ID
Posługiwać się Zakres gdy chcesz zmienić styl treści bez definiowania tej treści jako nowej element blokowy w dokumencie.
Na przykład, jeśli chcesz, aby drugie słowo an h3 zmierzając do czerwonego, możesz otoczyć to słowo Zakres element, który stylizowałby to słowo jako czerwony tekst. Słowo nadal pozostaje częścią h3 element, ale będzie wyświetlany na czerwono.