Eticheta ol este folosită pentru implementare. Exemple de design elegant al listelor ul li CSS

Acasă / Instalarea dispozitivului

Bună ziua, dragi cititori ai blogului. Astăzi, ca parte a acestei secțiuni, vreau să vorbesc despre o varietate de liste HTML care pot fi create pe baza etichetelor UL, OL, LI și DL special concepute. Perechile UL și LI creează liste cu marcatori, perechile OL și LI creează liste numerotate, iar elementele DL, DT și DD creează așa-numitele liste de definiții. De asemenea, vom lua în considerare pe scurt principiile creării structurilor imbricate.

Aș dori să vă reamintesc că am reușit deja să vorbim despre elementele de bază ale modernului, precum și despre aspectul tabelar (). În plus, am atins elementele de bază și am învățat.

Liste de marcatori bazate pe etichetele UL și LI

Eticheta UL este folosită pentru a crea liste cu marcatori, iar eticheta OL este folosită pentru a crea liste numerotate. Aceste etichete sunt etichete perechi și bloc, la fel ca elementul LI.

Între etichetele de deschidere și de închidere sunt elemente individuale de listă, care, la rândul lor, sunt incluse într-un element LI de deschidere și de închidere. Sus și jos liste HTML Browserul adaugă indentare la o singură linie, similar cu indentarea creată de o etichetă de paragraf.

Să ne uităm, de exemplu, la o opțiune cu marcatori care ar putea arăta astfel:

Prima linie
Doilea
Ultimul element

Doar elementele LI pot fi în interiorul etichetelor UL de deschidere și de închidere, iar în cadrul acestor elemente (clauze) în sine puteți introduce orice conținut (text, imagini, titluri, paragrafe, link-uri și chiar alte liste).

Aceste. UL servește doar pentru a oferi o listă cu marcatori (neordonată) și tot ce veți vedea pe pagină webîn cadrul acestuia, este implementat folosind conținutul elementelor LI.

Pentru UL, puteți modifica tipul de marker specificând valori diferite pentru atributul „Tip”. Dacă „Tipul” (controlul aspectului marcatorilor) pentru elementul UL nu este specificat, atunci aspectul implicit al marcatorului va fi afișat (disc - un cerc umplut cu culoarea textului):

În exemplele de mai sus, am specificat atributul „Tip” în elementul UL folosind acest tip markere pentru toate articolele. Dar atributul „Tip” poate fi specificat și pentru fiecare etichetă LI individuală, setând propriul tip de marcator pentru acest articol.

Exemplu de listă cu marcatori cu diverse tipuri marker pentru fiecare articol:

Marker sub forma unui disc umplut
Marker sub forma unui disc nevopsit
Pătrat

Liste numerotate în Html pe baza etichetei OL

Pentru a crea o listă numerotată, se folosesc etichete OL, în cadrul cărora vor fi din nou localizate elemente LI. OL și LI, așa cum am menționat deja, sunt bazate pe blocuri (adică tind să ocupe tot spațiul disponibil în lățime) și nimic, cu excepția elementelor LI, nu poate fi plasat în interiorul OL.

Se pare că OL și UL sunt etichete de serviciu care sunt necesare doar pentru a indica browserului ce tip de listă creăm (marcate sau numerotate). În cazul unui articol numerotat, în stânga fiecărui articol vom vedea nu un marcator, ci un număr și un punct în spatele lui:

Prima linie
Al doilea punct
A treia linie

După cum am menționat mai sus, elementele UL, OL și LI au capacitatea de a utiliza atributul TYPE. Vă permite să configurați tipul de marcator sau să specificați ce numere sau litere vor fi folosite pentru a numerota articolele din listă. Pentru o listă numerotată, parametrii acestui atribut pot lua următoarele valori:

- cifre romane minuscule;

Un exemplu de listă numerotată cu diferite tipuri de numerotare pentru fiecare articol:

numerotate cu cifre romane mari
Numerotarea cu litere mici latine
Numerotarea cu cifre romane mici

La crearea listelor numerotate, este posibil să începeți numerotarea nu de la unul, ci de la numărul specificat în atributul START. De exemplu:

Primul element al cărui număr este specificat în eticheta OL cu atributul start="23".
Următorul articol, cu un număr unu mai mare
Inca una

