Lista html numerotata cu sub-articole. HTML: Lista numerotată și cu marcatori

În HTML, un întreg set de etichete este responsabil pentru organizarea listelor, a căror organizare trebuie să respecte anumite reguli de structurare a datelor.

A cincea versiune a standardului HTML acceptă 3 tipuri de liste: liste numerotate, liste cu marcatori și liste de definiții. De asemenea, oferă posibilitatea de a imbrica liste una în cealaltă, creând liste imbricate pe mai multe niveluri.

Lista numerotata

Lista numerotata- acesta este un set de elemente (articole de listă) având o anumită secvență. Fiecare articol dintr-o listă numerotată are un marcator unic care indică ordinea în care apare elementul în raport cu celelalte elemente din listă. În mod implicit, marcatorii pentru elementele listei numerotate sunt numere. Primul articol este numerotat cu 1, al doilea este numerotat cu 2 și așa mai departe.

Cele mai comune exemple de liste numerotate sunt rețetele pentru prepararea diverselor feluri de mâncare. Deoarece orice rețetă este o listă numerotată, cu o secvență clară de acțiuni.

Pentru a crea liste numerotate în HTML, utilizați eticheta

Lista numerotata:

Cafea
Ceai
Lapte

Încerca "

Notă: etichetă

, adică tot conținutul listei numerotate trebuie plasat în interiorul elementelor
. Etichetă

, la rândul său, nu are restricții de conținut, așa că puteți plasa în el paragrafe, imagini, linkuri, tabele, alte liste etc.

Listă cu puncte

Listă cu puncte- acestea sunt nenumerotate, adică liste neordonate de elemente, a căror succesiune nu contează. Toate elementele din listă cu marcatori au aceleași marcatori și, implicit, apar ca mici cercuri negre.

Pentru a crea liste cu marcatori în HTML, utilizați eticheta

, care conține tot conținutul afișat al listei):

Listă cu puncte:

Cafea
Ceai
Lapte

Încerca "

Tipuri de markere

Tipurile de marcatori de listă numerotate pot fi modificate utilizând atributul type. Acest atribut acceptă cinci tipuri de markeri:

Listele cu marcatori nu au un atribut tip, așa că nu veți putea schimba tipul de marcatori pentru o listă cu marcatori folosind HTML. Pentru a schimba tipul de marker, în acest caz, puteți folosi proprietatea CSS list-style-type , cu care, pe lângă valoarea implicită, puteți selecta încă două tipuri de marker: cerc sau pătrat .

Schimbarea marcatorilor listei:

Titlul paginii

Lista numerotata cu atributul type="a":

Merele
Banane
Lămâi

Lista numerotata cu atributul type="I":

Merele
Banane
Lămâi

Tipuri de marcatori de listă cu marcatori:

Merele
Banane
Lămâi

Merele
Banane
Lămâi

Încerca "

Proprietatea CSS list-style-type , pe lângă tipurile de marcatori pentru listele cu marcatori, are multe tipuri diferite de marcatori pentru listele numerotate. Dar schimbarea unui tip standard de marker cu altul nu este întotdeauna suficientă pentru a crea o listă frumoasă. Pentru a proiecta liste, este mai bine să utilizați CSS, care vă permite nu numai să schimbați aspectul markerului, ci și să înlocuiți marcatorii cu imagini, să controlați locația acestora și să controlați indentarea. Puteți vedea cum să faceți toate acestea.

Lista orizontală

Dacă utilizați o listă HTML pentru a crea un meniu orizontal, atunci va trebui să aranjați elementele listei unul după altul pe aceeași linie. Acest lucru nu se poate face folosind HTML, așa că va trebui să utilizați CSS.

Pentru a crea o listă orizontală, trebuie să setați o proprietate de afișare CSS pentru elementele din listă cu valoarea inline sau inline-block , în funcție de ce alte proprietăți veți utiliza.

Titlul paginii

Lista numerotata

Merele
Banane
Lămâi

Listă cu puncte:

Merele
Banane
Lămâi

Încerca "

După aceasta, toate elementele din listă se vor alinia pe o singură linie. Vă rugăm să rețineți că marcatoarele vor dispărea din articolele din listă și nici măcar nu va exista un spațiu între ele, dar indentarea din stânga a listei va rămâne.

Puteți vedea cum să transformați o listă orizontală într-un meniu orizontal.

Listele numerotate sunt o colecție de elemente cu numerele lor de serie. Tipul și tipul numerotării depind de parametrii elementului

