Unul dintre tipurile de liste implementate în HTML este listă cu puncte. În caz contrar, listele de acest tip se numesc nenumerotate 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, neordenată).

O listă cu marcatori folosește Simboluri speciale, numiți marcatori de listă (numite adesea gloanțe, 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. diferite niveluri cuibărit.

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 pornesc de obicei de fiecare dată când afișează un document. element nou listă dintr-o linie nouă.

  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.

  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ă această listă trebuie prezentate î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, cererea acest parametru este lipsit de sens, mai ales că utilizarea sa 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 ultimele versiuni Browsere 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 poate fi specificat în eticheta elementului listă

  • .

    Exemplu de intrare:

  • .

    Notă

    Browserele interpretează tipul de simbol diferit pentru element individual 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. Motor de cautare 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ă deloc că acest lucru nu este recomandat sau condamnabil, ci înseamnă doar că aici nu se vor aplica măsuri speciale. constructe ale limbajului HTML.

    Pentru a înțelege ideea, trebuie să înțelegeți mecanismul de implementare a listelor pe paginile HTML. Se pare că eticheta listă

    (așa cum, într-adevăr, listează etichetele de alte tipuri discutate mai jos) efectuează o singură sarcină - indică browserului că toate informațiile aflate după a acestei etichete ar trebui să fie afișat deplasat la dreapta (indentat) cu o anumită sumă. 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 ceea ce doriți înainte de fiecare element al listei imagine grafică. 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
      . Exemplu de implementare a unei liste cu markeri grafici, a cărui 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.

      Listele cu marcatori vă permit să împărțiți textul mare în blocuri separate, fiecare dintre acestea începând cu un marcator - de obicei un punct mic. Acest lucru atrage atenția cititorului asupra textului și crește lizibilitatea acestuia.

      Cu element

      Sunt asociate următoarele caracteristici:
      • în locul în care se produce
        , browserul adaugă automat o întrerupere de linie;
        • lista are indentări în partea de sus și de jos;
        • În mod implicit, marcatorii sunt afișați ca un cerc umplut;
        • Fiecare element de listă este deplasat la dreapta în raport cu textul principal.

        Figura 1 prezintă rezultatul exemplului, ilustrând caracteristicile de mai sus ale listei cu marcatori.

        Orez. 1. Vedere listă marcatori

        Tip marker

        Jetoanele pot accepta unul dintre trei tipuri: cerc umplut (implicit), cerc deschis și pătrat. Pentru a selecta tipul de marcator, utilizați proprietate de tip list-style-type sau stil de listă universal (exemplul 1). Se aplică următoarele valori:

        • disc - markere sub formă de cerc umplut;
        • cerc - marcatori sub forma unui cerc deschis;
        • pătrat - marcatori pătrați.

        Exemplul 1: Modificarea aspectului unui marker

        • Sepulki
        • Sepulcarie
        • Sepulenarea

        Exemplul arată cum să creați o listă cu marcatori folosind un pătrat mic, de culoare solidă, ca pictogramă marcator. Deși numărul de valori este limitat la trei, asta nu înseamnă că avem doar trei tipuri de marker la dispoziție. Există multe personaje speciale care pot acționa cu succes ca o pictogramă marcator. Înșurubați-le direct

      • Nu va funcționa, așa că va trebui să o rezolvi. Pentru a face acest lucru, ascundeți marcatorii de listă folosind proprietăți tip listă cu nu valoreaza niciuna iar în text înainte de conținut
      • Adăugăm propriul caracter folosind pseudo-elementul ::before. În exemplul 2, un astfel de marker este un triunghi.

        Exemplul 2: Folosind::before

        • Sepulki
        • Sepulcarie
        • Sepulenarea

        Rezultat acest exemplu prezentată în fig. 2. Deoarece folosirea proprietății de tip listă cu valoarea none nu elimină deloc marcatorii, ci doar le ascunde din vedere, lista apare deplasată la dreapta. Pentru a scăpa de această caracteristică, exemplul adaugă proprietatea text-indent cu o valoare negativă. Sarcina sa este de a muta textul spre stânga un caracter.

        

        Orez. 2. Markeri arbitrari din listă

        Caracterul nu trebuie să fie în format hexazecimal, acesta poate fi introdus direct în text. Principalul lucru este să salvați documentul în codificare UTF-8 și că editorul îl acceptă. Caracterele în sine și codurile lor pot fi preluate, de exemplu, din LibreOffice Writer (Fig. 3).

        

        Orez. 3. Selectarea unui simbol în LibreOffice

        Lista cu markere desenate manual

        Stilurile vă permit să setați orice marker ca marker. imagine potrivită prin proprietatea list-style-image. Valoarea este relativă sau cale absolută La fisier grafic, așa cum se arată în exemplul 3.

        Exemplul 3: Utilizarea unei imagini ca marcator

        • Sepulki
        • Sepulcarie
        • Sepulenarea

        Cel mai bine este să alegeți o imagine mică pentru a nu transforma elementele listei în legendă. În fig. Figura 4 prezintă rezultatul unui exemplu de utilizare a imaginilor mici ca markeri.

        

        Orez. 4. Desenul ca marker

        Utilizarea list-style-image are câteva dezavantaje:

        • modelul nu poate fi mutat în sus sau în jos;
        • V browsere diferite Poziția imaginii în raport cu textul poate diferi.

        Aceste neajunsuri pot fi evitate folosind proprietatea de fundal, se stabilește imagine de fundal. Pentru fiecare element de listă

      • scoatem marcajele originale si punem imagine de fundal nicio repetare. Și pentru ca textul să nu apară deasupra imaginii, îl deplasăm la dreapta folosind padding-left (exemplul 4).

        Exemplul 4: Utilizarea fundalului

        Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

        Poziția textului și a marcatorului

        Există două moduri de a plasa un marcator în raport cu textul: marcatorul este mutat în afara graniței elementelor listei sau înfășurat în jurul textului (Fig. 5).

        interior	in afara

        Orez. 5. Amplasarea markerilor în raport cu textul

        Pentru a controla poziția marcatorilor, utilizați proprietatea list-style-position. Are două semnificații: exterior - marcatorii sunt plasați în afara blocului de text (aceasta este valoarea implicită) și interior - marcatorii fac parte din blocul de text și sunt afișate în elementul din listă (exemplul 5).

        Exemplul 5: Schimbarea poziției markerilor

        • Înainte de a începe, verificați dacă echipamentul inclus cu kitul 3BM este inclus.
        • În lipsa unuia sau mai multor dispozitiv periferic ar trebui să contacteze imediat personalul tehnic VC.
        • După ce vă inspectați vizual zona de lucru, puteți porni cu atenție alimentarea 3BM.

        Rezultatul acestui exemplu este prezentat în Fig. 6.

        

        Bună ziua, dragi cititori! Astăzi, ca o continuare a seriei de articole din secțiunea „Noțiuni de bază HTML”, vreau să vă prezint algoritmul de creare liste html cu ajutor etichete ul și li (lista cu marcatori), ol și li (lista numerotată), dl, dt, dd (lista de definiții).

        Acum voi continua să vă prezint cele mai des folosite cu etichete html, care sunt folosite pentru a crea liste pe paginile site-ului. Dacă cineva nu știe despre ce este vorba, cu siguranță după informațiile primite mai jos va înțelege imediat despre ce vorbim, deoarece această formă de prezentare a materialului este foarte comună.

        Liste HTML cu marcatori - etichete ul și li

        Lista cu marcatori va fi definită de eticheta ul. Între etichetele ul de deschidere și de închidere există elemente de listă, conținutul fiecăruia dintre acestea trebuie, la rândul său, să fie situat între etichetele de deschidere și de închidere. Permiteți-mi să observ imediat că eticheta ul este asociată (prezența unei etichete de deschidere și de închidere) și, de asemenea, la nivel de bloc, adică formează un container care include elemente (linii) formate de fiecare dată de eticheta li. În consecință, eticheta li este asociată și litere mici.

        Mod implicit aspect markerul este reprezentat de un cerc umplut. Cu toate acestea, îi puteți modifica aspectul utilizând atributul type, care are următoarele valori: disc, cerc, pătrat. Valoarea discului (care determină aspectul markerului ca un cerc umplut) este implicită. Adică, dacă atributul tip nu este specificat, atunci aspectul marcatorului va arăta ca un cerc umplut. Dacă adăugăm aceste atribute la eticheta ul, obținem următoarele opțiuni:

        Desigur, fiecărui marker al unui element individual al unei liste cu marcatori i se poate da propriul aspect prin specificarea valorilor adecvate pentru atributul tip.

        Liste HTML numerotate - etichete ol și li

        Acum să vedem cum este creată o listă numerotată folosind etichete vechi (blocare și etichetă asociată similar cu ul). Eticheta li este folosită aici și ca o etichetă care definește elementele unei liste numerotate în HTML. O listă numerotată este o colecție de elemente numerotate. Tipul de numerotare este determinat de atributul type, care poate lua următoarele valori:

        • A - litere mari latine;
        • a - litere latine mici;
        • I - cifre romane majuscule;
        • i - cifre romane minuscule;
        • 1 - cifre arabe

        	1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate
        1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate	1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate
        1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate	1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate
        1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate	1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate
        1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate	1 articol de listă numerotat 2 elemente ale listei numerotate Al 3-lea element al unei liste numerotate

        De asemenea, este posibilă furnizarea unei liste numerotate, în care se realizează numerotarea elementelor ordine inversă, de exemplu: 3, 2, 1. Acest lucru se face folosind atributul de rezervă al etichetei ol.

        Există, de asemenea, opțiunea de a începe o listă cu marcatori de la orice număr, altul decât 1. Pentru a face acest lucru, puteți utiliza atributul start și nu contează la ce valoare este setat atributul de tip. Vedeți un exemplu de utilizare a atributului nume împreună cu sensuri diferite tip de atribut (1 și I):

        Liste de definiții HTML - etichete dl, dd, dt

        Un alt tip de listă html este o listă de definiții. Se formează după cum urmează. Conținutul acestei liste se află între etichetele dl de deschidere și de închidere, care formează containerul. Eticheta dt definește un termen, iar eticheta dd descrie acel termen.

        După cum puteți vedea, conținutul etichetei dt, care este un termen, este mutat la stânga, iar conținutul etichetei dd, care este o definiție acest termen, scris cu caractere cursive. Toate acestea se realizează prin utilizarea diverse stiluri css, despre care vom vorbi cu siguranță în publicațiile viitoare.

        Apropo, realitățile moderne sunt de așa natură încât limbajul html nu poate fi considerat izolat, de aceea, pentru a nu rata aceste materiale importante, abonează-te la actualizările blogului prin RSS sau prin e-mail. Aceasta încheie subiectul articolului de astăzi, dacă ați primit informatie necesara, nu refuzați să utilizați butoanele rețelelor sociale.

        O zi buna!

        În acest articol, veți afla despre toate posibilitățile listelor, veți înțelege cum să faceți o listă numerotată și etichete principale care vă vor ajuta să transformați o listă simplă cu marcatori într-una mai interesantă și mai vizibilă cu marcatori arbitrare. După finalizarea lecției, veți înțelege unde sunt utilizate listele și în ce circumstanțe pot fi utilizate.

        Acest articol este al treilea din acest curs scurt despre Bazele HTML. Inainte de a citi această lecție Vă recomand să treceți prin cele două anterioare:

        Articolul tocmai a început și puteți observa deja utilizarea unei liste standard cu marcatori. Pe site-ul meu pare destul de simplu: în stânga există mică adâncime cu marcator linie și pătrat. Mai târziu în articol vom analiza în detaliu ce tipuri de marcatori există, cum să faci numere și, de asemenea, cum să-ți faci propriul marcator.

        În fiecare parte a articolului, crearea anumitor liste va fi însoțită de explicații detaliate pentru inserarea unei anumite liste.

        1. Liste cu marcatori în HTML

        Acest tip de listă este folosit pentru a enumera în text un set de elemente care au sens similar. Aceasta ar putea fi o listă de link-uri care au legătură cu același subiect, o explicație detaliată pentru piese individuale text. Dar să vedem cum arată listele cu marcatori în cod:

        Și așa arată în browser:

        Orez. 1.1. Vizualizare standard a listei neordonate HTML cu marcatori în browser

        1.1 Marcatori standard pentru listele cu marcatori

        În imaginea de mai sus (Figura 1.1.) puteți vedea cercurile de la începutul fiecărui element de meniu. Acesta este markerul. În mod implicit, apare ca un cerc umplut în browser. Există mai multe tipuri de marcatori în HTML: cerc umplut, cerc golși pătrat. Nu necesită nici un CSS sau imagini de la terți:

        1.2 Marcator de listă sub forma unui cerc gol

        Știți valorile atributelor, dar acum să vedem cum să faceți o listă cu marcatori HTML în cod. Din tabelul de mai sus, am ales a doua valoare „cerc” pentru atributul tip și am stabilit-o în lista noastră cu marcatori:

        <html> <cap> <titlu > Exemplu de listă cu marcatori cu un marcator cerc gol</titlu> </cap> <corp > <p> Stele:</p> <ul type = „cerc” > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Soare</li> </ul> </corp> </html>

        Să vedem imediat cum va arăta acest cod în browser:

        Orez. 1.2. Vedere a unui marcator de listă ca un cerc în browser

        1.3 Marcator de listă sub formă de pătrat

        Să ne uităm și la ultimul exemplu cu un marcator pătrat pentru o listă HTML:

        Atenție la marcaj, acesta a devenit pătrat:

        Orez. 1.3. Vedere a unui marcator de listă ca un pătrat în browser

        Notă importantă: Această metodă nu mai este folosită pentru a crea stiluri pentru listele cu marcatori. Există o separare clară între CSS (citiți ce este CSS) și HTML. HTML este pentru marcaj și CSS pentru crearea unui aspect atractiv.

        Codul care conține acest atribut atunci când se specifică tipul de document curent ca HTML5 (""), va da o eroare în timpul validării. Dacă nu ați auzit ce este validarea, atunci acesta este locul pentru dvs.

        Eroarea va fi după cum urmează:

        Orez. 1.4. Eroare la validator la utilizarea atributului „type” al unei liste

        Am aranjat listele cu marcatori. Acum să trecem la liste numerotate, apoi să ne uităm la liste imbricate și mai multe exemple gata făcute, care sunt folosite cel mai des pe site-uri reale.

        2. Liste numerotate în HTML

        Spre deosebire de tipul anterior de liste, listele numerotate au una caracteristică importantă: Le numerotează automat. Acest lucru este util atunci când trebuie să numerotați lista mare. Făcând-o manual, va dura mult timp și tot poți fi confuz. O listă numerotată este specificată folosind eticheta. Cum arată în practică:

        Exemplu de listă numerotată:

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

        <html> <cap> <titlu > Exemplu de listă numerotată standard</titlu> </cap> <corp > <p> De la unu la cinci:</p> <ol > <li > Primul</li> <li > Al doilea</li> <li > Al treilea</li> <li > Al patrulea</li> <li > a cincea</li> </ol> </corp> </html>

        Iată cum arată o listă numerotată: setări standard in browser:

        Orez. 2.1. Lista numerotată în browser cu setări standard

        La fel ca predecesorul său (lista de marcatori), are propriile stiluri de afișare a numerelor. Numerotarea regulată nu este singurul tip de marcatori pentru o listă numerotată în HTML.

        2.1 Marcatori standard pentru liste numerotate

        Aici avem de ales nu dintre trei tipuri de markere, ci dintre cinci:

        Numele markerului	valoarea atributului „type”.	Exemplu de listă
        Marcatori sub formă de numere arabe	1	Badminton Baseball
        Marcatori ca litere mici litere latine	A	Chomolungma Chogori Kanchenjunga
        Marcatori sub formă de litere latine majuscule	A	Summit Plummet Aleea Tantrumului Nebun
        Marcatori cu cifre romane minuscule	i	Marea Filipinelor Marea Arabiei mare de corali
        Marcatori cu cifre romane majuscule	eu	roșu Verde Albastru

        2.2 Numerotare proprie în lista HTML

        Pe lângă rezultatul obișnuit al unei liste numerotate, ne putem începe numerotarea de la orice număr. Pentru a face acest lucru, trebuie să setați atributul suplimentar „start” . Această numerotare funcționează pe toate tipurile de marcatori pentru liste numerotate. Cum arată în practică:

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

        <html> <cap> <titlu > Numerotare personalizată pentru o listă numerotată</titlu> </cap> <corp > <p>Începem să numărăm de la douăsprezece:</p> <ol tip = "a" start = "12" > <li > Doisprezece</li> <li > Treisprezece</li> <li > Paisprezece</li> <li > Cincisprezece</li> <li >Şaisprezece</li> </ol> </corp> </html>

        Iată cum va apărea pe site-ul real:

        Orez. 2.2. Numerotarea dintr-un număr arbitrar dintr-o listă numerotată

        În imaginea de mai sus, am numerotat lista începând de la douăsprezece, făcând în același timp marcaje sub formă de litere latine mici. Acum, cred, a devenit clar cum să utilizați aceste atribute în proiectele dvs.

        Ei bine, acum să trecem la atașamente liste HTML.

        3. Cum să faci o listă cu mai multe niveluri (imbricate) în HTML

        Listele cu mai multe niveluri sunt folosite pe site pentru a construi meniuri. Acest meniu pare de cele mai multe ori să fie fie un meniu derulant în jos (lecție activată), fie un meniu vertical la stânga sau la dreapta. Astfel de meniuri vă permit să stocați alte elemente de meniu într-o formă compactă.

        Folosind modele de mașini ca exemplu, vom construi o listă pe mai multe niveluri în HTML:

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

        <html> <cap> <titlu > Lista marcatoare imbricate HTML</titlu> </cap> <corp > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </corp> </html>

        Observați cum arată lista cu mai multe niveluri în browser:

        Orez. 3.1. Exemplu de listă cu mai multe niveluri în HTML

        Am făcut o listă cu mai multe niveluri folosind marcatori (tag

        ). O listă pe mai multe niveluri cu modele Citroen a apărut cu alți markeri. Lista principală are marcatoare pline, iar lista de nivel 2 are cercuri goale. Dar, după cum vă amintiți, folosind atributul „type” putem redefini markerii (este mai bine să setați ).

        Dar ne putem uni liste cu mai multe niveluri numerotate și marcate după cum urmează:

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

        <html> <cap> <titlu > Liste numerotate, marcate și cu mai multe niveluri în HTML</titlu> </cap> <corp > <ul > <li > Primul grup de lalele<ol > <li > Clasa întâi<ul > <li > Lalele timpurii simple</li> </ul> </li> <li > Clasa a doua<ul > <li > Lalele Terry</li> </ul> </li> </ol> </li> </ul> </corp> </html>

        În exemplul de mai sus avem cuib dublu (2 nivele). În primul rând, este inclusă o listă cu două clase de lalele; Apoi, o listă cu marcatori este imbricată în fiecare dintre elementele din lista numerotată.

        Să vedem cum arată în browser:

        Orez. 3.2. Exemplu de listă numerotată cu mai multe niveluri la o listă cu marcatori în browser

        4. Materiale utile pe listele HTML

        Acestea sunt informații care necesită înțelegerea proprietăților CSS. Pentru a face acest lucru, recomand să studiați următoarele lecții: . Toate exemplele vor fi imediat cu cod sursași sunt împărțite în file HTML (structură), CSS (stiluri) și Rezultate (rezultat).

        4.1 Cum se transformă o listă HTML într-un șir

        Conversia unei liste HTML într-un șir poate fi necesară atunci când creați un meniu orizontal. Este foarte ușor de făcut:

        4.2 Cum se face o listă HTML fără pictogramă

        Proprietatea list-style-type din CSS este responsabilă pentru aceasta (mai multe detalii):

        4.3 Cum să centrați o listă în HTML

        Un element de listă este element bloc, deci trebuie centrat folosind marginile. Dar există unul punct important— trebuie să specificăm în mod explicit lățimea pentru ca alinierea să funcționeze:

        4.4 Cum se face o listă în HTML cu imagini

        Este suficientă o singură proprietate CSS, list-style-image . În interiorul adresei URL, specificați adresa înaintea pictogramei. Vreau doar să remarc că este mai bine să selectați imediat o imagine mică, deoarece înălțimea liniei de listă depinde de aceasta:

        4.5 Lista cu marcatori HTML marcatorul dvs

        În acest caz, trebuie să conectați pictogramele fonturilor în avans (de exemplu, FontAwesome ). Apoi puteți crea orice pictogramă în loc de un marcator standard:

        4.6 Cum se face o listă în HTML în mai multe coloane

        Pentru a face o listă în mai multe coloane, vom folosi proprietatea CSS column-count (proprietatea este acceptată numai în următoarele browsere: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). De asemenea, trebuie să setați înălțimea listei pentru a vedea împărțirea în mai multe coloane:

        5. Exersați lucrul cu liste

        În videoclipul de mai jos puteți vedea toate lucrările cu liste HTML în practică:

        Î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 unele în altele, 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 numerotat din listă are un marcator unic care indică ordinea apariției din acest alineat raportat la alte 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

        , în interiorul căruia se află elementele de listă cu date. Fiecare element din listă este indicat folosind o etichetă
        1. :

           Lista numerotata:

           1. Cafea
           2. Ceai
           3. Lapte
           Încerca "

           Notă: etichetă

           poate conține doar etichete ca elemente copil
           1. , adică tot conținutul listei numerotate trebuie plasat în interiorul elementelor
           2. . Etichetă
           3. , 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

              , în interiorul căruia se află elementele listei în sine (ca și în cazul listelor numerotate, 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 markere:

                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 utiliza proprietate CSS m 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:

                Lista numerotata cu atributul type="a":

                1. Merele
                2. Banane
                3. Lămâi

                Lista numerotata cu atributul type="I":

                1. Merele
                2. Banane
                3. Lămâi

                Tipuri de marcatori de listă cu marcatori:

                • Merele
                • Banane
                • Lămâi
                • Merele
                • Banane
                • Lămâi
                Încerca "

                Proprietatea CSS de tip listă, în plus față de tipurile de marcatori pentru listele cu marcatori, are multe tipuri variate marcatoare și pentru liste numerotate. Dar nu întotdeauna aceleași schimbări vedere standard un marker pe altul este suficient pentru a face o listă frumos. 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. Folosind HTML Acest lucru nu va funcționa, așa că va trebui să utilizați CSS.

                A crea 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.

                Lista numerotata

                1. Merele
                2. Banane
                3. 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.

                Cum să transformi o listă orizontală în meniu orizontal, poti sa vezi .