Pentru OL, puteți începe o nouă numerotare de la orice valoare, începând de la orice articol, prin scrierea atributului VALUE cu numărul necesar în LI de deschidere a acestui articol. De exemplu:

Primul punct cu numărul unu
Acest element va primi numărul specificat în atributul value="32".
Articol cu un număr mare

Proiectarea aspectului listelor în CSS ( foi de stil)

Dar de obicei acum aspect markerii sunt specificați nu prin atributul TYPE, ci pentru care sunt specificate proprietățile corespunzătoare.

Aici voi da doar un exemplu de marcatoare diferite pentru liste nenumerotate, al căror aspect este stabilit dosar separat cu foi de stil în cascadă.

Primul punct
Doilea
Dura

Dar despre asta vom vorbi în articolele următoare. Așa se stabilește aspectul markerilor UL pe acest blog. Imaginile sunt folosite ca marcatori: pentru articolele obișnuite ale unei liste nenumerotate - , pentru articolele imbricate ale unei liste nenumerotate - .

Liste speciale și imbricate în cod HTML

Al treilea și ultimul tip se numește „liste de definiții” și sunt specificate folosind trei etichete - DL, DT și DD. DL spune browserului că ceea ce urmează este o listă de definiții.

În mod obișnuit, acest tip este utilizat (sau a fost destinat să fie utilizat) pentru scrierea intrărilor de dicționar constând din termeni (închiși în etichete DT) și descrierile acestora (închise în etichete DD).

Primul mandat: Descriere
Al doilea mandat: Descrierea lui

Dacă te uiți la exemplul de mai sus, vei observa că elementul DD (descrierea termenului) este decalat (cu 40 de pixeli) față de elementul DT (termenul însuși).

În general, DL, DT și DD sunt etichete bloc și numai conținutul cu etichete inline poate fi inserat în interiorul unui element DT (se dovedește că elementele bloc ale titlurilor și paragrafelor nu pot fi utilizate în interiorul DT). Și în interiorul etichetelor DD puteți insera orice elemente, atât inline, cât și bloc.

Listă imbricatăîn Html este creat prin analogie cu unul simplu, dar în interiorul listei principale, unele dintre articole sunt din nou incluse în eticheta de deschidere și de închidere UL sau OL.

Vă rugăm să rețineți că LI-ul de închidere al articolului în care va fi creat elementul imbricat este plasat numai după întregul cod al listei imbricate (acest lucru este foarte important pentru afișare corectă pe pagina web). Lista imbricată ar putea arăta cam așa:

Primul paragraf al principalului numerotat
Al doilea punct
- Primul element din marcatori imbricați
- Doilea
- Al treilea și ultimul punct
Al treilea element numerotat

Mult succes pentru tine! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Cum să inserați un link și o imagine (foto) în etichetele HTML - IMG și A Selectare, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - etichete Formulare HTML liste derulante și câmp de text
Formulare HTML pentru site - etichete Form, Input and Select, Option, Textarea, Label și altele pentru crearea elementelor de formular web
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, ieșirea Yandex și alte programe
Încorporați și obiectați - Etichetă HTMLși pentru afișarea conținutului media (video, flash, audio) pe pagini web
Etichete de antet și atribute H1-H6, linie orizontală Hr, ruptură de linie Br și ruptură de paragraf P conform standardului Html 4.01
Tabele în HTML - etichete Table, Tr și Td, precum și Colspan, Cellpadding, Cellspacing și Rowspan pentru a le crea
Ce este limbajul de marcare hipertext HTML și cum să vizualizați o listă cu toate etichetele în validatorul W3C
Font (față, dimensiune și culoare), etichete Blockquote și pre - formatare a textului moștenit în HTML pur (nu este folosit CSS)
Iframe și Frame - ce sunt acestea și cum să folosiți cel mai bine cadrele în HTML
Img - Etichetă HTML pentru inserarea unei imagini (Src), alinierea și înfășurarea textului în jurul acesteia (aliniere), precum și setarea unui fundal (fundal)

Limbajul de marcare hipertext HTML are o etichetă

browsere moderne

Sintaxa etichetelor

Elementul #1

Elementul #2

Elementul #3