Cifre arabe (1, 2, 3, ...);
Cifre arabe cu zero înainte pentru numerele mai mici de zece (01, 02, 03, ..., 10);
litere mari latine (A, B, C, ...);
litere latine mici (a, b, c, ...);
cifre romane majuscule (I, II, III, ...);
cifre romane mici (i, ii, iii, ...);
numerotarea armeană;
numerotarea georgiană.

Din punct de vedere practic, principiile afișării articolelor într-o listă cu marcatori pot fi aplicate într-un mod similar unei liste numerotate. Dar având în vedere că avem de-a face cu o enumerare, există câteva caracteristici care vor fi discutate în continuare.

Numerotarea listei

Este permisă începerea listei de la orice număr; atributul de start al elementului este utilizat în acest scop

. Valoarea este orice număr întreg pozitiv. Nu contează ce tip de numerotare este setat, chiar dacă literele latine sunt folosite ca listă. Dacă atât atributele de început, cât și de valoare sunt aplicate unei liste în același timp, atunci aceasta din urmă are prioritate și numerotarea este afișată din numărul specificat de valoare , așa cum se arată în Exemplul 1.
Exemplul 1: Modificarea numerotării listei
Liste
1. Ar trebui să ai grijă de locul tău de muncă.
2. Reglați iluminarea în cameră astfel încât sursa de lumină să fie situată în lateral sau în spatele operatorului.
3. Pentru a evita complicațiile medicale, se recomandă alegerea unui scaun cu un scaun moale.
Primul element al listei din acest exemplu va începe cu cifra romană IV, deoarece este specificat atributul start="4", apoi vine numărul V, iar ultimul element iese din ordine și i se atribuie numărul X (Figura 1).
Orez. 1. Cifrele romane din listă
Scrierea numerelor
În mod implicit, o listă numerotată are un anumit aspect: mai întâi există un număr, apoi un punct, iar după aceea textul este afișat separat de un spațiu. Această formă de scriere este vizuală și convenabilă, dar unii dezvoltatori preferă să vadă un mod diferit de a proiecta numerotarea listelor. Și anume, astfel încât în loc de punct să existe un parantez de închidere, așa cum se arată în Fig. 2 sau ceva asemanator.
Orez. 2. Vedere listă numerotată cu paranteză
Stilurile vă permit să schimbați tipul de numerotare a listei folosind proprietățile de conținut și de contra-increment. În primul rând, selectorul ol trebuie setat la contraresetare : item , acest lucru este necesar pentru ca numerotarea în fiecare listă nouă să înceapă din nou. În caz contrar, numerotarea va continua și în loc de 1,2,3 veți vedea 5,6,7. Valoarea articolului este un identificator unic pentru contor; o alegem noi înșine. Apoi, trebuie să ascundeți marcatorii originali prin proprietatea de stil list-style-type cu valoarea none .
Proprietatea de conținut funcționează de obicei împreună cu pseudo-elementele ::after și ::before. Astfel, construcția li::before spune că un anumit conținut trebuie adăugat înaintea fiecărui element al listei (exemplul 2).
Exemplul 2. Crearea propriei numerotari
Li::before ( continut: counter(element) ") "; /* Adăugați o paranteză la numere */ counter-increment: item; /* Setează numele contorului */ )
Proprietatea de conținut cu contorul de valoare (articolul) afișează un număr; Adăugând o paranteză, așa cum se arată în acest exemplu, obținem tipul necesar de numerotare. contra-increment este necesar pentru a mări numărul listei cu unul. Rețineți că același identificator, numit item , este folosit pe tot parcursul. Codul final este prezentat în Exemplul 3.
Exemplul 3: Modificarea vizualizării listei
Liste
1. Primul
2. Al doilea
3. Al treilea
4. Al patrulea
Folosind metoda de mai sus, puteți face orice tip de listă numerotată, de exemplu, puneți un număr între paranteze drepte, în acest caz, doar o singură linie se va schimba în stiluri.
Continut: "[" counter(element) "] ";
Lista cu litere rusești
Există o listă numerotată cu litere latine, dar nu există litere rusești pentru listă. Ele pot fi adăugate artificial folosind tehnica de mai sus. Deoarece numerotarea se face prin stiluri, lista în sine rămâne originală, clasa selectată este doar adăugată la ea, să o numim chirilic (exemplul 4).
Exemplul 4: Cod pentru a crea o listă
1. unu
2. Două
3. Trei
Adăugarea de litere se face folosind pseudo-elementul ::before și proprietatea conținut. Deoarece fiecare linie trebuie să aibă propria sa literă, vom folosi pseudoclasa :nth-child(1) , cu numărul literei scris între paranteze. Prima literă, desigur, este A, a doua este B, a treia este C etc. Acest întreg set este adăugat la selectorul li după cum urmează (exemplul 5).
Exemplul 5: Utilizarea pseudo-class:nth-child
Chirilic li:nth-child(1)::before ( conținut: „a)”; ) .chirilic li:nth-child(2)::before ( continut: „b)”; ) .cyrilic li:nth-child(3)::before ( continut: "la)"; )
În acest exemplu, fiecare literă este urmată de o paranteză, toate literele sunt litere mici. Puteți defini propriul tip de numerotare a listei, de exemplu poate conține majuscule cu punct, cu una sau două paranteze sau numai litere. Spre deosebire de numerotarea standard, suntem liberi să facem tot ce vrem aici. O listă de zece litere ar trebui să fie suficientă pentru aproape toate situațiile, dar dacă acest lucru se dovedește brusc a nu fi suficient, nimic nu ne împiedică să ne extindem lista pentru a include cel puțin toate literele alfabetului rus.
În cele din urmă ajustăm alinierea și poziția literelor, specificăm opțional dimensiunea fontului, culoarea și alți parametri (exemplul 6).
Exemplul 6. Lista cu litere rusești
Listă
1. Ciorbă
2. cotlet de stiuca
3. Kulebyaka
4. Ciuperci în smântână
5. Clatite cu caviar
6. Cvas
Rezultatul acestui exemplu este prezentat în Fig. 3.

