Liste in HTML - lista cu marcatori - lista numerotata - lista de definitii - liste imbricate in HTML. Lista cu marcatori în HTML

În limbajul de marcare HTML, există 3 tipuri de liste - liste ordonate (numerotate), neordonate (nenumerotate) și liste de definiții.

Pentru a construi o astfel de listă, aveți nevoie de 2 tipuri de elemente: „ul” (prescurtare pentru listă neordonată, adică listă neordonată) și „li” (element de listă). Tot ceea ce este scris în interiorul „li” este marcat cu un marker.

Aspectul unei astfel de liste poate fi controlat prin specificarea tipurilor de marcatori.

Tipuri de markere

Există un atribut de tip special care este plasat în ambele elemente ale listei. Acesta este tipul dvs. de marker. Există doar 3 tipuri: cerc, disc și pătrat:

- pătrat
- disc
- circumferinta

În funcție de locul în care specificați tipul de marcator, îl puteți modifica pentru întreaga listă sau pentru un anumit element.

Lista ordonata

Pentru a construi o listă, aveți nevoie și de 2 elemente: „ol” și „li” (element de listă). Marcatoarele sunt înlocuite cu numere cu un punct. Exemplu de listă simplă:

1. primul element
2. al doilea element
3. ultimul element

Puteți controla aspectul listei ordonate specificând diferite tipuri de numerotare.

Tipuri de numerotare

Există un atribut de tip special care este plasat în elementul „ol” sau „li”. Acesta este tipul dvs. de listă. Există 5 tipuri în total:

- Numerotarea cu cifre arabe (1, 2, 3)
- Numerotarea cu majuscule (A, B, C)
- Numerotarea cu litere mici (a, b, c)
- Numerotarea cu cifre romane mari (I, II, III)
- Numerotarea cu cifre romane mici (i, ii, iii)
- De la ce număr să începi numerotarea?

În funcție de locul în care specificați tipul de numerotare, îl puteți modifica pentru întreaga listă sau pentru un anumit element.

Lista de definiții

A fost elaborată o listă de definiții pentru intrările din dicționar.

Există un container general „dl”. În interiorul acestuia sunt „dt” (definiția termin) și „dd” (descrierea definiției). Cel mai simplu exemplu:

Departamentul de Marketing

Acest departament este angajat în promovarea bunurilor și serviciilor

Departamentul Finanțe

Acest departament se ocupă de toate tranzacțiile financiare

Toate elementele tuturor listelor sunt elemente de bloc. Dar numai elementele inline pot fi plasate în interiorul elementului „dt”. Puteți pune orice doriți în elementele „dd” și „li”. De aici provin listele imbricate.

Imbricate (liste mixte)

Acestea sunt liste cu mai multe niveluri, în cadrul cărora există o ierarhie. Adesea, astfel de liste sunt folosite la construirea unei hărți a site-ului. Exemplu:

Lista mixtă

VESTIREA ZILEI

Azi ploua

O să plouă toată ziua

VESTIREA NOAPTEI

Va ploua noaptea

Mâine va începe o nouă zi

Listele sunt o parte importantă a conținutului, deoarece ajută la organizarea informațiilor. Textul din liste este mai bine perceput și mai ușor de reținut.

Cel mai simplu este că în fața fiecăruia dintre elementele sale există un marker - un cerc, pătrat sau cerc. Ordinea articolelor dintr-o listă cu marcatori nu este importantă.

Pentru ao crea, trebuie să utilizați doar două etichete:

