Ce este o listă numerotată în HTML? O listă numerotată este un set de elemente cu numere secvențiale. Avantajul său este că procesul de numerotare a elementelor este automatizat și, prin urmare, nu te vei încurca. De asemenea, puteți începe să numărați nu de la primul, ci de la o sută primul element. Puteți schimba tipul listei: cifre arabe, litere latine mari, litere latine mici, cifre romane mari, cifre romane mici. Indentațiile sunt adăugate în jurul listei numerotate: sus, jos și stânga. Eticheta este folosită pentru a crea o listă numerotată.

Fiecare articol dintr-o listă numerotată este evidențiat cu o pereche de etichete.
1. , apoi un exemplu cum se creează o listă numerotată:

   Exemplu de creare a unei liste numerotate

   
   
   1. Punctul unu
   
   
   2. Punctul doi
   
   

   Listele numerotate pot fi imbricate una în alta. Adâncimea poate fi orice. Această metodă este adesea folosită pentru a crea un meniu pe un site web. Mai departe exemplu de listă imbricată, numerotată:

   Exemplu de listă imbricată, numerotată

   
   
   1. Punctul unu
      
      
      
      1. Paragraful unu din primul
      
      
      2. Punctul doi în primul rând
         
         
         
         
         
         
      
      
      
      
   
   
   2. Punctul doi
   
   

   Pentru a schimba tipul listei, trebuie să utilizați atributul type. Valoarea atributului trebuie să fie primul caracter al secvenței date, de exemplu, pentru numere arabe, tip = "1" , pentru majuscule romane, tip = "I", etc.

   • Numere arabe - 1, 2 etc.
   • Litere mari latine - A, B etc.
   • Litere latine mici - a, b etc.
   • Cifre romane majuscule - I, II etc.
   • Numerele romane minuscule - i, ii etc.

   Să luăm exemplul nostru anterior și să specificăm tipurile de liste:

   
   
   1. Punctul unu
      
      
      
      1. Paragraful unu din primul
      
      
      2. Punctul doi în primul rând
         
         
         
         1. Punct unu în primul, în al doilea
         
         
         2. Punctul doi în primul, în al doilea
         
         
         
         
      
      
      
      
   
   
   2. Punctul doi
   
   

   Utilizați atributul start

   
   
   1920. Punctul unu
   
   
   1921. Punctul doi
   
   

   Stilizarea unei liste numerotate cu CSS

   Vor fi multe alte tutoriale despre asta, așa că vom arunca o privire rapidă asupra stilului listei. Mai întâi, să mutăm lista noastră numerotată cu 20 de pixeli de la marginea din stânga. Pentru a face acest lucru, folosim proprietatea margine.

   ol(
   marjă: 0 0 0 20px;
   }

   Pe Internet se pune adesea întrebarea: „Cum se schimbă culoarea marcatorilor (pentru o listă cu marcatori) sau culoarea numerotării (pentru o listă numerotată)?”. Este foarte ușor să faci asta, de exemplu, astfel:

   Adăugarea unei etichete span

   
   
   1920. Punctul unu
   
   
   1921. Punctul doi
   
   

   Schimba culoarea

   Li (
   culoarea rosie;
   }
   li span (
   culoare: #000000;
   }

   Lista numerotata si SEO

   Listele numerotate joacă și ele un rol important în promovarea SEO, deoarece fac informațiile de pe site mai structurate. Aceasta înseamnă că, dacă utilizați liste în locurile potrivite, informațiile vor fi mai ușor de înțeles pentru cititor, precum și pentru roboții de căutare.

   Singura diferență este că această etichetă este făcută strict pentru listele de numerotare. Numele etichetei provine de la abrevierea engleză „Ordered List” – o listă numerotată.

   Sintaxa etichetei

   1. Elementul #1
   2. Elementul #2
   3. Elementul #3
   4. ...

   Unde atributul type="value" poate lua următoarele valori

   • A - stabilește marcaje sub formă de litere mari latine (A, B, C..);
   • a - stabilește marcatori sub formă de litere latine mici (a, b, c..);
   • I - setează marcaje sub formă de cifre romane mari (I, II, III, IV..);
   • i - stabilește marcaje sub formă de cifre romane mici (i, ii, iii, iv..);
   • 1 (implicit) - setează marcatori sub formă de cifre arabe (1, 2, 3..);

   Atributul start="value" specifică valoarea de început (valoarea de început) a raportului.

   Atributul inversat specifică o numărătoare inversă (dacă este necesar).

   Etichetă

   necesită utilizarea unei etichete de închidere

   O etichetă pereche este folosită pentru a forma elementele listei

   1. . Între etichetele de deschidere și de închidere sunt cuvinte individuale, fraze, paragrafe, imagini, bucăți de cod și multe altele, care sunt conținutul listei cu marcatori.

      Notă

      În interiorul listei este posibil să schimbați contul în al dvs. Există un atribut special value="" pentru această etichetă.

   2. , căruia i se atribuie o valoare numerică. de exemplu

      1. Elementul #1
      10. Elementul #2
      11. Elementul #3

      Exemple cu liste numerotate în html (

      )

      Exemplul 1. Lista numerotată de html sub formă de litere latine

      Exemplu cu majuscule

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Exemplu cu litere mici

      1. Elementul #10
      2. Articolul #11
      3. Articolul #12

      Iată cum arată pe pagină:

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Exemplul 2. Lista html numerotata cu litere romane

      Exemplu cu majuscule

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Iată cum arată pe pagină:

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Exemplu cu litere mici

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Iată cum arată pe pagină:

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Exemplul 3. Listă html numerotată cu poziție de început diferită

      Un exemplu care arată capabilitățile atributului start, care vă permite să setați valoarea de pornire a contorului.

      50. Elementul #1
      51. Elementul #2
      52. Elementul #3

      Iată cum arată pe pagină:

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3

      Exemplul 4. Modificarea numărului în liste numerotate html

      Mai jos este un exemplu cu capacitatea de a modifica valorile contorului folosind atributul value atunci când se afișează elemente noi în etichete

   3. .

      10. Elementul #1
      11. Elementul #2
      100. Elementul #3
      101. Elementul #4

      Iată cum arată pe pagină:

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3
      4. Elementul #4

      Exemplul 5. Lista numerotată reversibilă în html

      Mai jos este un exemplu de listă numerotată invers (numărați în ordine inversă).

      10. Elementul #1
      11. Elementul #2
      12. Elementul #3
      13. Elementul #4

      Iată cum arată pe pagină:

      1. Elementul #1
      2. Elementul #2
      3. Elementul #3
      4. Elementul #4

      Limbajul HTML oferă un set special de etichete pentru prezentarea informațiilor sub formă de liste. Listele sunt una dintre cele mai frecvent utilizate forme de prezentare a datelor atât în ​​documentele electronice, cât și în cele tipărite. Vedem liste aproape zilnic, fie că este o listă cu lucrurile pe care trebuie să le facem la magazin, cu studenții la clasă sau doar cu lucruri de făcut. Capacitatea de a organiza structuri de liste este disponibilă în multe editoare de text, în special, puternicul procesor de text Microsoft Word are instrumente convenabile pentru formatarea listelor de diferite tipuri (posibilitățile de a crea liste HTML folosind Microsoft Word sunt discutate în Capitolul 8). Iată câteva cazuri în care utilizarea listelor este destul de convenabilă:

      • Combinând informații într-o singură structură pentru a oferi un aspect lizibil.
      • Descrierea proceselor complexe pas cu pas.
      • Aranjarea informațiilor în stilul unui cuprins, ale cărui paragrafe indică secțiunile relevante ale documentului.

      Rețineți că elementele de mai sus sunt doar organizate sub forma unei structuri de listă.

      HTML oferă următoarele tipuri principale de liste: cu marcatori, numerotate și cu definiții. Următoarele etichete sunt folosite pentru a implementa liste de diferite tipuri:

      ,
      ,

      , , . Cu ajutorul diferitelor tipuri de liste încorporate într-un document, pot fi implementate o varietate de caracteristici, a căror descriere face obiectul acestui capitol. Sunt luate în considerare caracteristicile de construire a listelor de diferite tipuri, precum și utilizarea listelor imbricate.

      listă cu puncte

      Unul dintre tipurile de liste implementate în HTML este lista cu marcatori. În caz contrar, listele de acest tip se numesc neordonate sau

      dezordonat. Numele de familie este adesea folosit ca o traducere formală a numelui etichetei corespunzătoare.

      , cu ajutorul cărora listele de acest tip sunt organizate în documente HTML (UL - Unordered List, neorded list).

      Într-o listă cu marcatori, pentru a-și evidenția elementele, se folosesc caractere speciale, numite marcatori de listă (numite adesea marcatori, care este sunetul formal al termenului englezesc bullet). Aspectul markerilor de listă este determinat de browser, iar atunci când se creează liste imbricate, browserele diversifică automat aspectul markerilor de diferite niveluri de imbricare.

      Etichete

      și<LI >

      Pentru a crea o listă cu marcatori, trebuie să utilizați un container-tag, în interiorul căruia 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 din listă trebuie să înceapă cu o etichetă

      • (LI - List Item, list item). Etichetă
      • nu are nevoie de o etichetă de închidere adecvată, deși prezența acesteia nu este în principiu interzisă. Browserele încep de obicei fiecare articol nou din listă pe o linie nouă atunci când afișează un document.

        Informațiile de mai sus sunt suficiente pentru a construi o listă elementară cu marcatori. Iată un exemplu de document HTML care utilizează o listă cu marcatori, a cărei randare în browser este prezentată în Fig. 2.1.

        Semne zodiacale:

        • Berbec

        • Taurul

        • Gemenii

        • Rac de râu

        • un leu

        • Fecioară

        • cântare

        • Scorpion

        • Săgetător

        • Capricornul

        • Vărsător

        • Pești

        Orez. 2.1. Afișarea în browser a unei liste cu marcatori

        Rețineți că, în plus față de elementele din listă 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ă, dar joacă rolul titlului său.

        Notă

        În unele manuale despre limbajul HTML, există o indicație că eticheta container ar trebui să fie utilizată pentru a seta titlul listei (LH - Antet listă, antet listă). Această etichetă nu este recunoscută în prezent de niciunul dintre browserele comune și nu face parte din specificația HTML. Astfel, utilizarea sa devine lipsită de sens, 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ă trebuie afișată într-o formă compactă. De exemplu, fontul sau spațierea dintre liniile unei liste pot fi reduse etc.

        Notă

        În prezent, prezența parametrului COMPACT în etichetă

        nu afectează afișarea listelor de către browserele de top. Prin urmare, utilizarea acestui parametru este lipsită de sens, 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ă. Aspectul exact al marcatorului va depinde de browserul pe care îl utilizați. Opțiunile tipice de afișare sunt următoarele:

        TIP = disc - marcajele sunt afișate ca cercuri solide; TIP = cerc - marcatorii sunt afișați ca cercuri necompletate; TIP = pătrat - marcatorii sunt afișați ca pătrate umplute. Exemplu de înregistrare:

        .

        Valoarea implicită este TYPE = disc. Pentru listele cu marcatori imbricate, valoarea implicită este disc la primul nivel, cerc la al doilea nivel și pătrat la al treilea nivel. Este exact ceea ce se face în cele mai recente versiuni ale browserelor Netscape și Internet Explorer. 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 poate fi specificat în eticheta elementului listă

        • .

          Exemplu de înregistrare:

        • .

          Notă

          Browserele interpretează diferit indicația tipului de marcator pentru un element 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ă doar aspectul marcatorului pentru acest element.

          Listați marcatori grafici

          Puteți utiliza imagini grafice ca marcatori de listă, care sunt utilizate pe scară largă pentru a crea documente HTML atractive, frumos proiectate. De fapt, această posibilitate nu este oferită direct de limbajul HTML, ci este implementată oarecum artificial. Acest lucru nu înseamnă că nu este recomandat sau condamnabil să faceți acest lucru, ci doar că nu vor fi folosite constructe speciale de limbaj HTML aici.

          Pentru a înțelege ideea, trebuie să înțelegeți cum sunt implementate listele în paginile HTML. Se pare că eticheta listă

          (precum și lista de etichete de alte tipuri, discutate mai jos) îndeplinește singura sarcină - îi spune browserului că toate informațiile aflate după această etichetă ar trebui să fie afișate cu o schimbare la dreapta (indentare) cu o anumită sumă. Etichete
          • Indicarea către elementele individuale ale listei oferă marcatori standard pentru elementele listei.

            Dacă trebuie să construim o listă cu markeri grafici, atunci ne putem lipsi de etichete

          • . Va fi suficient să inserați imaginea grafică dorită înainte de fiecare element al listei. Singura sarcină care trebuie rezolvată în acest caz este separarea elementelor listei unele de altele. Puteți utiliza etichete de paragraf pentru aceasta.

            Sau avans forțat în linie
            . Un exemplu de implementare a unei liste cu markeri grafici, a cărei afișare este prezentată în fig. 2.2 este prezentat mai jos:

            Semne zodiacale:
            

            Berbec
            

            Taurul
            

            zodia Gemeni
            

            Ambalaj
            

            Leu
            

            Fecioară
            

            cântare
            

            Scorpion
            

            Săgetător
            

            Capricornul
            

            Vărsător
            

            Pești

            

            Orez. 2.2. Lista cu marcatori cu marcatori grafice

            În exemplul dat, fișierul grafic Green_ball.gif este folosit ca marcator de element de listă. Rețineți că utilizarea graficelor în paginile HTML poate crește semnificativ cantitatea de informații transmise. Cu toate acestea, în acest caz, această creștere este extrem de mică. Aici se folosește același fișier pentru toți markerii,

            care va fi transmisă o singură dată. Dimensiunea unui fișier care conține o imagine mică este, de asemenea, extrem de mică.

            Notă

            Tehnicile de creare a listelor cu markeri grafici sunt discutate pe rând în capitolul 8.

            lista numerotata

            Un alt tip de listă implementat în HTML este lista numerotată. În caz contrar, listele de acest tip se numesc ordonate. Numele de familie este adesea folosit ca o traducere formală a numelui etichetei corespunzătoare.

            , cu ajutorul cărora liste de acest tip sunt organizate în documente HTML (OL - Ordered List, o listă ordonată).

            Listele de acest tip sunt de obicei 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 setat de parametrii etichetelor listei. În caz contrar, implementarea listelor numerotate seamănă mult cu implementarea listelor marcate.

            Etichete

            și

            1. Pentru a crea o listă numerotată, ar trebui să utilizați o etichetă de container, în interiorul căreia se află toate elementele listei. Etichetele de început și de sfârșit ale listei oferă o întrerupere de linie înainte și după listă, separând astfel lista de conținutul principal al documentului.

               Ca și în cazul unei liste cu marcatori, fiecare articol dintr-o listă cu marcatori trebuie să înceapă cu eticheta

            2. .

               Iată un exemplu de document HTML care utilizează o listă numerotată, a cărui afișare browser-ul este prezentat în fig. 2.3.

               Cele mai strălucitoare stele vizibile de pe Pământ sunt:

               • Sirius

               • K anopus

               • Arcturus

               • Alpha Centauri

               • Vega

               • K apella

               • Rigel

               • Procion

               • Achernar

               • Beta Centauri

               • Vetelgeuse

               • Aldebaran

                 
                 . . .

               • Mizar

                 
                 . . .

               • Polar

               

               Orez. 2.Z. lista numerotata

               În etichetă

               pot fi specificați următorii parametri: COMPACT, TYPE și START.

               Parametrul COMPACT are aceeași semnificație ca și listele cu marcatori. Parametrul TYPE este utilizat pentru a specifica modul în care este numerotată lista. Poate lua următoarele valori:

               TIP = A - setează marcatori sub formă de litere mari latine;

               TIP = a - setează marcaje sub formă de litere latine mici;

               TIP = I - setează marcaje sub formă de cifre romane mari;

               TIP = i - setează marcaje sub formă de cifre romane mici;

               TIP = 1 - setează marcatori sub formă de cifre arabe.

               În mod implicit, valoarea TYPE = 1 este întotdeauna utilizată, adică numerotarea folosind cifre arabe. Acest lucru se aplică și listelor ordonate imbricate. Aici, spre deosebire de listele cu marcatori, browserele în mod implicit nu fac numerotare diferite la diferite niveluri de imbricare ale listelor. Rețineți că după numărul elementului de listă, semnul „punct” este întotdeauna afișat suplimentar.

               Parametrul TYPE cu aceleași valori poate fi utilizat pentru a specifica modul în care trebuie numerotate elementele individuale ale listei. Pentru a face acest lucru, parametrul TYPE cu valoarea corespunzătoare poate fi specificat în eticheta elementului listă

               1. .

                  Exemplu de înregistrare:

               2. .

                  Eticheta parametrului START

                  vă permite să începeți să numerotați lista nu de la una. Valoarea parametrului START trebuie să fie întotdeauna un număr natural, indiferent de tipul de numerotare a listei. Iată un exemplu:
                  .

                  O astfel de notație determină numerotarea listei din litera latină majusculă „E”. Pentru alte tipuri de numerotare, intrarea START=5 va seta numerotarea, respectiv, de la cifra „5”, cifra romana „V”, etc.

                  Modificarea tipului de numerotare a listei și a valorilor numerelor se poate face pentru orice element al listei. Etichetă

                  5. pentru liste numerotate, permite utilizarea parametrilor TYPE și VALUE. Parametrul TYPE poate lua aceleași valori ca pentru etichetă
                     .

                     P exemplu de înregistrare:

                     1. .

                        Notă

                        Browserele interpretează indicația tipului de numerotare pentru un articol individual din listă în moduri diferite. Browserul Netscape modifică numerotarea pentru acest element și pentru toate elementele ulterioare până când este întâlnită următoarea modificare. Internet Explorer modifică doar aspectul numărului pentru acest element.

                        Wvaloarea parametrului VALUE al etichetei

                     2. - vă permite să schimbați numărul elementului dat din listă. Aceasta modifică numerotarea tuturor elementelor ulterioare. O utilizare tipică este pentru listele în care unele elemente sunt omise. Un exemplu de astfel de listă a fost dat mai sus (Fig. 2.3). Oferă o listă ordonată a celor mai strălucitoare stele, în care la 58 și 75 de locuri există stele care sunt clar vizibile la latitudinile noastre (Mizar este cea mai strălucitoare stea din constelația Ursa Major, iar Steaua Nordului este Ursa Minor).

                        Iată un alt exemplu original de utilizare a numerotării de diferite tipuri. Codul HTML de mai jos definește trei liste cu numerotare diferită. Pentru ușurință de vizualizare, fiecare dintre liste este plasată într-o celulă separată a tabelului. Toate cele trei liste sunt identice și diferă doar prin tipul de numerotare: în prima coloană a tabelului - cifre arabe, în a doua - romane, iar în a treia numerotarea este cu litere latine. Rețineți că elementele listei sunt goale, adică după orice etichetă

                     3. nu există date. Un exemplu de acest fel poate fi folosit ca tabel de corespondență între cifrele arabe și romane. Se pare că orice browser care acceptă liste poate fi folosit pentru a genera un astfel de tabel (Figura 2-4) atâta timp cât introduceți codul HTML furnizat. Numerotarea cu cifre romane funcționează corect până la valoarea 3999. Examinând coloana din dreapta, puteți înțelege cum se efectuează numerotarea cu litere latine. După epuizarea numerotării cu o literă (de la A la Z), primul număr de două litere - AA etc. este luat ca următor număr.

                        . . .

                        . . .

                        . . .

                        

                        Orez. 2.4. Diferite tipuri de numerotare liste HTML

                        Lista definițiilor

                        Listele de definiții, numite și dicționare de definiții de termeni, 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ă conține termenul definit, iar a doua parte conține textul sub forma unei intrări de dicționar, dezvăluind sensul termenului.

                        Listele de definiții sunt specificate folosind eticheta container

                        (Lista de definiții). În interiorul etichetei containerului

                        (Termen de definiție) termenul definit este marcat și eticheta

                        (Descrierea definiției) - un paragraf cu definiția sa. Pentru etichete

                        și

                        puteți omite etichetele de final corespunzătoare.

                        În general, lista definițiilor este scrisă după cum urmează:

                        Termen

                        Definiția termenului

                        În textul de după etichetă

                        Elementele la nivel de bloc, cum ar fi etichetele de paragraf, nu pot fi utilizate

                        sau titluri

                        -

                        . Ca regulă generală, textul termenului în curs de definire ar trebui să fie pe un singur rând. Textul care conține definiția termenului este afișat începând pe linia următoare (sau rând cu linie pentru unele browsere) după definiția termenului, indentată în dreapta. În informațiile plasate după etichetă

                        , pot fi plasate elemente la nivel de bloc. Rezultă, în special, că listele de definiții pot fi imbricate.

                        În etichetă

                        poate fi specificat parametrul COMPACT, al cărui scop este similar cu celelalte liste descrise mai sus.

                        Iată un exemplu de document HTML care utilizează o listă de definiții:

                        Clasificarea temperamentelor umane tipice,
                        fondat

                        asupra vederilor lui Hipocrate

                        Persoană flegmatică

                        Pasiv, foarte capabil, lent de adaptare;
                        starea de spirit este stabilă, puțin susceptibilă la influența externă;
                        letargia reacțiilor emoționale și încetineala activității volitive
                        
                        

                        sangvin

                        Activ, energic, adaptabil, -
                        vivacitatea și mobilitatea reacțiilor emoționale, viteza și puterea manifestărilor volitive
                        
                        

                        Coleric

                        Activ, foarte energic, persistent;
                        impulsivitatea și puterea reacțiilor emoționale, manifestări voliționale violente
                        
                        

                        melancolic

                        Pasiv, ușor de obosit, greu de adaptat -
                        slăbiciune a manifestărilor voliționale și predominarea dispoziției depresive, îndoiala de sine

                        Afișarea documentului HTML dat în browser este prezentată în Fig. 2.5.

                        

                        Orez. 2.5. Listă de definiții (seamănă cu un grup de intrări dintr-un dicționar)

                        Liste de tip

                        și

                        Liste de tip

                        și acum practic nu sunt utilizate, deși suportul lor de către browserele de top este încă oferit. În specificația HTML 4.0, ambele tipuri de liste sunt marcate ca depreciate. În schimb, se propune utilizarea listelor cu marcatori specificate de etichetă

                        .

                        Inițial, listele de aceste tipuri au fost concepute ca fiind mai compacte decât listele convenționale cu marcatori. Conform regulilor de scriere a elementelor acestor liste, nu li s-a permis să utilizeze elemente bloc, ceea ce înseamnă că este imposibil să se implementeze imbricarea listelor de acest tip. Fiecare element al listei era o linie de text.

                        Pentru liste ca

                        s-a planificat introducerea unei limite a „lungimii textului elementului de listă (24 de caractere). O astfel de restricție ar permite

                        liste de tipări

                        într-o formă asemănătoare cu listarea directoarelor în sistemele de operare UNIX și MS-DOS când se utilizează tasta /W (în mai multe coloane). În plus, marcatoarele nu au fost afișate pentru articolele din listă de acest tip.

                        În prezent, toate aceste idei nu au fost implementate, deoarece utilizarea în continuare a listelor de aceste tipuri nu este recomandată. Versiunile moderne de browsere redă liste de aceste tipuri exact în același mod ca și listele de acest tip

                        .

                        Liste imbricate

                        Există momente când un element de listă de un tip trebuie să includă o listă întreagă de același tip sau altul. Aceasta va organiza liste cu mai multe niveluri sau imbricate. HTML permite imbricarea arbitrară a diferitelor tipuri de liste, dar trebuie avut grijă atunci când le organizați.

                        Mai jos este codul HTML al documentului cu liste imbricate, a cărui afișare este prezentată în Fig. 2.6. În acest exemplu, fiecare element al listei cu marcatori are propria sa listă numerotată.

                        Sateliții unor planete

                        • Zempa

                          1. lună

                        • mapc

                          1. Fobos

                          2. Deimos

                        • Uranus

                          1. Ariel

                          2. Umbriel

                          3. Titania

                          4. Oberon

                          5. Miranda

                        • Neptun

                          1. Triton

                          2. Nereidă

                          Listele sunt peste tot. Sunt folosite pentru:

                          • ruperea unor segmente mari de text în părți;
                          • evidențierea punctelor importante;
                          • declarația „planului de acțiune” și a listei de activități ( lista numerotata in html).

                          Folosind liste cu marcatori, oamenii pot digera mai ușor ceea ce le spui. Dar cum sunt setate pe o pagină web?

                          Liste cu marcatori (sau liste neordonate)

                          Primul tip de listă la care ne vom uita este lista cu marcatori.

                          Liste neordonate - etichetă

                          O listă cu marcatori este cunoscută și ca listă neordonată, deoarece nu are numerotarea elementelor. Pentru o listă cu marcatori, se utilizează o pereche de etichete. Mai jos este un exemplu simplu:

                          • Paragraful 1
                          • Punctul 2
                          • Punctul 3

                          În primul rând, întreaga listă este luată în etichete. Când deschideți o etichetă de listă, asigurați-vă că o închideți și apoi continuați să completați elementele listei.

                          atribut tip

                          Atributul type specifică ce tip de marcator veți vedea pe pagină. Deși puteți stila o gamă largă de stiluri de marcare cu CSS și chiar să vă folosiți propria imagine, cel mai bine este să rămâneți cu tipurile de bază ( inclusiv în lista HTML numerotată):

                          Lista articole - Etichetă

                          Fiecare element din listă este împachetat într-o pereche separată de etichete.

                        • . De multe ori te poți descurca fără
                        • , dar aș recomanda să respectați această regulă.

                          Lista de mai sus este plasată într-o etichetă separată

                          , dar fiecare
                          • acceptă, de asemenea, propriul atribut de tip și astfel se poate crea următoarea listă:

                            
                            

                            Lista cu marcatori

                            Înainte ca orice stil CSS să fie aplicat listei, HTML ( mai precis browser) îi aplică indentări, astfel încât să fie diferit de un paragraf obișnuit cu eticheta

                            Lista ordonată/numerotată - etichetă

                            Dacă doriți să comandați elementele listei atunci eticheta

                            va ajuta cu asta. Este implicit o listă HTML numerotată:
                            1. Elementul 1
                            2. Elementul 2
                            3. Elementul 3

                            care ne oferă rezultatul:

                            A. Punctul 1
                            B. Punctul 2
                            C. Punctul 3

                            Atributul type vă permite să utilizați mai multe opțiuni de design pentru listele numerotate în comparație cu cele cu marcatori.

                            Pornirea unei liste numerotate de la un anumit număr

                            Să presupunem că consolidați instrucțiunile pentru crearea tabelelor. Puteți utiliza o listă numerotată pentru aceasta. După fiecare articol, doriți să plasați imagini și text suplimentar, caz în care veți avea nevoie de mai multe liste.

                            Problema este că implicit fiecare listă începe cu numărul 1 (sau litera A). Asta ți-ar strica conducerea!

                            Din fericire, HTML are o proprietate de pornire care vă permite să începeți numerotarea de la un număr specificat:

                            4. pasul patru
                            5. pasul cinci
                            6. pasul șase

                            Ceea ce ne oferă următoarele:
                            4. Pasul patru
                            5. Pasul cinci
                            6. Pasul șase

                            Ordine inversă

                            Dacă doriți să afișați numerele (sau literele) în ordine inversă, puteți face acest lucru adăugând cuvântul cheie inversat la eticheta de listă numerotată HTML:

                            1. Primul punct
                            2. Al doilea punct
                            3. Al treilea paragraf
                            4. Al patrulea punct
                            5. Al cincilea punct

                            Ca rezultat, lista va arăta astfel:
                            5. Al cincilea punct.
                            4. Al patrulea punct.
                            3. Al treilea punct.
                            2. Al doilea punct.
                            1. Primul punct.

                            Lista cu marcatori pe mai multe niveluri în HTML

                            Cu corecțiile de suport instalate în browsere ( și uneori cu css undo pentru unele site-uri) puteți crea o listă HTML numerotată cu mai multe niveluri. Acest lucru se realizează prin încorporarea unei liste în alta:

                            • Element de nivel superior
                            • Subelementul 1
                            • Subelementul 2
                            • Element de nivel superior

                            Ce ne oferă:

                            Element de nivel superior
                            o Sclavul 1
                            o Subelementul 2
                            Element de nivel superior

                            Puteți utiliza o combinație de etichete

                            și
                            . Acest lucru poate fi util dacă doriți să marcați sub-articolele unei liste numerotate cu marcatori.

                            1. Element de nivel superior
                            o Sclavul 1
                            o Subelementul 2
                            2. Element de nivel superior

                            Folosiți liste HTML numerotate în paginile dvs.

                            Concluzie

                            Aceasta este doar o scurtă introducere în utilizarea listelor în design web, dar puteți începe. Dacă aveți întrebări, vă rugăm să le întrebați în comentarii!

                            Traducerea articolului " Liste numerotate și cu marcatori în HTML» a fost pregătit de o echipă prietenoasă de proiect.

                            Unul dintre tipurile de liste implementate în HTML este lista cu marcatori. În caz contrar, listele de acest tip se numesc neordonate sau neordonate. Numele de familie este adesea folosit ca o traducere formală a numelui etichetei corespunzătoare.

                            , cu ajutorul cărora listele de acest tip sunt organizate în documente HTML (UL - Unordered List, neorded list).

                            Într-o listă cu marcatori, pentru a-și evidenția elementele, se folosesc caractere speciale, numite marcatori de listă (numite adesea marcatori, care este sunetul formal al termenului englezesc bullet). Aspectul markerilor de listă este determinat de browser, iar atunci când se creează liste imbricate, browserele diversifică automat aspectul markerilor de 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 din listă trebuie să înceapă cu o etichetă

                            • (LI - List Item, list item). Etichetă
                            • nu are nevoie de o etichetă de închidere corespunzătoare, deși prezența acesteia nu este în principiu interzisă. Browserele încep de obicei fiecare articol nou din listă pe o linie nouă atunci când afișează un document.

                              Informațiile de mai sus sunt suficiente pentru a construi o listă elementară cu marcatori. Iată un exemplu de document HTML care utilizează o listă cu marcatori, a cărei randare în browser este prezentată în Fig. 2.1.

                              Semne zodiacale:

                              • Berbec

                              • Taurul

                              • Gemenii

                              • Fecioară

                              • cântare

                              • Scorpion

                              • Săgetător

                              • Capricornul

                              • Vărsător

                              • Pești

                              Orez. 2.1. Afișarea în browser a unei liste cu marcatori

                              Rețineți că, în plus față de elementele din listă 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ă, dar joacă rolul titlului său.

                              Notă

                              În unele manuale despre limbajul HTML, există o indicație că eticheta container ar trebui utilizată pentru a seta titlul listei. (LH - Antet listă, antet listă). Această etichetă nu este recunoscută în prezent de niciunul dintre browserele comune și nu face parte din specificația HTML. Astfel, utilizarea sa devine lipsită de sens, 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ă trebuie afișată într-o formă compactă. De exemplu, fontul sau spațierea dintre liniile unei liste pot fi reduse etc.

                              Notă

                              În prezent, prezența parametrului COMPACT în etichetă

                              nu afectează afișarea listelor de către browserele de top. Prin urmare, utilizarea acestui parametru este lipsită de sens, 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ă. Aspectul exact al marcatorului va depinde de browserul pe care îl utilizați. Opțiunile tipice de afișare sunt următoarele:

                              TIP = disc - marcajele sunt afișate ca cercuri solide; TIP = cerc - marcatorii sunt afișați ca cercuri necompletate; TIP = pătrat - marcatorii sunt afișați ca pătrate umplute. Exemplu de înregistrare:

                              .

                              Valoarea implicită este TYPE = disc. Pentru listele cu marcatori imbricate, valoarea implicită este disc la primul nivel, cerc la al doilea nivel și pătrat la al treilea nivel. Este exact ceea ce se face în cele mai recente versiuni ale browserelor Netscape și Internet Explorer. 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 poate fi specificat în eticheta elementului listă

                              • .

                                Exemplu de înregistrare:

                              • .

                                Notă

                                Browserele interpretează diferit indicația tipului de marcator pentru un element 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ă doar aspectul marcatorului pentru acest element.

                                Listați marcatori grafici

                                Puteți utiliza imagini grafice ca marcatori de listă, care sunt utilizate pe scară largă pentru a crea documente HTML atractive, frumos proiectate. De fapt, această posibilitate nu este oferită direct de limbajul HTML, ci este implementată oarecum artificial. Acest lucru nu înseamnă că nu este recomandat sau condamnabil să faceți acest lucru, ci doar că nu vor fi folosite constructe speciale de limbaj HTML aici.

                                Pentru a înțelege ideea, trebuie să înțelegeți cum sunt implementate listele în paginile HTML. Se pare că eticheta listă

                                (precum și lista de etichete de alte tipuri, discutate mai jos) îndeplinește singura sarcină - îi spune browserului că toate informațiile aflate după această etichetă ar trebui să fie afișate cu o schimbare la dreapta (indentare) cu o anumită sumă. Etichete
                                • Indicarea către elementele individuale ale listei oferă marcatori standard pentru elementele listei.

                                  Dacă trebuie să construim o listă cu markeri grafici, atunci ne putem lipsi de etichete

                                • . Va fi suficient să inserați imaginea grafică dorită înainte de fiecare element al listei. Singura sarcină care trebuie rezolvată în acest caz este separarea elementelor listei unele de altele. Puteți utiliza etichete de paragraf pentru aceasta.

                                  Sau avans forțat în linie
                                  . Un exemplu de implementare a unei liste cu markeri grafici, a cărei afișare este prezentată în fig. 2.2 este prezentat mai jos:

                                  care va fi transmisă o singură dată. Dimensiunea unui fișier care conține o imagine mică este, de asemenea, extrem de mică.

                                  Notă

                                  Metodele de creare a listelor cu marcatori grafici sunt discutate pe rând în capitolul 8.