Spis treści:
- Listy HTML są niezbędne do organizowania i prezentowania danych na stronie internetowej. Istnieją trzy główne typy: listy uporządkowane, nieuporządkowane i listy opisowe.
- Listy uporządkowane używają cyfr lub innych znaków do porządkowania elementów. Atrybut type umożliwia dostosowanie, natomiast atrybuty start i odwrócone zmieniają pozycję początkową i kolejność.
- Listy nieuporządkowane grupują powiązane elementy bez określonej kolejności. Styl punktora można dostosować za pomocą CSS.
Lista HTML jest niezbędnym elementem strukturalnym każdej grupy powiązanych danych na stronie internetowej. Niezależnie od tego, czy tworzysz menu, organizujesz wyprzedaże, czy próbujesz przedstawić złożone dane w bardziej czytelnej formie, poniższe listy pomogą Ci w wykonaniu tego zadania.
Istnieją trzy główne typy list HTML, z których każdy służy określonemu celowi strukturalnemu w tworzeniu stron internetowych.
1. Lista zamówionych
Lista uporządkowana HTML umożliwia pogrupowanie listy powiązanych elementów w określonej kolejności. Aby utworzyć nową uporządkowaną listę, musisz użyć tagu
- . Znacznik
- . Każdy element listy (znacznik
- ) będzie zawierał określoną pozycję na liście.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Ten kod renderuje następujący widok:
Należy pamiętać, że domyślnym typem uporządkowania listy uporządkowanej są liczby, ale można to zmienić za pomocą atrybutu type. Atrybut type daje Ci możliwość zdecydowania, który element będzie porządkował Twoją listę. Masz możliwość użycia alfabetu (wielkie lub małe litery), cyfr lub cyfr rzymskich (wielkie lub małe litery).
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Dodanie atrybutu type do znacznika
- powoduje wyświetlenie następującego zaktualizowanego widoku:
- dla każdego elementu listy:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Ten kod renderuje następujący widok:
Domyślnym stylem punktorów dla listy nieuporządkowanej jest dysk. W przeszłości można było używać atrybutu type do ustawiania stylu punktora listy nieuporządkowanej. Jednak atrybut typu listy nieuporządkowanej jest teraz przestarzałym atrybutem. Zalecaną alternatywą dla stylizacji list nieuporządkowanych jest właściwość CSS list-style-type.
<style>
ul { list-style-type: square; }
</style>Powyższy kod aktualizuje widok do następującego:
Właściwość CSS list-style-type umożliwia użycie kolekcji różnych stylów punktorów, w tym okręgów, niestandardowych obrazów, ikon i symboli. Dzięki CSS, który zmienia układ elementów listy, możesz nawet używać list nieuporządkowanych do tworzenia pasków nawigacyjnych.
Zagnieżdżone listy
Lista zagnieżdżona to element listy będący częścią innej listy. Listę zagnieżdżoną można utworzyć, korzystając z kombinacji uporządkowanych i/lub nieuporządkowanych elementów listy. Struktury te mogą reprezentować bardziej złożone hierarchie.
<H3>Chicken Pasta Insturctions</H3>
<ol>
<li>Boil pasta.</li>
<li>
Season chicken breast.
<ul>
<li>salt and pepper</li>
<li>paprika</li>
<li>garlic powder</li>
<li>Italian seasoning</li>
</ul>
</li>
<li>Heat olive oil in pot over medium-high heat.</li>
<li>Add chicken breast to pan and cook for 5 minutes.</li>
<li>Add heavy cream and parmesan cheese to empty pot.</li>
<li>Add pasta and slice chicken to cream sauce.</li>
</ol>Ten kod renderuje następujący widok:
3. Lista opisów
Element listy opisów umożliwia utworzenie listy terminów i powiązanych z nimi szczegółów. Znacznik
- umożliwia utworzenie nowej listy opisów, której należy używać z elementami
- (termin opisu) i
- (szczegóły opisu).
<h3>Popular Laptops</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Provides up to 22 hours of battery life,
has an advanced camera, and a magic keyboard with touch ID.
</dd><dt>MSI GS76 Stealth</dt>
<dd>
A powerful gaming laptop with supercharged graphics and customized keys.
</dd>
</dl>Powyższy kod renderuje następujący widok:
Uporządkuj swoją treść za pomocą odpowiedniej listy HTML
Lista HTML, którą wybierzesz do wykorzystania w projekcie tworzenia stron internetowych, powinna zależeć od treści, które chcesz zaprezentować użytkownikom. Na przykład, jeśli chcesz utworzyć listę sekwencyjną zawierającą etapy przygotowania posiłku lub wykonania zadania, najlepszym rozwiązaniem będzie lista uporządkowana.
Jeśli jednak chcesz pogrupować powiązane informacje, które nie wymagają szeregu kroków (takich jak lista kontrolna), bardziej realną opcją byłaby lista nieuporządkowana. Ponadto, jeśli chcesz utworzyć słownik lub listę często zadawanych pytań, lepszym wyborem będzie lista opisowa.
Oprócz atrybutu type istnieją dwa inne atrybuty, których można użyć ze znacznikiem
- : start i odwrócony.
Atrybut start umożliwia rozpoczęcie zamawiania od dowolnej pozycji przy użyciu wartości całkowitej. Na przykład, jeśli do tagu
- dodasz start=”3″, bez określenia typu, kolejność listy zacznie się od numeru trzy. Jeśli przypiszesz typ=”a” lub typ=”I”, kolejność zacznie się odpowiednio od c lub III.
<ol type="I" start="3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Powyższy kod renderuje następujący widok:
Atrybut odwrócony umożliwia odwrócenie kolejności listy. Akceptuje wartość logiczną, a jej domyślną wartością jest false.
<ol reversed="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Ten kod generuje następujące dane wyjściowe w przeglądarce:
2. Lista nieuporządkowana
Lista nieuporządkowana umożliwia grupowanie powiązanych elementów, których kolejność nie jest istotna. Domyślnie przeglądarka używa punktora do oznaczenia każdego elementu.
Aby utworzyć nową listę nieuporządkowaną, musisz użyć znacznika
- jako elementu nadrzędnego i znacznika
- dla każdego elementu listy:
- grupuje i zawiera znaczniki