Şi
• .
  este un container care conține o listă ale cărei elemente sunt specificate de etichetă
  • .
    • Piatră
    • Foarfece
    • Hârtie
    
    
    

    În mod implicit, marcatorul de listă este un cerc negru ( disc). Prin adăugarea la etichetă

    atribut tipși atribuindu-i valoarea corespunzătoare, marcatorul poate fi schimbat într-un cerc ( cerc) sau pătrat negru ( pătrat).

    Diferă de marcat prin faptul că ordinea elementelor din el este importantă și, prin urmare, în locul unui marcator, aici sunt folosite numere sau litere secvențiale. Nu este nevoie să vă faceți griji cu privire la ordinea din listă: browserul se ocupă de această sarcină. Dacă modificați lista (eliminați sau adăugați un articol necomandat), browserul o va recalcula și o va afișa corect.

    Etichetele sunt folosite pentru a crea liste numerotate

    Şi
    1. . Container
       definește începutul și sfârșitul listei, tag
       1. specifică începutul și sfârșitul elementului său - totul este ca într-o listă cu marcatori, numai
          înlocuit cu
          .
          1. Piatră
          2. Foarfece
          3. Hârtie
          
          
          

          

          Deoarece lucrurile nu sunt întotdeauna atât de simple cu liste numerotate, pentru etichetă

          a creat următoarele atribute (notă: mai jos este doar o listă numerotată):

          1. tip. Acest atribut vă permite să numerotați lista nu numai cu arabă, ci și cu cifre romane sau litere latine cu majuscule diferite. tip acceptă valorile 1 (implicit), a, A, i, I (încercați să experimentați singuri cu ele).

          2. început. Numerotarea nu trebuie întotdeauna să înceapă cu una. Acest atribut vă permite să setați valoarea inițială - numărul primului element al listei. În el puteți specifica că raportul începe, de exemplu, cu cifra 100 sau litera K.

          3. inversat. Dacă lista nu trebuie să treacă de la 1 la 10, ci de la 10 la 1, atunci acest atribut trebuie utilizat. Dacă este specificat, numerotarea va fi în ordine inversă.

          Pentru a atribui un număr arbitrar unui element din mijlocul listei, trebuie să utilizați în etichetă

          1. atribut :

          2. Al patruzeci și cincilea element după al treizeci și opta

          Schimbând numărul unui element din mijlocul listei, veți schimba numerotarea tuturor elementelor care urmează - raportul va începe cu valoarea din atributul value. De exemplu, dacă i-ați atribuit elementului 18 numărul 35, atunci elementele care îl urmează vor avea numerele nu 19, 20, 21, ci 36, 37, 38.

          Lista de definiții

          Un tip de listă care nu este la fel de cunoscut ca cele discutate mai sus. Constă din termeni și definițiile acestora. Creat folosind etichete:

          - un container care conține o listă.

          - eticheta de termen.

          - etichetă de definiție

          Domeniul de aplicare al listelor de definiții este glosare, cărți de referință, teste, dicționare și alte liste ample de tip „Termen - explicație”.

          Iată un exemplu de listă de definiții:

          Descriptor

          Unitatea de bază a limbajului de marcare, cunoscută de toată lumea ca „Tag”.

          Atribut

          O proprietate a unei etichete care îi oferă opțiuni suplimentare de formatare a textului.

          Eticheta

          O singură etichetă care nu trebuie să fie închisă.

          
          
          

          

          O listă formată din liste imbricate unele în altele. Poate include liste de diferite tipuri. Dificultatea creării constă în menținerea imbricației corecte a etichetelor, deoarece este ușor să fii confundat într-o structură pe mai multe niveluri.

          Iată un exemplu de listă cu mai multe niveluri:

          Limbajele de programare sunt împărțite în:

          • Structural
          1. Pascal
          2. Oberon
          1. Depozit de vechituri
          • Orientat pe obiecte
          1. Java
          • Funcţional
          1. Lisp
          2. Piton

          
          
          

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

          , care este folosit pentru a crea lista. Fiecare articol din lista numerotată este indicat printr-o etichetă
          1. după cum se arată mai jos.
             1. Primul punct
             2. Al doilea punct
             3. Al treilea punct

             Dacă nu specificați niciun atribut suplimentar și scrieți doar eticheta

             , atunci implicit este o listă cu numere arabe (1, 2, 3,...), așa cum se arată în Exemplul 11.3.

             Exemplul 11.3. Creați o listă numerotată

             Lucrul cu timpul

             1. crearea de punctualitate (nu vei întârzia niciodată la nimic);
             2. remediu pentru punctualitate (nu te vei grăbi niciodată);
             3. modificarea percepției timpului și a ceasurilor.
             
             
             

             Rezultatul acestui exemplu este prezentat în Fig. 11.3.

             Orez. 11.3. Vizualizare listă numerotată

             Rețineți că o listă numerotată adaugă și indentare automată în partea de sus, de jos și din stânga textului.

             Următoarele valori pot servi ca elemente de numerotare:

             • numere arabe (1, 2, 3, ...);
             • litere mari latine (A, B, C, ...);
             • litere latine mici (a, b, c, ...);
             • cifre romane majuscule (I, II, III, ...);
             • cifre romane mici (i, ii, iii, ...).

             Pentru a indica tipul listei numerotate, utilizați atributul tip al etichetei

             . Valorile sale posibile sunt date în tabel. 11.2.
             Masă 11.2. Tipuri de liste numerotate

             Tip de listă	Cod HTML	Exemplu
             numere arabe		1. Ceburașka 2. Crocodil Gena 3. Shapoklyak
             Litere mari ale alfabetului latin		A. Cheburashka B. Crocodil Gena C. Shapoklyak
             Litere mici ale alfabetului latin		o. Cheburashka b. Crocodilul Gena c. Shapoklyak
             Cifre romane cu majuscule		I. Cheburashka II. Crocodilul Gena III. Shapoklyak
             Cifre romane cu litere mici		i. Cheburashka ii. Crocodilul Gena iii. Shapoklyak

             Pentru a începe o listă cu o anumită valoare, utilizați atributul start al etichetei

             . Nu contează la ce tip este setată lista folosind type , atributul start funcționează la fel cu numerele romane și arabe. Exemplul 11.4 arată cum să creați o listă folosind cifre romane majuscule care încep cu opt.

             Exemplul 11.4. Numerotarea listei

             8. Regele Magnum XLIV
             9. Regele Siegfried al XVI-lea
             10. Regele Sigismund XXI
             11. Regele Husbrandt I
             
             
             

             Rezultatul acestui exemplu este prezentat în Fig. 11.4.

             

             Orez. 11.4. Lista numerotata cu cifre romane

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

             , care este folosit pentru a crea lista. Următoarele valori pot servi ca elemente de numerotare:
             • 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

             sau valoarea elementului
             1. . 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

                4. Ar trebui să ai grijă de locul tău de muncă.
                5. Reglați iluminarea în cameră astfel încât sursa de lumină să fie situată în lateral sau în spatele operatorului.
                10. Pentru a evita complicațiile medicale, este recomandat să alegeți un 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 să fie 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 element , este folosit pe tot parcursul. Codul final este prezentat în Exemplul 3.

                Exemplul 3: Modificarea vizualizării listei

                1. Primul
                2. Doilea
                3. Treilea
                4. 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ă, doar clasa selectată este adăugată la ea, să o numim chirilic (exemplul 4).

                Exemplul 4: Cod pentru a crea o listă

                1. Unul
                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)”; ) .chirilic 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 final 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

                1. Ciorbă
                2. cotlet de știucă
                3. Kulebyaka
                4. Ciuperci în smântână
                5. Clatite cu caviar
                6. Cvas
                
                
                

                Rezultatul acestui exemplu este prezentat în Fig. 3.

                Lista numerotata

                Listele numerotate sunt uneori numite liste ordonate. Listele de acest tip sunt o succesiune ordonată de elemente individuale. Diferența față de listele cu marcatori este că într-o listă numerotată, fiecare element este precedat automat de un număr de serie. Tipul de numerotare depinde de browser și poate fi specificat prin atributele etichetelor de listă. În caz contrar, implementarea unei liste numerotate este foarte asemănătoare cu implementarea unei liste marcate.

                Pentru a crea o listă numerotată, ar trebui să utilizați o etichetă de container<OL> OL>, în interiorul căruia se află toate elementele listei.

                Fiecare element de listă trebuie să înceapă cu o etichetă<LI> și se încheie cu etichetaLI>.

                Specificația elementului OL:

                TYPE="tip de numerotare"

                START="poziție de pornire">

                Atributul TYPE specifică tipul de numerotare utilizat pentru alocarea elementelor listei. Poate avea următoarele semnificații:

                 A – markere sub formă de litere latine majuscule;

                 a – marcatori sub formă de litere latine mici;

                 I- markere sub formă de cifre romane mari;

                 însemne i- sub formă de cifre romane mici;

                 1- marcatori sub formă de cifre arabe, această valoare se utilizează conform
                implicit.

                Atributul START specifică poziția la care începe numerotarea listei. Folosind acest atribut, puteți începe numerotarea, de exemplu, cu cifra 5 sau litera E, în funcție de tipul de numerotare. Valoarea atributului START este un număr, indiferent de tipul de numerotare.

                Specificația elementului LI pentru lista numerotată:

                TYPE="tip de numerotare"

                VALUE="numărul elementului">!}

                Atributul TYPE specifică tipul de numerotare poate lua aceleași valori ca și atributul elementului OL cu același nume. Valoarea implicită a acestui atribut este 1.

                Atributul VALOARE vă permite să modificați numărul unui anumit element, iar numărul elementelor ulterioare se va schimba, de asemenea.

                Un exemplu de utilizare a unei liste numerotate:

                Orașe rusești după dimensiune:

             2. Moscova
             3. Sankt Petersburg
             4. Novosibirsk

             Acesta este modul în care browserul va afișa acest exemplu:

             Lista de definiții

             Listele de definiții, numite și dicționare de definiții, sunt un tip special de listă. Spre deosebire de alte tipuri de liste, fiecare element al unei liste de definiții constă întotdeauna din două părți. Prima parte a elementului de listă indică termenul care este definit, iar a doua parte conține text sub forma unei intrări de dicționar care dezvăluie sensul termenului.

             Listele de definiții sunt specificate folosind o etichetă de container<D.L.>. Există o etichetă în interiorul ei<D.T.> termenul în curs de definire este marcat, iar eticheta<DD> – un paragraf cu definiția lui. În interiorul unui element

             Paragrafele (P) și titlurile (H1-H6) nu pot fi folosite, dar pot fi folosite în interiorul unui element
             . Nu există atribute pentru elementele listei de definiții. În general, lista definițiilor este scrisă după cum urmează:

             Termen
             Definiția termenului

             Un exemplu de utilizare a unei liste de definiții:

             Compoziția Microsoft Office

             Microsoft Word
             Procesor de text multifuncțional
             Microsoft Excel
             Program pentru lucrul cu electronica

             mesele