Listy zagnieżdżone
Część sekcji Podstawy ścieżki HTML w Coddy. Lekcja 14 z 60.
Możesz umieścić jedną listę wewnątrz drugiej. Nazywa się to listą zagnieżdżoną. Jest to przydatne do tworzenia struktur hierarchicznych, takich jak konspekty lub menu wielopoziomowe.
Aby utworzyć listę zagnieżdżoną, wystarczy umieścić element <ul> lub <ol> wewnątrz elementu <li> innej listy.
Oto przykład zagnieżdżonej listy nieuporządkowanej:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Drugi element zawiera zagnieżdżoną listę z dwoma podpunktami. W przeglądarce będzie wyświetlana w ten sposób:
- Element 1
- Element 2
- Podpunkt 2.1
- Podpunkt 2.2
- Element 3
Możesz też zagnieżdżać listy numerowane lub łączyć oba rodzaje.
Wyzwanie
ŁatwyUtwórz dokument HTML z zagnieżdżoną listą. Lista powinna wyglądać tak:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
Spróbuj swoich sił
<!DOCTYPE html>
<html>
<body>
<!-- Wpisz kod tutaj -->
</body>
</html>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Podstawy HTML
Czym jest HTML?Podstawowa struktura dokumentu HTMLTagi i elementyZagnieżdżanie i zamykanie tagówKomentarze w HTML7Strona profilu osobistego
Omówienie projektuSekcja nagłówka
Zdjęcie profiloweSekcja „O mnie”Linki do mediów społecznościowych2Tekst i formatowanie
NagłówkiAkapityPodziały wierszaTekst pogrubiony i pochylonyPonownie: tekst pogrubiony i pochylonyPodsumowanie — formatowanie8Formularze i pola wejściowe, część 1
Podstawy formularzyPola tekstoweAtrybuty pólPole hasłaEtykiety pólPodsumowanie – podstawowy formularz11Strona rejestracji na wydarzenie
Przegląd projektuSekcja nagłówkaSekcja szczegółów wydarzeniaFormularz rejestracyjnySekcja stopkiPoćwicz samodzielnie: Edytor online Web