Jak używać ul w HTML. Jak umieścić elementy listy poziomo? Gdzie style list są zapisane w szablonie Twenty Eleven

Hipertekstowy język znaczników HTML ma znacznik

, używany do tworzenia list punktowanych. Jest wspierany przez wszystkich nowoczesne przeglądarki i umożliwia wyświetlanie elementów w kolejności niewymagającej numerowania. Na przykład bardzo często wyświetla na stronie pozycje menu i wszystko, co jest powiązane z listami: dania, produkty, sprzęt, narzędzia i wiele więcej, które należy wymienić bez wskazywania priorytetu konkretnej pozycji.

Składnia tagu

• Element nr 1
• Element nr 2
• Element nr 3
• ...

Ten kod przekłada się na listę punktowaną w witrynie:

• Element nr 1
• Element nr 2
• Element nr 3

Etykietka

wymaga obowiązkowe użycie znacznik zamykający
.

Aby utworzyć elementy listy, używany jest sparowany znacznik. Pomiędzy znacznikami otwierającymi i zamykającymi znajdują się pojedyncze słowa, frazy, akapity, obrazy, fragmenty kodu i wiele innych elementów, które stanowią treść listy punktowanej.

Jaka może być zawartość listy punktowanej?

Może to być różnorodny tekst, w tym pojedyncze słowa, frazy i akapity, obrazy, zagnieżdżone listy, fragmenty kodu PHP i wiele innych, które wymagają prostego oznakowania.

Każdy element listy punktowanej jest domyślnie wcięty o 40 pikseli w prawo. Używanie Style CSS, możemy zmienić sposób wyświetlania tę listę według własnego uznania. Etykietka

ma charakter blokowy, a więc zajmuje cały dostępny mu obszar, ograniczony krawędzią ekranu, ramą tabeli lub innymi elementami strony.
Załączniki typu lista w liście są dozwolone.

Na przykład

• Element nr 1
• • Pozycja nr 2-1
  • Element #2-2
  • Element #2-3
• Element nr 3
• ...

Atrybuty i właściwości znaczników

Powszechnie używany atrybut tagu

to atrybut typu wskazujący, jak będzie wyglądał znacznik listy. Może przyjmować następujące wartości

1. type="disc" - znacznik w postaci wypełnionego okręgu (ta wartość jest domyślna). Przykład dysku był nieco wyższy.

2. type="circle" - znacznik w postaci przezroczystego okręgu

Na przykład:

• Element nr 1
• Element nr 2

• Element nr 1
• Element nr 2

3. type="square" - znacznik w formie kwadratu

Na przykład:

• Element nr 1
• Element nr 2

A tak to wygląda na stronie:

• Element nr 1
• Element nr 2
Uwaga 1

W CSS typ punktora jest określany za pomocą atrybutu typu listy:

• ...

Przyjrzyjmy się, jakie wartości może przyjmować typ listy:

• dysk - znacznik w formie okręgu (przykład był powyżej)
• okrąg - znacznik w postaci przezroczystego okręgu (przykład był powyżej)
• kwadrat - znacznik w formie kwadratu (przykład był powyżej)
• dziesiętny - znacznik w postaci listy numerowanej za pomocą cyfr arabskich: 1, 2, 3, ...
• dziesiętne-wiodące-zero - znacznik w postaci listy numerowanej za pomocą cyfr arabskich z zerem wiodącym: 01, 02, 03, ...
• dolny-rzymski - znacznik w postaci listy numerowanej w alfabecie łacińskim małymi literami: i, ii, iii, iv, v
• górno-rzymskie - znacznik w formie listy numerowanej w alfabecie łacińskim pisanymi wielkimi literami: I, II, III, IV, V
• dolny-łaciński - znacznik w formie listy w alfabecie łacińskim małymi literami: a, b, c, d, ...
• górno-łaciński - znacznik w formie listy w alfabecie łacińskim wielkimi literami: A, B, C, D, ...
• dolny-grecki - znacznik w formie listy zapisanej małymi literami w alfabecie greckim
• górno-grecki - znacznik w formie listy w alfabecie greckim pisanym wielkimi literami
Uwaga 2

