Listele numerotate sunt o colecție de articole cu numerele lor secvențiale. Tipul și tipul numerotării depind de parametrii elementului
- , care este folosit pentru a crea lista. Următoarele valori pot fi folosite ca elemente de numerotare:
- Cifre arabe (1, 2, 3, ...);
- Cifre arabe cu zero înainte pentru cifrele 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ă.
- ... Orice număr întreg pozitiv poate fi specificat ca valoare. Nu contează ce tip de numerotare este setat, chiar dacă literele latine sunt folosite ca listă. Dacă atributele de început și valoare sunt aplicate listei î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. Renumerotarea unei liste
Liste - Ar trebui să aveți mare grijă de locul de muncă.
- Reglați iluminarea în cameră astfel încât sursa de lumină să fie în lateral sau în spatele operatorului.
- Pentru a evita complicațiile medicale, se recomandă alegerea unui scaun cu un scaun moale.
Primul element al listei din acest exemplu va începe cu cifra romană IV, deoarece este specificat atributul start = „4”, apoi urmează numărul V, iar ultimul element urmează din ordine și i se atribuie numărul X (Fig. . 1).
Orez. 1. Cifrele romane din listă
Scrierea numerelor
În mod implicit, o listă numerotată are o anumită formă: mai întâi există un număr, apoi un punct, iar apoi textul este afișat printr-un spațiu. Această formă de scriere este clară și convenabilă, dar unii dezvoltatori preferă să vadă un mod diferit de formatare a numerotării listelor. Și anume, în loc de punct, există o paranteză de închidere, așa cum se arată în Fig. 2 sau ceva asemanator.
Orez. 2. Vedere a unei liste numerotate cu o paranteză
Stilurile vă permit să schimbați modul în care listele sunt renumerotate utilizând proprietățile de conținut și de contraincrementare. În primul rând, trebuie să setați contra-resetarea: element pentru selectorul ol, acest lucru este necesar pentru ca numerotarea în fiecare listă nouă să înceapă de la capăt. Î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. În continuare, trebuie să ascundeți marcatorii inițiali prin proprietatea de stil list-style-type cu valoarea none.
Proprietatea de conținut funcționează de obicei împreună cu pseudo-elementele :: după și :: înainte. Deci, li :: before construction spune că un anumit conținut trebuie adăugat înainte de fiecare element al listei (exemplul 2).
Exemplul 2. Crearea propriei numerotari
Li :: înainte (conținut: contor (articol) ")"; / * Adăugați o paranteză la numere * / counter-increment: item; / * Setați numele contorului * /)
Proprietatea de conținut cu contorul de valoare (articolul) scoate un număr; adăugând o paranteză așa cum se arată în acest exemplu, obținem numerotarea necesară. contra-increment este necesar pentru a incrementa 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. Schimbarea vizualizării unei liste
Liste - Primul
- Al doilea
- Al treilea
- Al patrulea
În acest fel, puteți face orice fel de listă numerotată, de exemplu, luați un număr între paranteze drepte, în acest caz doar o singură linie se va schimba în stiluri.
Conținut: „[” contor (articol) „]”;
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ă, i se adaugă doar clasa selectată, să o numim chirilic (exemplul 4).
Exemplul 4. Cod pentru crearea unei liste
- unu
- Două
- Trei
Adăugarea de litere se face folosind pseudo-elementul :: before și proprietatea conținut. Deoarece fiecare rând trebuie să aibă propria sa literă, vom folosi pseudoclasa: nth-child (1), numărul literei este scris între paranteze. Prima literă, desigur, este A, a doua este B, a treia este C și așa mai departe. Acest întreg set este adăugat la selectorul li după cum urmează (exemplul 5).
Exemplul 5. Folosind pseudoclasa: nth-child
Chirilic li: nth-child (1) :: înainte (conținut: „a)”; ) .chirilic li: nth-child (2) :: înainte (conținut: „b)”; ) .chirilic li: nth-child (3) :: înainte (conținut: „în)”; )
În acest exemplu, fiecare literă este urmată de o paranteză, toate litere mici. Puteți defini propriul mod de numerotare a listei, de exemplu, poate conține litere mari 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, stabilim alinierea și poziția literelor, dacă se dorește, indicăm dimensiunea fontului, culoarea și alți parametri (exemplul 6).
Exemplul 6. Lista cu litere rusești
Listă - Ciorbă
- cotlet de stiuca
- Kulebyaka
- Ciuperci în smântână
- Clatite cu caviar
- Cvas
Rezultatul acestui exemplu este prezentat în Fig. 3.
O listă cu marcatori este definită prin adăugarea unui marcator mic în fața fiecărui element din listă, de obicei un cerc plin. Lista în sine este formată folosind un container
- , iar fiecare element din listă începe cu o etichetă
- așa cum se arată mai jos.
- Primul punct
- Al doilea punct
- Al treilea punct
Eticheta finală trebuie să fie prezentă în listă.
deși nu este obligatoriu, vă sfătuim să îl adăugați întotdeauna pentru a separa clar elementele din listă.
- Cheburashka
- Crocodilul Gena
- Shapoklyak
- Șobolanul Larissa
- Primul
- Al doilea
- Al treilea
- Primul
- Al doilea
- Al treilea
- Primul
- Al doilea
- Al treilea
- schimbarea credinței religioase (opțional: budism, confucianism, hinduism). Oferta speciala - Iudaism si Islam impreuna;
- o schimbare a credinței în infailibilitatea părții iubite;
- credința că extratereștrii există;
- preferinta pentru sistemul politic ca fiind cel mai bun de acest gen (optional: feudalism, socialism, comunism, capitalism).
- (LI - Item List). Etichetă
- nu are nevoie de o etichetă de capăt adecvată, deși prezența acesteia nu este în principiu interzisă. Browserele încep de obicei fiecare nou articol de listă pe o linie nouă atunci când afișează un document.
Informațiile furnizate sunt suficiente pentru a construi o listă elementară cu marcatori. Iată un exemplu de document HTML care utilizează o listă cu marcatori, care este afișată într-un browser, așa cum se arată în Fig. 2.1.
Exemplu de listă cu marcatori Semne zodiacale:
- Berbec
- Taurul
- Gemenii
- Fecioară
- cântare
- Scorpion
- Săgetător
- Capricornul
- Vărsător
- Pești
Orez. 2.1. Browser Afișează lista 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ă
Unele manuale HTML vă indică să utilizați eticheta container pentru a seta titlul listei.
(LH - Antet listă, antet listă). În prezent, această etichetă nu este recunoscută de niciunul dintre browserele principale și nu face parte din specificația HTML. Astfel, aplicarea sa devine lipsită de sens, deși nu va duce la erori. În etichetă
- pot fi specificați doi parametri: COMPACT și TYPE.
- .
Exemplu de înregistrare:
- .
Notă
Browserele au interpretări diferite pentru a specifica un tip de marcator pentru un articol individual din listă. Browserul Netscape modifică tipul de marcare pentru acesta și pentru toate cele ulterioare până când întâlnește o altă modificare a tipului de marcator. Internet Explorer modifică marcatorul numai pentru acest element.
Marcatori grafici de listă
Elementele grafice pot fi folosite ca marcatori de listă, care sunt utilizate pe scară largă pentru a crea documente HTML atractive, frumos proiectate. De fapt, o astfel de 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 înseamnă 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 etichetele altor tipuri de liste, considerate 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 deplasare la dreapta (indentată) cu o anumită sumă. Etichete
- care indică elementele individuale ale listei oferă marcatori standard pentru elementele listei.
Dacă trebuie să construim o listă cu marcatori grafici, atunci ne putem descurca complet fără etichete.
- ... Va fi suficient să inserați imaginea grafică dorită în fața fiecărui element din listă. Singura problemă care trebuie rezolvată în acest caz va fi 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 marcatori 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.
HTML acceptă trei tipuri diferite de liste, fiecare dintre ele având propria sa listă:
Liste numerotate
Într-o listă numerotată, browserul introduce automat numerele articolului în ordine, începând de la o anumită valoare (de obicei 1). Acest lucru vă permite să inserați și să ștergeți elemente din listă fără a întrerupe numerotarea, deoarece restul numerelor vor fi recalculate automat.
Listele numerotate sunt create folosind un element bloc
Etichetă- elementul 1
- punctul 2
- punctul 3
Elementele unei liste numerotate trebuie să conțină mai multe elemente de listă, așa cum se arată în exemplul următor:
Exemplu: Listă numerotată
- Incearca-l tu insuti "
Instrucțiuni pas cu pas
- Ia cheia
- Introduceți cheia în încuietoare
- Rotiți cheia cu două ture
- Scoate cheia din lacăt
- Deschide usa
Instrucțiuni pas cu pas
- Ia cheia
- Introduceți cheia în încuietoare
- Rotiți cheia cu două ture
- Scoate cheia din lacăt
- Deschide usa
Uneori, când te uiți la codurile HTML existente, vei întâlni argumentul tipîn element
- A - litere mari latine (A, B, C...);
- a - litere latine mici (a, b, c...);
- I - cifre romane mari (I, II, III...);
- i - cifre romane mici (i, ii, iii...);
- 1 - Cifre arabe (1, 2, 3...) (Utilizat implicit).
- in felul urmator:
-
În acest caz, numerotarea secvențială a listei va fi întreruptă și numerotarea va începe din acest punct, în acest caz de la șapte.
Un exemplu de utilizare a atributului valoare etichetă
În acest exemplu, „Primul articol din listă” ar fi numărul 1, „Al doilea articol din listă” ar fi numărul 7, iar „Al treilea articol din listă” ar fi numărul 8.
Formatarea listelor numerotate cu CSS
Pentru a modifica numerele listei, utilizați proprietatea tip-stil-listă Foi de stil CSS:
- ... Browserul indentează fiecare element din listă și afișează automat marcatori.
- Primul punct
- Al doilea punct
- Al treilea punct
- nu este necesar să plasați doar text, este permisă plasarea oricărui element de conținut în flux (linkuri, paragrafe, imagini etc.)
- este posibil să se creeze o listă imbricată sau o listă de nivel al doilea. Pentru a imbrica o listă, descrieți noua listă din interiorul elementului
- lista deja disponibila. Când imbricați o listă cu marcatori în alta, browserul schimbă automat stilul marcatorilor pentru lista de al doilea nivel. Orice listă poate fi imbricată în alta. Următorul exemplu demonstrează structura unei liste cu marcatori imbricate într-un al doilea articol numerotat.
- Incearca-l tu insuti "
- luni
- Trimite mail
- Vizită la editor
- Alegerea unei teme
- Design decorat
- Raport final
- Vizualizarea mesajelor de seară
- marţi
- Revizuiți programul
- Trimite imagini
- Miercuri...
- luni
- Trimite mail
- Vizită la editor
- Alegerea unei teme
- Design decorat
- Raport final
- Vizualizarea mesajelor de seară
- marţi
- Revizuiți programul
- Trimite imagini
- Miercuri...
- Incearca-l tu insuti "
- Cafea
- Cafea
- Cafea
- Cafea
- Cafea
- Lapte
- Cafea
- Lapte
- Cafea
- Lapte
- Cafea
- Lapte
- Incearca-l tu insuti "
- Taurul
- zodia Gemeni
- Berbec
- Taurul
- zodia Gemeni
- (din engleză Definition Term - un cuvânt definit, termen) și
- (din limba engleză Definition Description - descrierea termenului definit).
- Primul termen
- Descrierea primului termen
- Al doilea mandat
- Descrierea celui de-al doilea termen
- Incearca-l tu insuti "
- World Wide Web
- - din englezi. World Wide Web (WWW) este un sistem distribuit care oferă acces la documente interconectate situate pe diferite computere conectate la Internet.
- Internet
- - un set de rețele care utilizează un singur protocol de schimb pentru a transfera informații.
- Site
- - un set de pagini web individuale care sunt legate prin link-uri și un singur design.
- Badminton
- Baseball
- Chomolungma
- Chogori
- Kanchenjunga
- Vârful s-a prăbușit
- Aleea Tantrumului
- Nebun
- marea Filipinelor
- Marea Arabiei
- Marea coralilor
- roșu
- Verde
- Albastru
Stiluri pentru liste numerotate
Exemplu Sens Descriere a, b, c alfa inferior Litere mici A, B, C alfa superioară Litere mari i, ii, iii inferior-roman Cifre romane cu litere mici I, II, III sus-roman Cifre romane majuscule Exemplu: aplicarea unei proprietăți CSS tip-stil-listă
Liste cu marcatori
Listele cu marcatori sunt în esență similare cu listele numerotate, cu excepția faptului că nu conțin numerotarea secvențială a articolelor. Listele cu marcatori sunt create folosind un element de bloc
EtichetăÎn exemplul următor, puteți vedea că, în mod implicit, un mic marcator de cerc umplut este adăugat în fața fiecărui element din listă:
În interiorul etichetei
Liste imbricate
Orice listă poate fi imbricată în alta. Element interiorExemplu: liste imbricate
Formatarea listelor cu marcatori
Pentru a schimba aspectul marcatorului de listă, utilizați proprietatea tip-stil-listă Foi de stil CSS:
Următorul exemplu arată diferitele stiluri de liste cu marcatori:
Exemplu: Stiluri de listă cu marcatori
Disc:
Cerc:
Pătrat:
Nici unul:
Markere grafice.
HTML are capacitatea de a crea o listă cu marcatori grafici. Un lucru este atunci când marcatorii listei sunt cercuri sau pătrate standard și cu totul altul când dezvoltatorul însuși selectează marcatorul în conformitate cu designul paginii. Imaginile mici sunt adesea folosite pentru a face elementele din listă să arate frumos.
Pentru a înlocui un marcator obișnuit cu unul grafic, înlocuiți proprietatea tip-stil-listă pe proprietate listă-stil-imagineși specificați adresa URL a imaginii:Exemplu: markeri grafici
semne zodiacale
semne zodiacale
Liste de definiții (descriere).
Listele de definiții sunt foarte utile pentru a crea, de exemplu, vocabularul personal de termeni. Fiecare articol din lista de definiții are două părți: un termen și definiția acestuia.
Puneți întreaga listă într-un element
Listele de definiții sunt adesea folosite în publicațiile științifice, tehnice și educaționale, alcătuind cu ajutorul lor glosare, dicționare, cărți de referință etc.Structura generală a listei de descriere este următoarea:
Următorul exemplu arată una dintre posibilele utilizări pentru o listă de definiții:
Exemplu: Listă de definiții
World Wide Web - din engleză. World Wide Web (WWW) este un sistem distribuit care oferă acces la documente interconectate situate pe diferite computere conectate la Internet. Internetul este o colecție de rețele care utilizează un singur protocol de schimb pentru a transfera informații. Site-ul este un set de pagini web individuale care sunt legate prin link-uri și un singur design.
În mod implicit, textul termenului este apăsat în marginea stângă a ferestrei browserului, iar descrierea termenului este poziționată mai jos și deplasată la dreapta.
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ă, veți stăpâni etichetele care vă vor ajuta să faceți o listă simplă cu marcatori 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 scurt tutorial despre HTML de bază. Înainte de a citi această lecție, vă recomand să parcurgeți cele două anterioare:
Articolul tocmai a început și este posibil să observați deja utilizarea unei liste standard cu marcatori. Pe site-ul meu, pare destul de simplu: în stânga există o mică liniuță cu o linie și un marcator pătrat. În continuare, în articol, vom arunca o privire mai atentă la ce sunt markerii, cum să faci numere și, de asemenea, cum să-ți faci propriul marker.
Î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 liste este folosit pentru a enumera un set de elemente similare ca semnificație în text. Aceasta poate fi o listă de link-uri care au legătură cu același subiect, o explicație detaliată pentru părți individuale ale textului. 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 browser1.1 Marcatori standard pentru listele cu marcatori
În imaginea de mai sus (Fig 1.1.), puteți vedea cercurile de la începutul fiecărui element de meniu. Acesta este markerul. În mod implicit, este un cerc umplut în browser. Există mai multe tipuri de marcatori în HTML: cerc umplut, cerc gol și pătrat. Nu necesită CSS sau imagini de la terți:
1.2 Marcator de listă ca un cerc gol
Cunoașteți valorile atributelor, dar acum să vedem cum să faceți o listă cu marcatori HTML în cod. Din tabelul de mai sus, am selectat a doua valoare „cerc” pentru atributul tip și am atribuit-o listei noastre cu marcatori:
<html> <cap> <titlu> Un 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> Soarele</ li> </ ul> </ corp> </ html> Să vedem cum va arăta acest cod în browser:
Orez. 1.2. Vedere marcatori pentru o listă sub formă de cerc în browser1.3 Marcator de listă sub formă de pătrat
Să vedem și ultimul exemplu cu un marcator pătrat pentru lista HTML:
Observați marcatorul, acesta a devenit pătrat:
Orez. 1.3. Marcator pentru o casetă de listă ca un pătrat într-un browserNotă importantă: aceasta nu mai este folosită pentru stilarea listelor cu marcatori. Există o separare clară între CSS (citiți ce este CSS) și HTML. HTML este pentru marcaj și CSS pentru aspectul bun.
Codul care conține acest atribut, când se specifică tipul documentului curent ca HTML5 (""), va da o eroare în timpul validării. Dacă nu ați auzit ce este validarea, atunci ar trebui să mergeți aici -.
Eroarea va fi după cum urmează:
Orez. 1.4. Eroare la validator la utilizarea atributului „tip” al listeiNe-am dat seama de listele cu marcatori. Acum să trecem la liste numerotate, apoi ne vom uita la liste imbricate și câteva exemple gata făcute care sunt cel mai des folosite pe site-uri reale.
2. Liste numerotate în HTML
Spre deosebire de tipul anterior de liste, listele numerotate au o caracteristică importantă: adaugă automat numerotarea. Acest lucru este util atunci când trebuie să numerotați o listă mare. Va dura foarte mult timp manual, dar vă puteți pierde totuși. O listă numerotată este specificată folosind o etichetă. Cum arată în practică:
Un 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> Unu până 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ă cu setările implicite din browser:
Orez. 2.1. Lista numerotată într-un browser cu setări standardLa fel ca predecesorul său (lista cu marcatori), are propriile stiluri de afișare a numerelor. Numerotarea simplă nu este singurul tip de marcatori pentru o listă numerotată în HTML.
2.1 Marcatori standard pentru o listă numerotată
Aici avem de ales nu dintre trei tipuri de markere, ci dintre cinci:
Numele markerului Valoarea atributului „tip”. Exemplu de listă Marcatori cu cifre arabe 1 Marcatori sub formă de litere latine mici A Marcatori sub formă de litere mari latine A Marcatori cu cifre romane minuscule i Cifre romane majuscule eu 2.2 Numerotare personalizată în lista HTML
Pe lângă rezultatul obișnuit al unei liste numerotate, ne putem începe numerotarea de la orice cifră. Pentru a face acest lucru, trebuie să setați atributul suplimentar „start”. Această numerotare funcționează pentru 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 aleatoare pentru o listă numerotată</ titlu> </ cap> <corp> <p>Începem să numărăm la doisprezece:</ 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 se va afișa pe un site live:
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 marcatoare sub formă de litere latine mici. Acum, cred, a devenit clar cum să utilizați aceste atribute în proiectele dvs.
Deocamdată, să trecem la listele HTML imbricate.
3. Cum se face o listă multinivel (imbricată) în HTML
Listele pe mai multe niveluri sunt folosite pe site la construirea meniului. Acest meniu arată cel mai adesea ca un drop-down fie în jos (lecție activată), fie ca drop-down 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> Listă cu marcatori imbricată 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ă o listă pe mai multe niveluri într-un browser:
Orez. 3.1. Un exemplu de listă pe mai multe niveluri în HTMLAm făcut o listă pe mai multe niveluri folosind un marcator (tag
- ). Lista treptată cu modele Citroen a venit cu alte semne. Lista principală cu gloanțe pline și lista de nivel 2 cu cercuri goale. Dar, amintiți-vă, cu atributul „type” putem trece peste marcatori (este mai bine să le setăm).
Dar putem combina liste cu mai multe niveluri numerotate și marcate astfel:
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 numerotate î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 duble</ li> </ ul> </ li> </ ol> </ li> </ ul> </ corp> </ html> În exemplul de mai sus, avem cuib dublu (2 nivele). Mai întâi, punem o listă cu două clase de lalele, o avem numerotată. Apoi, o listă cu marcatori este imbricată în fiecare dintre elementele din lista numerotată.
Ne uităm la aspectul său în browser:
Orez. 3.2. Un exemplu de listă numerotată pe mai multe niveluri într-o listă cu marcatori într-un browser4. Resurse utile pentru liste HTML
Conține informații care necesită înțelegerea proprietăților CSS. Pentru a face acest lucru, vă recomand să studiați următoarele lecții:. Toate exemplele vor fi imediat cu codul sursă și defalcate în file HTML (structură), CSS (stiluri) și Rezultat (rezultat).
4.1 Cum se transformă o listă HTML într-un șir
Poate fi necesar să transformați lista HTML într-un șir atunci când creați un meniu orizontal. Este foarte simplu să o faci:
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ă faci o listă în HTML centrată
Un element din listă este un element bloc, deci trebuie să fie centrat folosind umplutură. Dar există un 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ă listă de proprietăți CSS-stil-imagine. Î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 HTML cu marcatori Listați marcatorul dvs
În acest caz, este necesar să conectați în prealabil pictogramele fonturilor (de exemplu, FontAwesome). Apoi puteți crea orice pictogramă în loc de marcatorul standard:
4.6 Cum se face o listă în HTML cu mai multe coloane
Pentru a face o listă cu mai multe coloane vom folosi proprietatea CSS column-count (această proprietate 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. Practica de lucru cu liste
În videoclipul de mai jos, puteți vedea toate lucrările cu liste HTML în practică:
Pentru consolidarea informațiilor primite, vă recomand să faceți toți pașii manual. Încercați diferite marcatori pentru liste, creați liste numerotate, apoi treceți la listele cu mai multe niveluri (imbricate) și experimentați cu ele.
Aici terminăm cu listele și trecem la următoarea lecție despre imagini.
Exerseaza mai mult!
Lecția 3. Cum să faci o listă în HTML 4.91 /5 (98.26%) 23 voturi
Aici: tastați sunt caracterele listei:
Dacă doriți ca lista să înceapă cu un alt număr decât 1, trebuie să specificați acest lucru folosind atributul start etichetă
Următorul exemplu arată o listă numerotată cu cifre romane mari și o valoare inițială de XLIX:Puteți începe numerotarea cu atributul valoare care se adaugă elementului
- care indică elementele individuale ale listei oferă marcatori standard pentru elementele listei.
Parametrul COMPACT este scris fără valori și este folosit pentru a instrui browserul să afișeze această listă într-un format compact. De exemplu, fontul poate fi redus sau distanța dintre liniile listei etc.
Notă
În prezent, prezența parametrului COMPACT în etichetă
- nu afectează în niciun fel 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ă. Tipul exact de marcator va depinde de browserul utilizat. Opțiunile tipice de afișare sunt următoarele:
TIP = disc - marcajele sunt afișate cu cercuri umplute; TIP = cerc - marcajele sunt afișate cu cercuri deschise; TIP = pătrat - marcatorii sunt afișați cu 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 și pătrat la al treilea și mai departe. 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, specificația HTML 4.0 specifică un contur pătrat pentru aspectul markerului afișat când TYPE = pătrat.
Parametrul TYPE cu aceleași valori poate fi utilizat pentru a specifica tipul de marcatori pentru elementele individuale ale listei. Pentru aceasta, parametrul TYPE cu valoarea corespunzătoare este permis să fie specificat în eticheta articolului din listă
- .
Ca aspect practic, principiile afișării articolelor din lista 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 mai jos.
Numerotarea listei
Este permisă începerea listei de la orice număr; atributul start al elementului este utilizat în acest scop
- sau valoarea elementului
Exemplul 11.1 oferă HTML pentru adăugarea unei liste cu marcatori la o pagină web.
Exemplul 11.1. Creați o listă cu marcatori
Rezultatul acestui exemplu este prezentat în Fig. 11.1.
Orez. 11.1. Vizualizare listă cu marcatori
Observați căptușeala din partea de sus, de jos și din stânga listei. Astfel de liniuțe sunt adăugate automat.
Markerii pot fi de trei tipuri: cerc (implicit), cerc și pătrat. Atributul tip al etichetei este folosit pentru a selecta stilul de marcare.
- ... Valorile admisibile sunt date în tabel. 11.1
| Tip de listă | cod HTML | Exemplu |
|---|---|---|
| Lista cu gloanțe sub formă de cerc | ||
| Lista cu gloanțe sub formă de cerc | ||
| Lista cu marcatori pătrați |
Aspectul markerilor poate varia ușor în diferite browsere, precum și atunci când se schimbă fontul și dimensiunea textului.
Crearea unei liste cu marcatori pătrați este prezentată în Exemplul 11.2.
Exemplul 11.2. Tip marker
Schimbarea convingerilor
Rezultatul acestui exemplu este prezentat în Fig. 11.2.
Unul dintre tipurile de liste implementate în HTML este o listă cu marcatori. În caz contrar, listele de acest tip se numesc neordonate sau neordonate. Cel din urmă nume 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).
O listă cu marcatori folosește caractere speciale numite marcatori de listă (numite adesea marcatori, care este pronunția formală a termenului englezesc bullet) pentru a-și evidenția elementele. Tipul de marcatori de listă este determinat de browser, iar atunci când se creează liste imbricate, browserele vor diversifica automat aspectul marcatorilor la diferite niveluri de imbricare.
Etichete și
Pentru a crea o listă cu marcatori, trebuie să utilizați o etichetă de container, în interiorul căreia se află toate elementele listei. Etichetele listei de deschidere și închidere furnizează fluxuri de rând î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ă