...

Acest cod se traduce într-o listă cu marcatori pe site:

Elementul #1
Elementul #2
Elementul #3

Etichetă

utilizare obligatorie

Pentru a forma elementele listei, se folosește o etichetă asociată. Î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.

Care poate fi conținutul unei liste cu marcatori?

Acesta poate fi o varietate de text, inclusiv cuvinte individuale, fraze și paragrafe, imagini, liste imbricate, bucăți de cod php și multe altele care necesită marcare simplă.

Fiecare element din listă cu marcatori este indentat implicit 40 de pixeli spre dreapta. Folosind Stiluri CSS, putem schimba afișajul această listă la propria discreție. Etichetă

Sunt permise atașamentele List-in-a-list.

De exemplu

Elementul #1

Elementul #2-1

Elementul #2-2

Elementul #2-3

Elementul #3

...

Atribute și proprietăți de etichetă

Atribut de etichetă utilizat pe scară largă

1. type="disc" - marker sub forma unui cerc umplut (această valoare este implicită). Exemplul de disc a fost puțin mai înalt.

2. type="cercle" - marker sub forma unui cerc transparent

De exemplu:

Elementul #1

Elementul #2

Elementul #1
Elementul #2

3. type="square" - marker sub formă de pătrat

De exemplu:

Elementul #1

Elementul #2

Și iată cum arată pe pagină:

Elementul #1
Elementul #2

În CSS, tipul marcator este specificat folosind atributul list-style-type:

...

Să ne uităm la ce valori poate lua tipul de listă:

disc - marcator sub formă de cerc (exemplul a fost mai sus)
cerc - marcator sub forma unui cerc transparent (exemplul a fost mai sus)
pătrat - marcator sub formă de pătrat (exemplul a fost mai sus)
zecimală - marcator sub forma unei liste numerotate cu cifre arabe: 1, 2, 3, ...
zecimal-leading-zero - un marcator sub forma unei liste numerotate în cifre arabe cu un zero înainte: 01, 02, 03, ...
inferior-roman - un marcator sub forma unei liste numerotate în alfabetul roman cu litere mici: i, ii, iii, iv, v
upper-roman - marcator sub forma unei liste numerotate în alfabetul roman cu majuscule: I, II, III, IV, V
low-latin - marcator sub forma unei liste în alfabetul latin cu litere mici: a, b, c, d, ...
upper-latin - marcator sub forma unei liste în alfabetul latin cu majuscule: A, B, C, D, ...
greacă inferioră - un marcator sub forma unei liste în alfabetul grecesc cu litere mici
Upper-grec - un marcator sub forma unei liste în alfabetul grecesc cu majuscule

Nota 2

Atributul poate fi atribuit etichetei în sine

. Când setați un atribut unei etichete

Codul arată astfel:

Elementul #1

Elementul #2

Elementul #3

Elementul #1
Elementul #2
Elementul #3

Schimbarea marcatorilor de etichete
folosind CSS

Elemente din lista marcatori create de etichetă

Elementul #1

Elementul #2

Elementul #3

Și așa arată pe pagină:

Elementul #1
Elementul #2
Elementul #3

C folosind CSS putem seta alte tipuri de afișare a markerului. Dar trebuie să rețineți că atunci când specificați orice stil pentru o etichetă

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

după cum se arată mai jos.

Primul punct
Al doilea punct
Al treilea punct

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

Exemplul 11.3. Creați o listă numerotată

Lista numerotata

Lucrul cu timpul

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

Rezultatul acestui exemplu este prezentat în Fig. 11.3.

Orez. 11.3. Vizualizare listă numerotată

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

Următoarele valori pot servi ca elemente de numerotare:

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

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

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

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

Exemplul 11.4. Numerotarea listei

numere romane

Regele Magnum XLIV
Regele Siegfried al XVI-lea
Regele Sigismund XXI
Regele Husbrandt I

Rezultatul acestui exemplu este prezentat în Fig. 11.4.

Orez. 11.4. Lista numerotata cu cifre romane

Listele pot fi numerotate sau nenumerotate.

Listele numerotate sunt scoase cu codul:

punctul 1
punctul 2
punctul 3

Listele nenumerotate sunt afișate cu următorul cod:

