Jak utworzyć listę punktowaną w formacie HTML. Lista punktowana. Przydatne materiały na listach HTML

Istnieją dwa typy list w HTML: numerowane i nienumerowane. Ich tworzenie jest prawie takie samo. Nawet tagi różnią się jednym znakiem. Możesz także utworzyć, który może zawierać zarówno numerowane, jak i znaczniki.

Listy te można dowolnie przekształcać. Wszystko zależy od Twojej wyobraźni. Najpierw przyjrzymy się listom standardowym, takim samym jak w edytorze Worda, a potem je ulepszymy i zaprojektujemy nie do poznania.

Lista numerowana HTML

Zwykły numerowany można utworzyć za pomocą następujących tagów:

Pierwszy element listy

Drugi element listy

Trzecia pozycja na liście

Proste listy wyglądają tak

Zgodnie ze standardami każdy element listy musi znajdować się wewnątrz otwierającego i zamykającego znacznika li. Ale jeśli nie umieścisz znacznika zamykającego, wynik będzie dokładnie taki sam. Procesor jest dość inteligentny. Podczas konwersji listy analizuje tagi otwierające. Jeśli zobaczy nowy

, a następnie automatycznie stawia przed nim

W ten sposób można tworzyć listy w sposób pokazany poniżej.

Ale z punktu widzenia profesjonalistów jest to błędne.

Listy nienumerowane (lub wypunktowane) tworzy się w ten sam sposób, tyle że zamiast znacznika ol wpisuje się ul.

Nie ma tam cyfr ani liter – jedynie różne symbole zwane znacznikami.

Wielopoziomowa lista numerowana HTML

Wielu użytkowników jest zainteresowanych tą możliwością. Dlatego należy zauważyć, że dowolna lista numerowana HTML może być wielopoziomowa. Dodatkowe poziomy mogą być takie same lub oznaczone.

Aby utworzyć listę pokazaną w powyższym przykładzie, należy napisać co następuje.

Należy pamiętać, że w tym kodzie, w przeciwieństwie do pierwszych przykładów, dodano atrybut type. Dzięki niemu możesz określić rodzaj sortowania zarówno dla list numerowanych, jak i wypunktowanych.

W przypadku numerowanych wskazujemy alfabet lub rodzaj cyfr, a w pozostałych przypadkach rodzaj znacznika.

Jeśli użyjesz specjalnego znacznika HTML, lista numerowana może mieć dowolną postać.

Możesz określić atrybut type z dowolną wartością z tabeli. Lub w klasie stylu css określ typ stylu listy z żądanym typem sortowania.

Tłumaczenie wartości jest dość proste. Wystarczy podstawowa znajomość języka angielskiego. Ale nawet jeśli nie możesz przetłumaczyć słów „okrąg”, „kwadrat” itp., Możesz wizualnie zrozumieć, jaki będzie wynik, określając te wartości w atrybucie typu.

W przypadku list numerowanych użyj następujących opcji:

1 - cyfry arabskie;
A - wielkie litery;
a - małe litery łacińskie;
I - wielkie cyfry rzymskie;
i - małe cyfry rzymskie.

Wartość domyślna to zawsze lista z To znaczy, jeśli nic nie określisz, będzie to samo co type="1".

Ponadto listy numerowane mogą zaczynać się od dowolnej pozycji. Domyślnie wynik zaczyna się od 1. Ale jeśli chcesz, możesz zacząć przynajmniej od stu. Aby to zrobić, musisz podać atrybut start o dowolnej wartości.

Ponadto możesz wyciągnąć wnioski w odwrotnej kolejności. Aby to zrobić, musisz napisać odwrotnie.

Projektowanie list

Listę numerowaną w formacie HTML można zaprojektować tak pięknie, że możesz nie od razu zdać sobie sprawę, że jest to zwykła lista, a nie obraz wykonany w Photoshopie.

Oto przykłady pięknych list.

Jak widać na przykładzie można zmienić wygląd numeracji oraz samych elementów.

Możesz utworzyć taką zwykłą listę.

W stylach CSS musisz określić projekt tagów ol. Należy pamiętać, że w tym przypadku ustawienia zostaną zastosowane do wszystkich list w witrynie, w których używany jest ten plik stylu.

Rozważmy najpierw opcję z okrągłym projektem listy. Wróć do kodu listy. Wskazana jest tam zaokrąglona lista klas. To klasa, przy której trzeba majstrować, żeby stworzyć takie piękno. Możesz nazwać klasę jak chcesz.

Przyjrzyjmy się teraz kwadratowemu projektowi.