O listă cu marcatori este definită prin adăugarea unui marcator mic, de obicei sub forma unui cerc umplut, înaintea fiecărui element din listă. Lista în sine este formată folosind un container
- așa cum se arată mai jos.
  - Primul punct
  - Al doilea punct
  - Al treilea punct
  Lista trebuie să conțină o etichetă de închidere
, altfel va apărea o eroare. Etichetă de închidere

Exemplul 11.1 arată codul HTML pentru adăugarea unei liste cu marcatori la o pagină web.

Exemplul 11.1. Creați o listă cu marcatori

Listă cu puncte

Cheburashka
Crocodilul Gena
Shapoklyak
Sobolanul Larisa

Rezultatul acestui exemplu este prezentat în Fig. 11.1.

Orez. 11.1. Vedere listă cu marcatori

Acordați atenție căptușelii din partea de sus, de jos și din stânga listei. Astfel de liniuțe sunt adăugate automat.

Markerii pot lua una din trei forme: cerc (implicit), cerc și pătrat. Pentru a selecta un stil de marcator, utilizați atributul type al etichetei

Tip de listă	cod HTML	Exemplu
Lista cu marcatori cerc		Primul Al doilea Al treilea
Lista cu marcatori cerc		Primul Al doilea Al treilea
Lista cu gloanțe pătrate		Primul Al doilea Al treilea

Aspectul markerilor poate varia ușor în diferite browsere, precum și atunci când se schimbă fontul și dimensiunea textului.

Crearea unei liste cu marcatori pătrați este prezentată în Exemplul 11.2.

Exemplul 11.2. Tip de markere

Listă cu puncte

Schimbarea Convingerilor

schimbarea credinței religioase (opțional: budism, confucianism, hinduism). Oferta speciala - Iudaism si Islam impreuna;
o schimbare a credinței în infailibilitatea partidului favorit;
credința că extratereștrii există;
preferinta pentru un sistem politic ca fiind cel mai bun de acest gen (de a alege dintre: feudalism, socialism, comunism, capitalism).

Rezultatul acestui exemplu este prezentat în Fig. 11.2.

O astfel de listă este o listă „numerotată” într-un fel. Acestea pot fi cifre arabe, cifre romane sau litere.

Etichetele sunt folosite pentru a indica browserului că lista va fi numerotată .

Exemplu de cod pentru o listă numerotată:

liste HTML

pisici
câini
cai

Rezultat:

pisici
câini
cai

După cum puteți vedea, în mod implicit numerotarea este în cifre arabe. Acest lucru poate fi modificat folosind parametrul tip:

- tip="A"- numerotarea cu litere mari latine (A, B, C).

- tip="a"- numerotarea cu majuscule latine (a, b, c).

- tip="I"- numerotarea cu cifre romane mari (I, II, III).

- tip="i"- numerotarea cu cifre romane mici (i, ii, iii).

Exemplu de cod cu cifre romane:

liste HTML

pisici
câini
cai

Rezultat:

pisici
câini
cai

Dacă trebuie să începem numerotarea nu de la unul, atunci ar trebui să folosim parametrul start, a cărui valoare este numărul de la care va începe lista (dacă numerotarea este specificată cu litere, atunci acest număr va indica poziția în alfabet).

Exemplu de cod:

liste HTML