punctul 1
punctul 1
punctul 1

Fiecare articol din orice listă este inclus într-o etichetă li. Toate elementele din listă sunt incluse într-o etichetă comună ul sau ol. Stilurile acestor etichete sunt scrise în foaia de stil.

Fiecărei etichete i se atribuie stiluri de design specifice. Ele indică liniuțe din text.

Pentru o listă numerotată, stilurile de numerotare sunt specificate pentru fiecare articol.

Cifrele arabe standard sunt descrise prin valoarea zecimală.

list-style-type: zecimal; /*Numere arabe*/

Pentru o listă cu marcatori, specificați stilul caracterului - pătrate sau cercuri.

list-style-type: cerc; /*cercuri*/
list-style-type: pătrat; /*pătrate*/

Fiecărui element de meniu i se poate atribui o imagine.

list-style-image: url('calea către imagine');

De obicei, în șabloane, o listă numerotată este formatată cu numere simple, iar o listă nenumerată este formatată cu pătrate și cercuri negre. Este plictisitor și inexpresiv. Să reparăm asta.

Unde sunt stilurile de listă scrise în șablonul Twenty Eleven?

Deschideți fișierul style.css. Găsiți secțiunea numită /* Elemente text */

Codul standard arată astfel:

Cum se creează o listă numerotată?

Lista numerotată folosind fundal

Uită-te la acest design drăguț al listei numerotate.

Ca? Să repetăm.

Găsiți stiluri pentru eticheta ol. Adăugați-i proprietăți noi.