Style są dość podobne. Różnica polega na tym, że w pierwszym przypadku element jest zaokrąglany przy użyciu możliwości CSS.

Profesjonalny projektant układu musi przewidzieć i zrozumieć, że nie wszyscy użytkownicy korzystają z nowoczesnych komputerów. Nie każdy ma zainstalowany system Windows 7, 8, 10. Istnieje odsetek użytkowników, którzy nadal korzystają z systemu Windows XP i korzystają ze starszych wersji przeglądarki Internet Explorer.

Z reguły prawie wszystkie nowoczesne ulepszenia elementów konstrukcyjnych nie są przez nie obsługiwane. Użytkownikowi będzie się wydawać, że przy projektowaniu witryny w ogóle nie wykonano żadnej pracy. Że wszystko się oddaliło. Elementy zderzają się ze sobą. Aby tego uniknąć, należy rozważyć wszystkie opcje.

Niektórzy webmasterzy przymykają na nie oko, gdyż ich udział we współczesnym rynku staje się coraz mniejszy. Ale dla profesjonalisty każdy odwiedzający jest ważny, zwłaszcza jeśli jest to witryna komercyjna.

Stwórz coś odpowiedniego dla każdego lub uwzględnij wszystkie odmiany przeglądarek.

Listy numerowane to zbiór elementów wraz z ich numerami seryjnymi. Rodzaj i rodzaj numeracji zależny jest od parametrów elementu

Cyfry arabskie (1, 2, 3, ...);
Cyfry arabskie z zerem wiodącym dla liczb mniejszych niż dziesięć (01, 02, 03, ..., 10);
wielkie litery łacińskie (A, B, C, ...);
małe litery łacińskie (a, b, c, ...);
wielkie cyfry rzymskie (I, II, III, ...);
małe cyfry rzymskie (i, ii, iii, ...);
Numeracja ormiańska;
Numeracja gruzińska.

Z praktycznego punktu widzenia zasady wyświetlania pozycji na liście punktowanej można zastosować analogicznie jak na liście numerowanej. Biorąc jednak pod uwagę, że mamy do czynienia z wyliczeniem, istnieją pewne cechy, które zostaną omówione dalej.

Numeracja list

Dopuszcza się rozpoczęcie listy od dowolnego numeru; W tym celu wykorzystywany jest atrybut start elementu

. Wartością jest dowolna dodatnia liczba całkowita. Nie ma znaczenia, jaki typ numeracji jest ustawiony, nawet jeśli jako listy używane są litery łacińskie. Jeśli jednocześnie do listy zostaną zastosowane zarówno atrybuty start, jak i value, to ten ostatni ma pierwszeństwo i numeracja będzie wyświetlana od liczby określonej przez value , jak pokazano w przykładzie 1.

Przykład 1: Zmiana numeracji list

Listy

Powinieneś dobrze dbać o swoje miejsce pracy.
Dostosuj oświetlenie w pomieszczeniu tak, aby źródło światła znajdowało się z boku lub za operatorem.
Aby uniknąć powikłań zdrowotnych, zaleca się wybrać krzesło z miękkim siedziskiem.

Pierwszy element listy w tym przykładzie będzie zaczynał się od cyfry rzymskiej IV, ponieważ podany jest atrybut start="4", następnie pojawia się liczba V, a ostatni element wypada niewłaściwie i ma przypisaną liczbę X (rysunek 1).

Ryż. 1. Cyfry rzymskie na liście

Pisanie liczb

Domyślnie lista numerowana ma określony wygląd: najpierw jest liczba, potem kropka, a następnie wyświetlany jest tekst oddzielony spacją. Ta forma pisania jest wizualna i wygodna, ale niektórzy programiści wolą zobaczyć inny sposób projektowania numeracji list. Mianowicie, aby zamiast kropki znajdował się nawias zamykający, jak pokazano na ryc. 2 lub coś podobnego.

Ryż. 2. Widok listy numerowanej z nawiasem

Style umożliwiają zmianę typu numeracji list za pomocą właściwości treści i licznika przyrostów. Najpierw należy ustawić selektor ol na counter-reset : item , jest to konieczne, aby numeracja na każdej nowej liście zaczynała się od nowa. W przeciwnym razie numeracja będzie kontynuowana i zamiast 1,2,3 zobaczysz 5,6,7. Wartość pozycji jest unikalnym identyfikatorem licznika, wybieramy ją sami. Następnie musisz ukryć oryginalne znaczniki za pomocą listy właściwości stylu typu listy-stylu z wartością none.