Atrybut można przypisać do samego tagu

i tagi
• . Podczas ustawiania atrybutu dla tagu
  wszystkie elementy listy zostaną wyświetlone zgodnie z atrybutem. Ale możemy nadać temu lub innemu elementowi własny wyświetlacz. Przykład na zdjęciu:

  Kod wygląda następująco:

  • Element nr 1
  • Element nr 2
  • Element nr 3

  • Element nr 1
  • Element nr 2
  • Element nr 3

  Zmiana znaczników tagów

  za pomocą CSS

  Elementy listy punktowanej utworzone przez tag

  , można oznaczyć dowolnymi obrazami. CSS służy do zmiany typu znacznika. Na przykład

  • Element nr 1
  • Element nr 2
  • Element nr 3

  A tak to wygląda na stronie:

  • Element nr 1
  • Element nr 2
  • Element nr 3

  C za pomocą CSS możemy ustawić inne typy wyświetlania znaczników. Ale musisz o tym pamiętać, określając dowolny styl tagu

  , dotyczy to wszystkich elementów listy.
  Jeśli zdecydujesz się na zmianę standardowych list ul i li, ten temat będzie dla Ciebie interesujący. Ponieważ tutaj dowiesz się kilku oryginalne rozwiązania. Co z pewnością pomoże Ci zmienić standardowy wygląd na unikalny, w którym do projektowania list wykorzystywany jest styl CSS. Zaletą jest to, że przez cały czas będziemy używać tylko jednej klasy, co radykalnie zmieni wygląd. Oprócz tych parametrów możesz określić, od jakiego numeru powinna zaczynać się lista; tutaj możesz zrobić wszystko samodzielnie. Domyślną wartością początkową dla list numerowanych jest pierwsza litera A.

  Po omówieniu podstaw przyjrzymy się teraz bliżej elementom używanym do zapewnienia struktury i znaczenia różnym częściom projektu. Jeśli ktoś nie wie, ul i li są znacznie lepszą opcją niż zwykły tekst, ponieważ przy zawijaniu tekstu, szczególnie w telefon komórkowy, doskonale wcina się i nie owija się wokół markera.

  Listy są uważane za świetny sposób prezentacji informacji na stronach, ponieważ są łatwe do odczytania i dobrze wyglądają. Wiele osób uważa, że ​​wypunktowania to małe obrazki, choć w rzeczywistości wszystkie one są tworzone za pomocą dość prostego kodu HTML. Możesz osadzić różne typy listy można ze sobą łączyć, jeśli chcesz, pamiętaj tylko o ich prawidłowym zamknięciu. We wszystkich tych poleceniach list możesz bawić się wybranym tekstem.

  Musisz także wiedzieć, że listy początkowo zawierają kilka elementów:

  1 . Informacje zdezorganizowane.
  2 . Uporządkowane informacje.
  3 . Definicje.

  Zacznijmy instalację:

  1. Opcja:

  
  
  • Pozycja listy
  
  
  • Unikalna lista
  
  
  • Oryginalne listy
  
  
  • ZORNET.RU - Webmaster
  
  
  • Kolejna lista
  
  
  
  CSS

  Ksangelopan (
  margines: 19px 0 0;
  dopełnienie:0;
  styl listy: brak;
  licznik-reset: li;
  }
  .ksangelopan li (
  obramowanie: 2 piksele ciągłe #3575ad;
  tło: #d7dee4;
  pozycja: względna;
  margines na dole: 17px;
  dopełnienie: 15px 9px;
  }
  .ksangelopan li:hover (
  indeks z: 1;
  }
  .ksangelopan li:przed (
  obramowanie: 2 piksele ciągłe #2270b3;
  pozycja: absolutna;
  góra: -14px;
  dopełnienie: 3px 9px;
  rozmiar czcionki: 11px;
  grubość czcionki: pogrubiona;
  kolor: #246eaf;
  tło: #f2f4f7;
  licznik-przyrost: li;
  treść: licznik(li);
  -czas przejścia-webkit: 0,4 s;
  czas przejścia: 0,4 s;
  }
  .ksangelopan li:hover:before (
  tło: #2672b3;
  kolor: #f7f9fb;
  -webkit-transform: tłumacz (-11px, 0);
  -ms-transform: tłumacz (-11px, 0);
  -o-transform: tłumacz (-11px, 0);
  transformacja: tłumaczenie(-11px, 0);
  }
  .ksangelopan li:po (
  treść: "";
  pozycja: absolutna;
  czas przejścia: 0,3 s;
  -właściwość przejścia-webkit: szerokość;
  właściwość przejścia: szerokość;
  indeks Z: -1;
  tło: #FFF;
  wysokość: 100%;
  po lewej: 0;
  góra: 0;
  szerokość: 0;
  }
  .ksangelopan li:hover:po (
  szerokość: 100%;
  }

  
  To wszystko, jeśli chodzi o instalację.

  2 Druga opcja:

  

  
  
  • Pozycja listy
  
  
  • Unikalna lista
  
  
  • Oryginalne listy
  
  
  • ZORNET.RU - Webmaster
  
  
  • Kolejna lista
  
  
  
  CSS

  Beleduzlopamges (
  margines na dole: 8px;
  dopełnienie:0;
  styl listy: brak;
  licznik-reset: li;
  }
  .beleduzlopamges li (
  pozycja: względna;
  obramowanie: 2 piksele stałe #195588;
  tło: #eff3f7;
  dopełnienie: 15px 19px 15px 27px;
  margines: 12px 0 12px 40px;
  -czas przejścia-webkit: 0,3 s;
  czas przejścia: 0,3 s;
  }
  .beleduzlopamges li:hover (
  tło: #FFF;
  }
  .beleduzlopamges li:before (
  wysokość linii: 32px;
  pozycja: absolutna;
  góra: 4px;
  po lewej: -39px;
  szerokość: 39px;
  wyrównanie tekstu: do środka;
  rozmiar czcionki: 16px;
  grubość czcionki: pogrubiona;
  kolor: #f9f5f5;
  tło: #275b88;
  licznik-przyrost: li;
  treść: licznik(li);
  czas przejścia: 0,2 s;
  }
  .beleduzlopamges li:hover:before (
  szerokość: 46px;
  }
  .beleduzlopamges li:po (
  pozycja: absolutna;
  po lewej: 0;
  góra: 4px;
  treść: "";
  wysokość: 0;
  szerokość: 0;
  obramowanie: 16px pełne przezroczyste;
  kolor obramowania po lewej stronie: #275b88;
  -czas przejścia-webkit: 0,2 s;
  czas przejścia: 0,2 s;
  }
  .beleduzlopamges li:hover:after (
  margines po lewej stronie: 6px;
  }

  
  Możesz niezależnie ustawić środkową gammę, aby pasowała do głównego stylu witryny.

  3 Opcja trzecia:

  

  
  
  • Skrypty dla uCoz
  
  
  • Szablony dla uCoz
  
  
  • Projekt strony internetowej
  
  
  • Style stron internetowych
  
  
  • Stylizacja za pomocą CSS
  
  
  
  CSS

  Nizualisanelag (
  dopełnienie:0;
  styl listy: brak;
  licznik-reset: li;
  }
  .nizualisanelag li (
  pozycja: względna;
  dopełnienie: 9px 17px 17px 25px;
  margines po lewej stronie: 39px;
  czas przejścia: 0,2 s;
  kursor: wskaźnik;
  grubość czcionki: pogrubiona;
  kolor: #343638;
  }
  .nizualisanelag li:przed (
  obramowanie: 3px stałe przezroczyste;
  wysokość linii: 35px;
  pozycja: absolutna;
  góra: 0;
  po lewej: -29px;
  szerokość: 41px;
  wyrównanie tekstu:środek;
  rozmiar czcionki: 14px;
  grubość czcionki: pogrubiona;
  kolor: #619dce;
  licznik-przyrost: li;
  treść: licznik(li);
  czas przejścia: 0,3 s;
  
  rozmiar pudełka: border-box;
  }
  .nizualisanelag li:hover:before (
  kolor: #337AB7;
  }
  .nizualisanelag li:po (
  pozycja: absolutna;
  góra: 0;
  po lewej: -29px;
  szerokość: 41px;
  wysokość: 41px;
  obramowanie: 5 pikseli ciągłych #468bd0;
  promień granicy: 50%;
  treść: "";
  nieprzezroczystość: 0,5;
  -webkit-box-size: border-box;
  -moz-box-sizing: border-box;
  rozmiar pudełka: border-box;
  }
  .nizualisanelag li:hover:after (
  animacja: 500 ms łatwość wejścia 0 s odbicia;
  nieprzezroczystość: 1;
  }

  @klatki kluczowe odbijają się w (
  0% {
  nieprzezroczystość: 0;
  transformacja: skala3d(.3, .3, .3);
  }
  20% {
  transformacja: skala3d(1.3, 1.3, 1.3);
  }
  40% {
  transformacja: skala3d(.9, .9, .9);
  }
  60% {
  nieprzezroczystość: 1;
  transformacja: skala3d(1.03, 1.03, 1.03);
  }
  80% {
  transformacja: skala3d(.97, .97, .97);
  }
  Do (
  nieprzezroczystość: 1;
  transformacja: skala3d(1, 1, 1);
  }
  }

  
  Zawiera piękną animację.

  4 Opcja czwarta:

  

  
  
  • Pierwszy element witryny
  
  
  • Drugi element witryny
  
  
  • Trzeci element witryny
  
  
  • Czwarty element witryny
  
  
  • Piąty element witryny
  
  
  
  CSS

  Wypełnienie:0;
  styl listy: brak;
  }
  .kudezamuden li(
  dopełnienie: 6px;
  }
  .kudezamuden li:przed (
  dopełnienie po prawej stronie: 11 pikseli;
  grubość czcionki: pogrubiona;
  kolor: #4979a0;
  treść: "\2606";
  czas przejścia: 0,4 s;
  }
  .kudezamuden li:hover:before (
  kolor: #235e90;
  treść: „\2605”;
  }

  
  Podobny poprzednie wersje, zmieniona została jedynie sama ikona.

  Ogólnie rzecz biorąc, jest to niewielki wybór list, które może utworzyć webmaster niezła lista na portalu, gdzie sam może go bardziej zaprojektować tak, jak sam chce to widzieć.

  Jeśli chcesz umieścić elementy na liście numerowanej, a nie punktowanej, zostanie użyty uporządkowany kod HTML. Ta lista jest tworzona przy użyciu znacznika ol. Numeracja rozpoczyna się od jednego i zwiększa się o jeden dla każdego kolejnego uporządkowanego elementu listy ze znacznikiem li.

  Jedyną różnicą jest to, że ten znacznik jest przeznaczony wyłącznie dla list numerowanych. Nazwa tagu pochodzi od angielskiego skrótu „Ordered List” – lista numerowana.

  Składnia tagu

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3
  4. ...

  Gdzie atrybut type="value" może przyjmować następujące wartości

  • A - ustawia znaczniki w postaci wielkich liter łacińskich (A, B, C..);
  • a - ustawia znaczniki w postaci małych liter łacińskich (a, b, c..);
  • I - ustawia znaczniki w postaci dużych cyfr rzymskich (I, II, III, IV..);
  • i - ustawia znaczniki w postaci małych cyfr rzymskich (i, ii, iii, iv..);
  • 1 (domyślnie) - ustawia znaczniki w postaci cyfr arabskich (1, 2, 3..);

  Atrybut start="value" określa wartość początkową (wartość początkową) raportu.

  Atrybut odwrócony określa liczenie odwrotne (jeśli to konieczne).

  Etykietka

  wymaga obowiązkowego użycia znacznika zamykającego

  Aby utworzyć elementy listy, używany jest sparowany znacznik

  • . Pomiędzy znacznikami otwierającymi i zamykającymi znajdują się pojedyncze słowa, frazy, akapity, obrazy, fragmenty kodu i wiele innych elementów, które stanowią treść listy punktowanej.

    Notatka

    Wewnątrz listy możesz zmienić konto na własne. W tym celu na tagu znajduje się specjalny atrybut value="".

  • , który jest przypisany wartość liczbowa. Na przykład

    1. Element nr 1
    10. Element nr 2
    11. Element nr 3

  Przykłady z listami numerowanymi w formacie HTML (

  )

  Przykład 1. Lista numerowana HTML pisana literami łacińskimi

  Przykład z wielkich liter

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Przykład z małymi literami

  1. Element nr 10
  2. Element nr 11
  3. Element nr 12

  Tak to wygląda na stronie:

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Przykład 2. Lista numerowana HTML pisana alfabetem łacińskim

  Przykład z wielkich liter

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Tak to wygląda na stronie:

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Przykład z małymi literami

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Tak to wygląda na stronie:

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Przykład 3. Lista numerowana html inna pozycja początkowa

  Przykład pokazujący możliwości atrybutu start, który pozwala ustawić wartość początkową licznika.

  50. Element nr 1
  51. Element nr 2
  52. Element nr 3

  Tak to wygląda na stronie:

  1. Element nr 1
  2. Element nr 2
  3. Element nr 3

  Przykład 4. Zmiana licznika w listach numerowanych HTML

  Poniżej przykład z możliwością zmiany wartości liczników za pomocą atrybutu value podczas wyświetlania nowych elementów w tagach

  • .

    10. Element nr 1
    11. Element nr 2
    100. Element nr 3
    101. Element nr 4

    Tak to wygląda na stronie:

    1. Element nr 1
    2. Element nr 2
    3. Element nr 3
    4. Element nr 4

    Przykład 5. Odwrócona lista numerowana w formacie HTML

    Poniżej znajduje się przykład listy odwrotnie numerowanej (liczenie w odwrotnej kolejności).

    10. Element nr 1
    11. Element nr 2
    12. Element nr 3
    13. Element nr 4

    Tak to wygląda na stronie:

    1. Element nr 1
    2. Element nr 2
    3. Element nr 3
    4. Element nr 4

    Element

    (z angielskiej „listy nieuporządkowanej”) tworzy listę punktowaną (nieuporządkowaną). Zazwyczaj element
    służy do tworzenia list, w przypadku których zmiana kolejności pozycji na tej liście nie zmienia znacząco znaczenia listy.

    Etykietka

    odnosi się do elementów blokowych, więc zajmie całą dostępną dla niego szerokość, a wielkość wysokości będzie uzależniona od ilości treści.

    Pozycje na listach numerowanych definiuje się za pomocą znacznika

    • , które oprócz tekstu mogą zawierać inne elementy HTML (listy, obrazy, nagłówki, akapity itp.). Domyślnie listy punktowane są wyświetlane na stronie internetowej w postaci listy rozpoczynającej się od małego czarnego kółka. Przeglądarki dodają niewielki margines po lewej stronie podczas wyświetlania elementów listy.

      Notatka: Jeśli

      ma zastosowanie Właściwość CSS, a następnie elementy
      • dziedziczą te właściwości.

        Rada: Aby zmienić typ znacznika, użyj właściwości CSS typu list-style lub właściwości list-style-image, która pozwala na zamianę znaczników na obrazy. Aby utworzyć listy numerowane, użyj znacznika

        .

        Składnia

        ...
        • ...
        ...

        Zamykanie tagu

        Wymagany.

        Atrybuty

        CompactPrzestarzałe w HTML5 Zmniejsza wcięcia i odstępy między wierszami. type HTML5 Ustawia typ znacznika listy.

        Dostępne dla tego przedmiotu atrybuty globalne I wydarzenia.

        Domyślna stylizacja

        Większość przeglądarek wyświetli element

        z następującymi Wartości CSS domyślny:

        Ul (wyświetlanie: blok; typ stylu listy: dysk; margines górny: 1em; margines dolny: 1 em; margines lewy: 0; prawy margines: 0; dopełnienie lewy: 40px; )

        Różnice pomiędzy HTML 4.01 i HTML5

        Atrybuty Compact i Type nie są obsługiwane w HTML5.

        Przykład użycia:

        Nieuporządkowana lista HTML:

        Przykładowy kod HTML:

        Spróbuj sam
        • Kawa
        • Herbata
        • Kakao

        Dane techniczne

        Specyfikacja	Status
        WHATWG HTML Living Standard (WHATWG)	Standard życia
        HTML 4.01 (W3C)	Zalecenie
        HTML5 (W3C)	Zalecenie
        HTML 5.1 (W3C)	Zalecenie

        Obsługa przeglądarki

        Spróbuj sam – przykłady

        Jak mogę sprawić, aby lista zaczynała się od liczby innej niż 1?

        Kontynuujmy nasze rozmowy o początkach HTML. W tym artykule chcę porozmawiać o tym, jak tworzyć akapity, listy i nagłówki w tekście. A także o pojedynczych tagach
        I

        ---

        .

        Gorąco polecam przeczytanie pierwszej lekcji z tej serii, a także artykułu wprowadzającego na temat rozpoczęcia nauki HTML dla tych, którzy jeszcze z nim nie są zaznajomieni.

        Teraz będziemy kontynuować naukę tagów. Zakładam, że czytelnik zapoznał się już z materiałem zawartym w powyższych artykułach.

        Jak zwykle plan pracy:

        1. Akapity
        2. Przerwy w linii
           
        3. Listy i elementy list
        4. Nagłówki
        5. Linijki poziome

           ---

        Akapity

        Tekst prawie zawsze składa się z akapitów. Akapit to element tekstu, który przekazuje całą myśl.

        W HTML akapit, jak widać z tytułu, jest oznaczony przez . Litera „p” pochodzi od słowa „akapit”, które oznacza po prostu „akapit”.

        Spójrzmy na przykład:

        Tekst pierwszego akapitu. Zawiera myśl. Ale teraz ta myśl się skończyła.
        

        
        

        Kolejna myśl już się zaczęła i napiszemy o tym w innym akapicie.
        

        Jak widać, użycie akapitów jest bardzo proste i nie wymaga specjalnych komentarzy. Jeśli spojrzymy na ten kod w przeglądarce, zobaczymy dwie linie z jedną pustą linią między nimi. W tekstach rosyjskich zwyczajowo oddziela się akapit nie pustą linią, ale przesuwając pierwszą linię w prawo. Ale jest to dokładnie formatowanie często używane w Internecie, dlatego często pozostawia się je w tekstach rosyjskojęzycznych. Jeśli jednak nie podoba Ci się to zachowanie, możesz je zmienić za pomocą CSS.

        Przerwy w linii
        

        Czasami trzeba przetłumaczyć wiersz, nie kończąc myśli ani nie zamykając akapitu. Oznacza to, że po prostu przejdź do nowej linii. Służy do tego jeden tag
        . Oto przykład jego użycia:

        Wiatr wieje wesoło
        
        A łódź przyspiesza
        
        Biega wśród fal
        Z podniesionymi żaglami.
        

        Ten fragment wiersza A.S. Puszkin pomógł nam zilustrować działanie tagu
        . Specjalnie umieściłem dwie ostatnie linie tego czterowierszu w jednym wierszu kodu, aby pokazać, że linie zostały przeniesione do nowej linii nie dlatego, że umieściliśmy podziały wierszy, ale dlatego, że umieściliśmy znaczniki
        . Znacznik ten jest bardzo prosty i nie wymaga szczegółowego wyjaśnienia, dlatego przestaniemy go tutaj omawiać.

        Listy,

        i elementy listy

        Czasem trzeba coś zawrzeć w tekście. W tym celu wykorzystywane są trzy tagi: ul, ol, li. Wszystkie te znaczniki są znacznikami kontenerów, ale znacznik jest zawsze zawarty w jednym z kontenerów lub i nie ma poza nimi żadnego znaczenia. Kontenera ul używamy wtedy, gdy nie zależy nam na kolejności wymienianych elementów i nie chcemy skupiać się na kolejności ich występowania. Znacznik ol natomiast skupia uwagę na kolejności elementów, automatycznie numerując każdą linię. Spójrzmy na przykład:

        
        
        • Kok
        
        
        • Ciasto
        
        
        • Bochenek
        
        
        • Ciasto
        
        

        Na ekranie przeglądarki ten kod będzie wyglądał następująco:

        • Kok
        • Ciasto
        • Bochenek
        • Ciasto

        Jeśli po prostu zastąpimy znacznik ul znacznikiem ol, otrzymamy listę numerowaną:

        
        
        1. Kok
        
        
        2. Ciasto
        
        
        3. Bochenek
        
        
        4. Ciasto
        
        

        Teraz wygląda to tak:

        1. Kok
        2. Ciasto
        3. Bochenek
        4. Ciasto

        Nikt nie zabrania zagnieżdżania jednej listy w drugiej, tworzenia list zagnieżdżonych z podlistami:

        
        Narzędzia:
        
        • Piła
        
        
        • Wkrętaki
          
          
          
          1. Prosty
          
          
          2. Przechodzić
          
          
          
          
        
        
        • Wiertarka
        
        

        Musisz trochę poeksperymentować z tymi listami, aby przyzwyczaić się do ich używania. Istnieje inny rodzaj listy, ale jest on rzadko używany, więc nie będę teraz o tym mówić. Może w innym artykule.

        Oczywiście, jak wszystko inne, wygląd Elementy te można modyfikować nie do poznania za pomocą CSS.

        Nagłówki

        Oczywiście akapity pomagają w strukturyzowaniu dokumentów. Aby jednak podzielić duży tekst na mniejsze logiczne części, możesz nadać każdej z nich tytuł. Każda część może zawierać dalsze podczęści z własnymi nagłówkami niższego poziomu i tak dalej. Aby ustawić tytuł, użyj tagów , gdzie „x” to liczba od 1 do 6. Im wyższa liczba, tym niższy nagłówek. Oznacza to, że nagłówek najwyższego poziomu będzie nazywany h1, a nagłówek dolnego poziomu będzie nazywany h6. Domyślnie tekst w tych nagłówkach jest wyświetlany dużą czcionką i z wcięciem. Tekst ten jest wyświetlany w całej linii, czyli znaczniki hx są znacznikami blokowymi. Tag h1 ma największą czcionkę, a tag h6 ma najmniejszą czcionkę. Z reguły na stronie znajduje się jeden, maksymalnie dwa tagi h1 najwyższego poziomu. Wraz ze spadkiem poziomu wzrasta liczba tagów. Jednak rzadko zdarza się, aby webmaster był w stanie podzielić tekst tak bardzo, że potrzebuje nagłówków poziomu 5 lub 6. Nawet poziom 4 jest rzadko używany.

        Mniej słów, więcej czynów!