Ol ( padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; culoare: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; counter-reset: punct; ) ol li ( margin-bottom: 4px; line-height: 1,6; culoare: #2E2E2E; poziție: relativ; ) ol li:before ( margin-bottom: 4px; punct 1; înălțime de linie: 0px;

Pentru a înțelege unde și ce trebuie să schimbați pentru a se potrivi cu designul dvs., să descompunem acest cod bucată cu bucată.

list-style-type: niciunul; — dezactivează ieșirea numerelor standard
contraresetare: punct; — setează o variabilă pentru contorul de numerotare
poziție: relativă; — numerotarea locurilor lângă articolele în sine

înainte este un pseudo element pentru eticheta ol li. Are următoarele stiluri:
continut: contor(punct); — afișează valoarea unei variabile
contra-increment: punctul 1; — crește contorul cu 1
poziție: absolută;
fundal: #BDC3C7; — fundal pentru numere (fondul poate fi setat cu o culoare sau o pictogramă frumoasă
margine – margini externe
padding – căptușeală internă
culoare – culoarea textului elementului
fundal – fundal
text-align – alinierea textului
font-weight – grosimea fontului (saturație)

În stilurile dvs., puteți seta orice culori, aliniamente, dimensiuni de font și indentări.

Lista numerotată cu o imagine unică pentru fiecare articol

Un site pentru femei are liste numerotate foarte atractive.

Cum este implementat acest lucru? Să ne uităm la următorul cod:

/*primul număr*/ ol li:first-child ( list-style-image: url(calea către imagine cu numărul 1); ) /*al doilea număr*/ ol li:nth-child(2n) ( list-style- imagine: url(calea către imaginea cu numărul 2 ) /*al treilea număr*/ ol li:nth-child(3n) (list-style-image: url(calea către imaginea cu numărul 3); ) /* al patrulea număr */ ol li:nth-child(4n) ( list-style-image: url(calea către imagine cu numărul 4); ) /*În continuare scriem exact la fel doar pentru următoarele numere de articol*/

În codul pentru o astfel de listă numerotată, trebuie să enumerați toate numerele articolului și să atribuiți o pictogramă unică fiecăruia dintre ele.

Dacă utilizați până la 20 de articole numerotate în liste în articole, atunci trebuie să scrieți pseudo-clasa nth-child(An) de 20 de ori. Astfel încât ultimul din stiluri este pseudo-clasa nth-child(20n).

Găsiți liniile din fișierul de stiluri care descriu designul listei numerotate (etichete ol li).

Adăugați la ea pseudoclasa primului copil. Copiați și lipiți-l o dată, apoi schimbați această proprietate la nth-child(An) și copiați câte numere doriți pentru a avea propria pictogramă. Introduceți numerele articolului.

Pentru fiecare număr, adăugați proprietatea list-style-image cu propria pictogramă unică.

Dacă pictogramele de pe site sunt situate departe de elemente sau se suprapun, atunci trebuie să editați alinierea și indentarea pictogramelor digitale sau textul elementelor.

Cum se creează o listă cu marcatori (nenumerotate)?

Lista cu marcatori ul li cu pictograme alternative

Mi-a plăcut foarte mult această listă cu marcatori.

Ul ( padding: 11px 0 5px 0; ) ul li ( padding-stânga: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; culoare: #2E2E2E; line-height: 1,6; margin-bottom: 1px punctat #ccc; padding-bottom: 10px ul li:before (conținut: ""; poziție: absolut; lățime: 27px; înălțime: 24px; margine-stânga: -35px; fundal: url ("images/sprite.jpg") 0px 2px no-repeat list-style-type: circle ) ul li:nth-child(2n):before (conținut: ""; poziție: absolut; lățime: 27px; : 43px; margine-stânga: -35px fundal: url("images/sprite.jpg") 0px -17px no-repeat;

În loc de tipul de stil de listă standard, puteți atribui proprietatea „calea către pictogramă” - list-style-image:url. Dar apoi trebuie să specificați o marjă externă din stânga de la marginile site-ului - fără ea, pictogramele nu vor fi afișate și vor depăși zona de conținut.

Pentru experiment, puteți atribui indentări:

Ul li( list-style-image: url(images/radio.png); margin-left: 30px; )

Alternarea pictogramelor poate fi setată cu proprietatea nth-child(An). Exemplul de mai sus folosește pseudo-elementul înainte.

Codul conține o pseudo-clasă nth-child(2n). Valoarea sa este 2. Se dovedește că fiecare punct par îi corespunde unei alte pictograme. Dacă în loc de 2n scrieți 2n+1, atunci va apărea o altă pictogramă pe punctele impare.

Pentru fiecare element din listă, puteți specifica un caracter de subliniere. În exemplul de mai sus, punctele sunt subliniate cu linii punctate.

De asemenea, puteți atribui cadre, fundaluri și pictograme fiecărui element. Doar nu exagera. Scopul nostru nu este de a surprinde pe toată lumea cu un design elegant, ci de a îmbunătăți calitatea percepției conținutului.

Cum să afișați mai multe liste cu design diferite pe o pagină?

Uneori trebuie să plasați mai multe liste cu stiluri diferite.

Dacă atribuiți stiluri comune, atunci același design va fi atribuit tuturor listelor. Liste diverse poate fi afișat dacă atribuiți un ID separat etichetei ol sau ul și îl introduceți în modul html de editare a articolului. Ei bine, în fișierul de stil pentru acest id trebuie să scrieți stiluri separate.

Iată, de exemplu, o opțiune frumoasă de design de conținut:

În HTML veți scrie lista astfel:

punctul 1
punctul 2
punctul 3

În CSS ați scrie stiluri ca acesta:

Ol#sod( padding: 0px 20px 10px 51px; margine: 0.5em 0 0em 1em; culoare: #2E2E2E; list-style-type: none; fundal: #f1f4f5; chenar-stânga: #BDC3C7 4px solid; display: inline- block; ) ol#sod li() ol#sod li:before( font-weight:normal !important )

Noul stil diferă de cel principal în designul etichetei ol: fundal, stil de afișare, linie din stânga conținutului.

Folosind mai multe liste cu design diferit în text, veți face prezentarea informațiilor și mai interesantă. Când enumerați orice articole, puteți seta câteva pictograme, iar când enumerați acțiuni, puteți seta altele diferite. Aici designul este limitat doar de imaginația ta.

Aceste metode sunt aplicabile și în proiectarea elementelor de meniu, a titlurilor și a oricăror alte elemente ale site-ului.

Cum se creează linkuri de ancorare într-o listă de conținut?

Cum să le scriu în cod HTML? O bucată de cod încadrează ancora link-ului, iar o altă bucată de cod este plasată lângă locul unde trebuie să fim redirecționați când facem clic pe link.

Titlul 1
Titlul 2
Titlul 3

Și în textul articolului trebuie să scrieți asta:

Titlul 1… Titlul 2… Titlul 3…

Poate webmasteri mai experimentați mă pot corecta cu ceva. Pur și simplu sfătuiesc ceea ce am încercat în practică.

Dacă mai aveți întrebări, voi fi bucuros să le văd în comentarii.

Ageeva Veronica.

S-ar putea să fiți interesat și de:

Semnificație și aplicare

O listă numerotată (ordonată) este pentru articolele care apar într-o anumită ordine. O listă numerotată începe cu o etichetă

lista ordonata

(element de listă).

Suport pentru browser

Atribut			Operă		IExplorer	Margine
începe, tastează	Da	Da	Da	Da	Da	Da
inversat	Da	Da	Da	Da	Nu	Nu

Atribute

Atribut	Sens	Descriere
compact	compact	Nu este acceptat în HTML5. Specifică faptul că lista trebuie să fie mai mică decât dimensiunea normală (înălțimea liniei: 80%). Folosiți CSS în loc de acest atribut.
	inversat	Specifică că ordinea dintr-o listă numerotată (sortată) trebuie să fie descrescătoare. Atributul nu este acceptat browsere de internet Explorer și Edge.
început	număr	Definește valoarea de pornire a unei liste numerotate (ordonate). Valorile trebuie să fie numere întregi, sunt permise valori negative. Când este utilizat cu litere (tip = „A” și tip = „a”), numărul specificat în valoarea atributului este numărul ordinal al literei în alfabet. De exemplu, start = „4” se va potrivi cu litera "D" iar lista va începe cu ea. Când se utilizează valoarea start = "27", contorul este resetat la zero, iar lista devine din două cifre ("27" = "AA", "28" = "AB", "29" = "AC".. .).
tip	1 (implicit) A (mare) a (minuscule) eu (roman mare) i (roman mic)	Definește tipul de marcator care este utilizat la construirea unei liste numerotate (ordonate).

Exemplu de utilizare

Exemplu de utilizare a unei etichete <ol> <span>

Primul punctAl doilea punct
Al treilea punct

Va arata asa pe pagina:

Primul punct.
Al doilea punct.
Al treilea punct.

Dacă doriți ca lista să înceapă de la un anumit număr (nu de la 1), atunci trebuie să specificați atributul de început pentru etichetă

De exemplu:

Un alt atribut interesant este tipul , care vă va permite să specificați numerotarea alfabetică ("A" - majuscule, "a" - minuscule) sau numerotarea cu cifre romane ("I" - majuscule, "i" - minuscule).

Să ne uităm la un exemplu care prezintă toate valorile posibile pentru atributul tip (altele decât valoarea implicită):

Exemplu de utilizare a atributului type al unei etichete HTML<оl>

Primul punctAl doilea punct
Al treilea punct

Primul punctAl doilea punct
Al treilea punct

Primul punctAl doilea punct
Al treilea punct

Primul punctAl doilea punct
Al treilea punct

Vă rugăm să rețineți că este permisă crearea de liste numerotate (ordonate) imbricate în alte liste numerotate (în interiorul unui element de listă

):
Exemplu de listă numerotată imbricată într-o altă listă numerotată <span>
1. Primul punct
  1. Primul punctAl doilea punct
  2. Al treilea punct
  3. Al treilea punct

Liste de marcatori bazate pe etichetele UL și LI

Liste numerotate în Html pe baza etichetei OL

Proiectarea aspectului listelor în CSS ( foi de stil)

Liste speciale și imbricate în cod HTML

Atribute și proprietăți de etichetă

Schimbarea marcatorilor de etichete folosind CSS

Unde sunt stilurile de listă scrise în șablonul Twenty Eleven?

Cum se creează o listă numerotată?

Lista numerotată folosind fundal

Lista numerotată cu o imagine unică pentru fiecare articol

Cum se creează o listă cu marcatori (nenumerotate)?

Lista cu marcatori ul li cu pictograme alternative

Cum să afișați mai multe liste cu design diferite pe o pagină?

Cum se creează linkuri de ancorare într-o listă de conținut?

Semnificație și aplicare

Suport pentru browser

Atribute

Exemplu de utilizare

Alegerea editorului

Schimbarea marcatorilor de etichete
folosind CSS