Właściwość content zazwyczaj działa w połączeniu z pseudoelementami ::after i ::before. Zatem konstrukcja li::before mówi, że przed każdym elementem listy należy dodać jakąś treść (przykład 2).

Przykład 2. Tworzenie własnej numeracji

Li::before (treść: licznik(element) ") "; /* Dodaj nawias do liczb */ licznik-inkrementacja: pozycja; /* Ustaw nazwę licznika */ )

Właściwość content z wartością counter(item) wyświetla liczbę; Dodając nawias, jak pokazano w tym przykładzie, otrzymujemy wymagany typ numeracji. Aby zwiększyć numer listy o jeden, konieczna jest kontrprzyrost. Należy pamiętać, że w całym tekście używany jest ten sam identyfikator o nazwie item . Ostateczny kod pokazano w przykładzie 3.

Przykład 3: Zmiana widoku listy

Listy

Pierwszy
Drugi
Trzeci
Czwarty

Stosując powyższą metodę można utworzyć dowolną listę numerowaną, np. umieścić liczbę w nawiasie kwadratowym, w tym przypadku w stylach zmieni się tylko jedna linia.

Treść: "[" licznik(element) "] ";

Lista z rosyjskimi literami

Istnieje lista numerowana z literami łacińskimi, ale nie ma na niej liter rosyjskich. Można je dodać sztucznie, stosując powyższą technikę. Ponieważ numeracja odbywa się poprzez style, sama lista pozostaje oryginalna, dodawana jest do niej tylko wybrana klasa, nazwijmy ją cyrylicą (przykład 4).

Przykład 4: Kod do utworzenia listy

Jeden
Dwa
Trzy

Dodawanie liter odbywa się za pomocą pseudoelementu ::before i właściwości content. Ponieważ każda linia musi mieć własną literę, użyjemy pseudoklasy :nth-child(1) , z numerem litery wpisanym w nawiasach. Pierwsza litera to oczywiście A, druga to B, trzecia to C itd. Cały zestaw jest dodawany do selektora li w następujący sposób (przykład 5).

Przykład 5: Użycie pseudoklasy:n-te-dziecko

Cyrylica li:nth-child(1)::before (treść: "a)"; ) .cyrilic li:nth-child(2)::before ( treść: "b)"; ) .cyrilic li:nth-child(3)::before ( treść: "at)"; )

W tym przykładzie po każdej literze następuje nawias, wszystkie litery są małe. Można zdefiniować własny rodzaj numeracji list, np. może ona zawierać duże litery z kropką, z jednym lub dwoma nawiasami lub same litery. W przeciwieństwie do standardowej numeracji, tutaj możemy robić, co chcemy. Lista dziesięciu liter powinna wystarczyć niemal w każdej sytuacji, jeśli jednak nagle okaże się to niewystarczające, nic nie stoi na przeszkodzie, aby rozszerzyć naszą listę o choćby wszystkie litery alfabetu rosyjskiego.

Na koniec dostosowujemy wyrównanie i położenie liter, opcjonalnie określamy rozmiar czcionki, kolor i inne parametry (przykład 6).

Przykład 6. Lista z rosyjskimi literami

Lista

Barszcz
Kotlety szczupakowe
Kulebyaka
Grzyby w śmietanie
Naleśniki Z Kawiorem
Kwas

Wynik tego przykładu pokazano na ryc. 3.

W języku znaczników HTML istnieją 3 typy list – uporządkowane (numerowane), nieuporządkowane (nienumerowane) i listy definicyjne.

Do zbudowania takiej listy potrzebne są 2 rodzaje elementów: „ul” (skrót od listy nieuporządkowanej, czyli listy nieuporządkowanej) i „li” (element listy). Wszystko, co jest napisane wewnątrz „li”, jest zaznaczone markerem.

Wyglądem takiej listy można sterować określając typy znaczników.

Rodzaje znaczników

W obu elementach listy znajduje się specjalny atrybut typu. To jest Twój typ znacznika. Istnieją tylko 3 typy: okrąg, dysk i kwadrat:

W zależności od tego, gdzie określisz typ znacznika, możesz go zmienić dla całej listy lub konkretnego elementu.

Uporządkowana lista

Do zbudowania listy potrzebne są także 2 elementy: „ol” i „li” (element listy). Znaczniki zastępuje się liczbami z kropką. Przykład prostej listy:

pierwszy element
drugi element
ostatni element

Możesz kontrolować wygląd uporządkowanej listy, określając różne typy numeracji.

Rodzaje numeracji