pisici
câini
cai

Rezultat:

pisici
câini
cai

La etichetă poti seta parametrul valoare, care vă permite să modificați numărul unui anumit element de listă. Aceasta modifică numerotarea tuturor elementelor ulterioare.

Exemplu de cod:

liste HTML

roșu

portocale

galben

...............
violet

Rezultat:

roșu

portocale

galben

...............
violet

Liste cu marcatori

O listă cu marcatori folosește marcatori în loc de litere și cifre. Etichetele sunt folosite pentru a indica browserului că lista va fi marcată. . Întreaga listă se află între aceste etichete și fiecare articol este specificat de etichete .

Exemplu de cod pentru o listă cu marcatori:

Liste cu marcatori HTML

pisici

câini

cai

Rezultat:

pisici

câini

cai

În mod implicit, marcatorul apare ca un cerc negru. Acest lucru poate fi modificat folosind parametrul tip:

- tip="disc"- cerc umplut.

- tip="cerc"- cerc gol.

- tip="pătrat"- pătrat umbrit.

Exemplu de cod pentru liste cu marcatori:

Liste cu marcatori HTML

pisici

câini

cai

pisici

câini

cai

pisici

câini

cai

Rezultat:

pisici

câini

cai

pisici

câini

cai

pisici

câini

cai

Liste de definiții

Aceste liste sunt folosite în dicționare. Fiecare paragraf este format din două părți: un termen și definiția acestuia. Etichetele sunt folosite pentru a indica browserului că va exista o listă de definiții

. Fiecare termen este inclus în etichete
, și definițiile lor - în etichete
.
Exemplu de cod de listă de definiții:
Liste de definiții Termenul 1 Definiția termenului 1 Termenul 2 Definiția termenului 2
Rezultat:
Liste imbricate
Există situații în care trebuie să includeți propria dvs. listă într-un element de listă. Astfel de liste sunt numite multi-nivel sau imbricate. Pentru a face acest lucru, se folosește o combinație de etichete de listă deja cunoscute de noi.
Exemplu de cod pentru o listă cu mai multe niveluri:
Liste imbricate
Animale
pisici

câini

Plante
copaci

flori

Unul dintre tipurile de liste implementate în HTML este lista cu marcatori. În caz contrar, listele de acest tip se numesc nenumerotate sau neordonate. Numele de familie este adesea folosit ca traducere formală a numelui etichetei corespunzătoare
, cu ajutorul cărora liste de acest tip sunt organizate în documente HTML (UL - Unordered List, neorded list).

Într-o listă cu marcatori, caractere speciale numite marcatori de listă sunt folosite pentru a evidenția elementele acesteia (acestea sunt adesea numite marcatori, care este pronunția formală a termenului englezesc bullet). Aspectul marcatorilor de listă este determinat de browser, iar atunci când se creează liste imbricate, browserele diversifică automat aspectul marcatorilor la diferite niveluri de imbricare.
Etichete
Și

Pentru a crea o listă cu marcatori, trebuie să utilizați o etichetă de container, în interiorul căreia se află toate elementele listei. Etichetele listei de deschidere și de închidere oferă o întrerupere de linie înainte și după listă, separând astfel lista de conținutul principal al documentului, astfel încât nu este nevoie să folosiți etichete de paragraf aici

.
Fiecare element de listă trebuie să înceapă cu o etichetă
(LI - List Item, list element). Etichetă
nu necesită o etichetă de închidere corespunzătoare, deși prezența acesteia nu este interzisă în principiu. Browserele încep de obicei fiecare nou articol de listă pe o linie nouă atunci când afișează un document.
Informațiile furnizate sunt suficiente pentru a construi o listă de bază cu marcatori. Să dăm un exemplu de document HTML folosind o listă cu marcatori, a cărei afișare de către browser este prezentată în Fig. 2.1.
Exemplu de listă cu marcatori
Semne zodiacale:
Berbec
Taurul
Gemenii
Fecioara
Cântare
Scorpion
Săgetător
Capricornul
Vărsător
Peşte