Istnieje specjalny atrybut typu, który jest umieszczany w elemencie „ol” lub „li”. To jest typ Twojej listy. W sumie jest 5 typów:

W zależności od tego, gdzie określisz rodzaj numeracji, możesz go zmienić dla całej listy lub dla konkretnego elementu.

Lista definicji

Dla haseł słownikowych opracowano listę definicji.

Istnieje ogólny kontener „dl”. Wewnątrz znajdują się „dt” (termin definicji) i „dd” (opis definicji). Najprostszy przykład:

Dział marketingu: Dział ten zajmuje się promocją towarów i usług
Dział finansowy: Dział ten zajmuje się wszelkimi transakcjami finansowymi

Wszystkie elementy wszystkich list są elementami blokowymi. Jednak wewnątrz elementu „dt” można umieszczać tylko elementy wbudowane. Możesz umieścić, co chcesz, w elementach „dd” i „li”. Stąd pochodzą listy zagnieżdżone.

Zagnieżdżone (listy mieszane)

Są to listy wielopoziomowe, w ramach których istnieje hierarchia. Często takie listy są używane podczas tworzenia mapy witryny. Przykład:

WIADOMOŚCI DNIA: Dziś deszcz
Będzie padać przez cały dzień
WIADOMOŚCI NOCY

W nocy będzie padać
Jutro zacznie się nowy dzień
WIADOMOŚCI NOCY: W nocy będzie padać
Jutro zacznie się nowy dzień

Listy HTML służy do grupowania powiązanych ze sobą informacji. Istnieją trzy typy list:

lista punktowana —
- każdy element listy
zaznaczone markerem,
lista numerowana —
- każdy element listy
oznaczone numerem
lista definicji- - składa się z par terminów
—
definicja.
Każda lista jest kontenerem, w którym znajdują się elementy listy lub pary termin-definicja. Elementy listy zachowują się jak elementy blokowe, ułożone jeden na drugim i zajmujące całą szerokość bloku kontenera. Każdy element listy posiada z boku dodatkowy blok, który nie uczestniczy w układzie.

Tworzenie list HTML

1. Lista punktowana

Lista punktowana jest listą nieuporządkowaną (z angielskiej listy nieuporządkowanej). Utworzono przy użyciu sparowanego tagu
. Znacznik elementu listy to etykieta, na przykład wypełnione kółko.
Przeglądarki domyślnie dodają do bloku listy następujące formatowanie:
Każdy element listy jest tworzony przy użyciu sparowanego tagu
(z pozycji z listy angielskiej).

dostępny .

Microsoftu

Google

Jabłko

Ryż. 1. Lista punktowana
2. Lista numerowana

Lista numerowana jest tworzony przy użyciu sparowanego tagu. Każdy element listy jest również tworzony przy użyciu elementu
. Przeglądarka automatycznie numeruje elementy w kolejności, a jeśli usuniesz jeden lub więcej elementów takiej listy, pozostałe numery zostaną automatycznie przeliczone.
Blok listy ma również domyślne style przeglądarki:
Dostępny jest atrybut value, który umożliwia zmianę domyślnej liczby dla wybranej pozycji listy. Na przykład, jeśli ustawisz pierwszą pozycję na liście
, wówczas pozostała numeracja zostanie przeliczona względem nowej wartości.
Dla tagu
Dostępne są następujące atrybuty:
Tabela 1. Atrybuty tagu

Atrybut Opis, akceptowana wartość
wywrócony Odwrócony atrybut powoduje wyświetlenie listy w odwrotnej kolejności (na przykład 9, 8, 7...).
początek Atrybut start określa wartość początkową, od której rozpocznie się numeracja, np. konstrukcja
pierwszy artykuł otrzyma numer seryjny „10”. Można jednocześnie określić typ numeracji, np.
.

typ Atrybut type określa typ znacznika, który ma zostać użyty na liście (litery lub cyfry). Akceptowane wartości:
1 — wartość domyślna, numeracja dziesiętna.
A — numeracja list w kolejności alfabetycznej, wielkimi literami (A, B, C, D).
a — numeracja list w kolejności alfabetycznej, małe litery (a, b, c, d).
I - numeracja wielkimi cyframi rzymskimi (I, II, III, IV).
i — numeracja małymi literami rzymskimi (i, ii, iii, iv).

Microsoftu

Google

Jabłko

Ryż. 2. Lista numerowana
3. Lista definicji

Listy definicji są tworzone za pomocą tagu
. Aby dodać termin, użyj tagu
, a żeby wstawić definicję - tag
.

Blok listy definicji ma następujące domyślne style przeglądarki:
Dla tagów
,
I
dostępny .

Dyrektor:

Piotr Tochilin

Rzucać:

Andriej Gaidulyan

Aleksiej Gawriłow

Witalij Goguński

Maria Kożewnikowa

Ryż. 3. Lista definicji
4. Lista zagnieżdżona

Często możliwości prostych list nie są wystarczające; na przykład podczas tworzenia spisu treści nie da się obejść bez zagnieżdżone elementy. Znaczniki zagnieżdżonej listy będą wyglądać następująco:

Ustęp 1.

Punkt 2.

Podpunkt 2.1.

Podpunkt 2.2.

Podpunkt 2.2.1.

Podpunkt 2.2.2.

Podpunkt 2.3.

Punkt 3.

Ryż. 4. Lista zagnieżdżona
5. Wielopoziomowa lista numerowana

Lista wielopoziomowa służy do wyświetlania elementów listy na różnych poziomach z różnymi wcięciami. Znaczniki wielopoziomowej listy numerowanej będą wyglądać następująco:

ustęp

ustęp

ustęp

ustęp

ustęp

ustęp

ustęp

ustęp

ustęp

ustęp

ustęp

Ten domyślny znacznik utworzy nową numerację dla każdej zagnieżdżonej listy, zaczynając od jednego. Aby utworzyć numerację zagnieżdżoną, należy skorzystać z następujących właściwości:
reset licznika resetuje jeden lub więcej liczników, określając wartość do zresetowania;
licznik-inkrement określa wartość przyrostu licznika, tj. w jakiej kolejności będzie numerowana każda kolejna pozycja;
content - treść wygenerowana, w tym przypadku odpowiada za wyświetlenie numeru przed każdą pozycją listy.
Ol ( /* usuń standardową numerację */ list-style: none; /* Zidentyfikuj licznik i nadaj mu nazwę li. Wartość licznika nie jest określona - domyślnie jest to 0 */ counter-reset: li; ) li :before ( /* Definiujemy element, który będzie numerowany - li. Pseudoelement before wskazuje, że treść wstawiona za pomocą właściwości content zostanie umieszczona przed elementami listy. Tutaj również ustawiamy wartość przyrostu licznika (domyślnie wynosi 1). */ licznik-przyrost: li; / * Właściwość content wyświetla numer pozycji na liście. counters() oznacza, że wygenerowany tekst reprezentuje wartości wszystkich liczników o tej nazwie. Kropka w cudzysłowie dodaje kropkę oddzielającą liczby, a przed zawartością każdego elementu listy dodaje się kropkę ze spacją */ content: counters(li,."") "."; )
Ryż. 5. Wielopoziomowa lista numerowana

Ostatnia aktualizacja: 08.04.2016

Lista definicji to lista zawierająca termin i definicję tego terminu. Na liście może znajdować się wiele takich par termin-definicja. Tagi służą do tworzenia listy definicji
I
. Elementy listy są umieszczane wewnątrz tych znaczników.

Każdy element listy składa się z terminu i definicji. Termin umieszczany jest w tagach
I
(dt jest skrótem od „terminu definicji”), a definicja znajduje się w tagach
I
(dd jest skrótem od „opisu definicji”)

Rozważmy najprostszą listę definicji:
Listy w HTML5

Ontologia

Gałąź filozofii badająca podstawowe zasady istnienia

Epistemologia

Dyscyplina filozoficzna zajmująca się badaniami, krytyką i teoriami wiedzy

Stosunki produkcji

Zespół relacji między ludźmi rozwijający się w procesie społecznej produkcji, wymiany i dystrybucji dóbr i usług materialnych.

Atrybut	Opis, akceptowana wartość
wywrócony	Odwrócony atrybut powoduje wyświetlenie listy w odwrotnej kolejności (na przykład 9, 8, 7...).
początek	Atrybut start określa wartość początkową, od której rozpocznie się numeracja, np. konstrukcja pierwszy artykuł otrzyma numer seryjny „10”. Można jednocześnie określić typ numeracji, np. .
typ	Atrybut type określa typ znacznika, który ma zostać użyty na liście (litery lub cyfry). Akceptowane wartości: 1 — wartość domyślna, numeracja dziesiętna. A — numeracja list w kolejności alfabetycznej, wielkimi literami (A, B, C, D). a — numeracja list w kolejności alfabetycznej, małe litery (a, b, c, d). I - numeracja wielkimi cyframi rzymskimi (I, II, III, IV). i — numeracja małymi literami rzymskimi (i, ii, iii, iv).