Orez. 2.1. Afișarea în browser a listei cu marcatori
Rețineți că, pe lângă elementele listei marcate cu eticheta
, alte elemente HTML pot fi prezente. În exemplul de mai sus, unul dintre aceste elemente este textul simplu, care nu este un element de listă, ci acționează ca titlu.
Notă
Unele manuale în limbajul HTML indică faptul că trebuie utilizată o etichetă de container pentru a seta titlul listei (LH - List Header, list header). În prezent, această etichetă nu este recunoscută de niciun browser comun și nu face parte din specificația HTML. Astfel, utilizarea sa devine inutilă, deși nu va duce la erori.
În etichetă
pot fi specificați doi parametri: COMPACT și TYPE.
Parametrul COMPACT este scris fără valoare și este folosit pentru a indica browserului că lista dată ar trebui să fie afișată într-o formă compactă. De exemplu, fontul sau distanța dintre liniile de listă etc. pot fi reduse.
Notă
În prezent, prezența parametrului COMPACT în etichetă
nu afectează în niciun fel afișarea listelor în browserele principale. Prin urmare, utilizarea acestui parametru este inutilă, mai ales că utilizarea lui nu este recomandată de specificația HTML 4.0.
Parametrul TYPE poate lua următoarele valori: disc, cerc și pătrat. Acest parametru este folosit pentru a forța apariția marcatorilor de listă. Tipul exact de marcator va depinde de browserul pe care îl utilizați. Opțiunile tipice de afișare sunt următoarele:
TIP = disc - marcatorii sunt afișați ca cercuri umplute; TIP = cerc - marcatorii sunt afișați ca cercuri deschise; TIP = pătrat - marcatorii sunt afișați ca pătrate umplute. Exemplu de intrare:
.
Valoarea implicită este TYPE = disc. Pentru listele cu marcatori imbricate, valoarea implicită este disc la primul nivel, cerc la al doilea nivel, pătrat la al treilea nivel și mai departe. Este exact ceea ce se face în cele mai recente versiuni ale browserelor Netscape și Internet Explorer. Vă rugăm să rețineți că alte browsere pot afișa markeri diferit. De exemplu, în specificația HTML 4.0, tipul de marcator afișat când TYPE = pătrat este specificat ca un contur pătrat.
Parametrul TYPE cu aceleași valori poate fi utilizat pentru a specifica tipul de marcatori pentru elementele individuale ale listei. Pentru a face acest lucru, parametrul TYPE cu valoarea corespunzătoare este permis să fie specificat în eticheta elementului listă
.
Exemplu de intrare:
.
Notă
Browserele interpretează în mod diferit specificația tipului de marcatori pentru un articol individual din listă. Browserul Netscape modifică aspectul markerului pentru acesta și pentru toate cele ulterioare până când este întâlnită următoarea redefinire a aspectului markerului. Internet Explorer modifică aspectul markerului numai pentru acest element.
Marcatori de listă grafice

Puteți utiliza imagini grafice ca marcatori de listă, care este utilizat pe scară largă pentru a crea documente HTML atractive, bine concepute. De fapt, această posibilitate nu este oferită direct de limbajul HTML, ci este implementată oarecum artificial. Acest lucru nu înseamnă că acest lucru nu este recomandat sau condamnabil, ci doar că nu vor fi folosite constructe speciale de limbaj HTML aici.
Pentru a înțelege ideea, trebuie să înțelegeți mecanismul de implementare a listelor pe paginile HTML. Se pare că eticheta listă
(ca, într-adevăr, lista de etichete de alte tipuri, discutate mai jos) îndeplinește o singură sarcină - îi spune browserului că toate informațiile aflate după această etichetă ar trebui să fie afișate deplasate la dreapta (indentat) cu o anumită cantitate. Etichete
, care indică elementele individuale ale listei, furnizează marcatori standard pentru elementele listei.
Dacă trebuie să construim o listă cu marcatori grafici, atunci ne putem descurca complet fără etichete
. Va fi suficient să inserați imaginea grafică dorită înaintea fiecărui element al listei. Singura problemă care trebuie rezolvată este separarea elementelor listei unele de altele. Puteți utiliza etichete de paragraf pentru aceasta
Sau forțați un avans de linie
. Un exemplu de implementare a unei liste cu marcatori grafici, a cărei afișare este prezentată în Fig. 2.2 este prezentat mai jos:
care va fi transmisă o singură dată. Dimensiunile fișierelor unei imagini mici sunt, de asemenea, extrem de mici.
Notă
Metodele de creare a listelor cu marcatoare grafice sunt discutate pe rând în capitolul 8.

Lista html numerotata cu sub-articole. HTML: Lista numerotată și cu marcatori

Lista numerotata

Lista numerotata:

Listă cu puncte

Listă cu puncte:

Tipuri de markere

Lista numerotata cu atributul type="a":

Lista numerotata cu atributul type="I":

Tipuri de marcatori de listă cu marcatori:

Lista orizontală

Lista numerotata

Listă cu puncte:

Numerotarea listei

Scrierea numerelor

Lista cu litere rusești

Liste cu marcatori

Liste de definiții

Liste imbricate

Etichete Și

Marcatori de listă grafice

Etichete
Și