Singura diferență este că această etichetă este făcută strict pentru listele de numerotare. Numele etichetei provine de la abrevierea engleză „Ordered List” – listă numerotată.
Sintaxa etichetei
- Elementul #1
- Elementul #2
- Elementul #3
- ...
Unde atributul tip = „valoare” poate lua următoarele valori
- A - stabilește marcatori 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 - precizează marcajele sub formă de cifre romane mici (i, ii, iii, iv ..);
- 1 (implicit) - specifică marcajele sub formă de cifre arabe (1, 2, 3 ..);
Atributul start = „valoare” stabilește valoarea inițială (valoarea de început) a raportului.
Atributul inversat specifică o numărătoare inversă (dacă este necesar).
Etichetă
- necesită utilizarea obligatorie a unei etichete finale
O etichetă asociată este utilizată pentru a forma elementele din listă
Notă
În interiorul listei, puteți schimba contul în al dvs. Pentru aceasta, există o valoare de atribut specială = "" pentru etichetă
- Elementul #1
- Elementul #2
- Elementul #3
Exemple cu liste numerotate în html ( )
Exemplul 1. Listă html numerotată sub formă de litere latine
Exemplu cu litere mari
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #1
- Elementul #2
- Elementul #3
Exemplu cu litere mici
- Elementul #10
- Elementul # 11
- Elementul #12
Așa arată pe pagină:
- Elementul #1
- Elementul #2
- Elementul #3
Exemplul 2. Lista html numerotata cu litere romane
Exemplu cu litere mari
- Elementul #1
- Elementul #2
- Elementul #3
Așa arată pe pagină:
- Elementul #1
- Elementul #2
- Elementul #3
Exemplu cu litere mici
- Elementul #1
- Elementul #2
- Elementul #3
Așa arată pe pagină:
- Elementul #1
- Elementul #2
- Elementul #3
Exemplul 3. html numerotat listează diferite poziții de start
Un exemplu care arată capabilitățile atributului start, care vă permite să setați valoarea de pornire a contorului.
- Elementul #1
- Elementul #2
- Elementul #3
Așa arată pe pagină:
- Elementul #1
- Elementul #2
- Elementul #3
Exemplul 4. Schimbarea contului în liste html numerotate
Mai jos este un exemplu cu capacitatea de a schimba valorile contorului folosind atributul value atunci când se afișează elemente noi în etichete
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #4
Așa arată pe pagină:
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #4
Exemplul 5. Lista numerotată reversibilă în html
Mai jos este un exemplu de listă numerotată inversă (numărând în ordine inversă).
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #4
Așa arată pe pagină:
- Elementul #1
- Elementul #2
- Elementul #3
- Elementul #4
Sarcină
Afișați o listă cu marcatori pe orizontală, fără marcatori.
Soluţie
Etichetă listă cu marcatori
- implicit scoate articole
- vertical unul deasupra celuilalt. Pentru a crea elemente de navigare, în unele cazuri, este convenabil să afișați lista pe orizontală. Există mai multe modalități de a obține această afișare a listei.
Ar trebui să știți deja că HTML conține elemente bloc și inline. Elementele inline nu își creează propriile blocuri, exemple de astfel de elemente sunt etichetele sau ... Elementele de bloc sunt afișate pe o linie nouă și creează un bloc dreptunghiular, un exemplu de astfel de etichete
sauDeci, eticheta
- este, de asemenea, un element bloc.
A eticheta
- nu se comportă ca un element de bloc, puteți folosi CSS pentru a-l face inline.
Proprietatea de afișare CSS este responsabilă pentru modul în care va fi afișat elementul în document. Să luăm în considerare trei dintre valorile sale (deși sunt mai multe):
- bloc - elementul este afișat ca bloc.
- inline - elementul este afișat ca inline.
- inline-block - element block-inline, citeste mai jos despre acest tip de element, il vom folosi.
Mai întâi, să creăm o listă orizontală prin conversia elementelor acesteia în elemente inline. În stilul CSS, vom scrie o regulă în care proprietatea de afișare este setată la selectorul li cu valoarea în linie.
Listați pe orizontală Deci, acest stil a funcționat și a primit elementele din listă pe orizontală:
Figura 1. Lucrarea exemplului # 1.
Această metodă are dezavantaje. Acest lucru se datorează faptului că elementele inline au unele limitări în comparație cu elementele bloc. De exemplu, nu li se poate da lățimea și înălțimea, dar cele bloc pot.
De exemplu, dorim ca elementul meniului pe care îl creăm să aibă o lățime de 150px și o înălțime de 40px. Să încercăm să schimbăm stilul în următorul, adică să adăugăm două reguli care stabilesc dimensiunea elementului de meniu:
Aceste modificări nu vor avea ca rezultat nicio modificare. Pentru ca elementele de meniu să fie poziționate orizontal și pentru a putea seta lățimea și înălțimea, acestea trebuie să fie setate la tipul de bloc inline. Să schimbăm codul exemplului nostru:
Listați pe orizontală Acest cod funcționează și modificările sunt vizibile:
Figura 2. Lucrarea exemplului #2. Dar pot exista diferite opțiuni, de exemplu, trebuie să afișam liste imbricate în meniu:
Listă imbricată. Iată rezultatul acestui cod:
Figura 3. Lucrarea exemplului №3. Vedem că blocurile nu sunt aliniate în înălțime așa cum ne-am dori. Desigur, puteți specifica aceeași înălțime pentru toate blocurile, dar nu știm întotdeauna valoarea exactă a acesteia dinainte și se poate modifica.
Dar de fapt, de ce se întâmplă asta?
Blocurile noastre au o proprietate de afișare setată la inline-block. Aceasta înseamnă că au calitățile atât ale elementelor bloc (capacitatea de a specifica lățimea și înălțimea) cât și ale elementelor inline. Ceea ce vedem este calitatea elementelor inline.
Să aruncăm o privire asupra unui șir cu caractere „A” de diferite dimensiuni:
A A A A A A A
Putem vedea că toate literele sunt aliniate vertical cu linia de jos. Mai exact, de-a lungul liniei de bază, dar acum nu vom intra în junglă. Așadar, același lucru s-a întâmplat cu blocurile noastre.
Proprietatea vertical-align este folosită pentru a alinia textul pe verticală. În exemplul nostru # 3, dorim să folosim valoarea top, care va alinia marginea de sus a elementului cu partea de sus a celui mai înalt element din rând.
Deocamdată, să-l aplicăm unui șir cu caractere „A” de diferite dimensiuni:
A A A A A A A
Se pare că literele „sar” puțin. Am setat chenarul CSS la cea mai înaltă literă, astfel încât să puteți vedea că de fapt nu există niciun salt, există un spațiu gol între chenarul de sus (de-a lungul căruia are loc alinierea) și punctul de sus al caracterului „A”.
Proprietatea vertical-align trebuie aplicată fiecărui element inline, nu este moștenită. Puteți citi mai multe despre această proprietate: vertical-align.
După această digresiune, vom continua să aranjam elementele din listă pe orizontală.
A doua cale
Puteți plasa elementele din listă orizontal utilizând proprietatea float. Această proprietate indică pe ce parte este aliniat elementul, are două poziții: stânga și dreapta.
Iată un exemplu folosind acest cod:
Listați pe orizontală Iată rezultatul codului:
Figura 4. Lucrarea exemplului. Exemplul pare să funcționeze. Dar există un avertisment în utilizarea acestei proprietăți. O să ne uităm acum. De exemplu, să luăm un cod în care există două liste orizontale cu moduri diferite de aranjare a elementelor pe orizontală: afișare și float:
Listați pe orizontală Iată rezultatul codului:
Figura 5. Lucrarea exemplului. În aceste exemple, lista containerelor
- au o margine roșie de 1 pixel. Dar lista de sus, care folosește proprietatea de afișare, include elementele listei. Dar elementele listei create folosind proprietatea float cad din containerul lor.
- sunt încă în afara containerului
-
.
- în locul unde se întâlneşte
- , browserul adaugă automat o întrerupere de linie;
- lista are liniuțe de sus și de jos;
- marcatorii sunt afișați implicit ca un cerc umplut;
- fiecare element al listei este deplasat la dreapta în raport cu textul principal.
- disc - markere sub formă de cerc umplut;
- cerc - marcatori sub forma unui cerc deschis;
- pătrat - marcatori pătrați.
- Sepulki
- Sepulcarie
- Sepulenie
- nu va funcționa, așa că trebuie să o rezolvi. Pentru a face acest lucru, ascundeți marcatorii de listă folosind proprietatea de stil listă cu valoarea none și în textul înainte de conținut.
- adăugați propriul nostru simbol folosind :: înainte de pseudo-element. În exemplul 2, triunghiul este folosit ca un astfel de marcator.
Exemplul 2. Utilizarea :: înainte
Liste - Sepulki
- Sepulcarie
- Sepulenie
Rezultatul acestui exemplu este prezentat în Fig. 2. Deoarece folosirea proprietății de stil listă cu valoarea none nu elimină deloc marcatorii, ci doar le ascunde din vedere, lista este deplasată la dreapta. Pentru a scăpa de această caracteristică, exemplul adaugă o proprietate negativă de indentare a textului. 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; el poate fi inserat direct în text. Principalul lucru este să salvați documentul în codificare UTF-8 și ca editorul să îl susțină. Simbolurile î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 imagine potrivită ca marcator prin proprietatea list-style-image. Valoarea este o cale relativă sau absolută către fișierul grafic, așa cum se arată în exemplul 3.
Exemplul 3. Utilizarea unei imagini ca marker
Liste - Sepulki
- Sepulcarie
- Sepulenie
Cel mai bine este să alegeți o cifră mică pentru a nu transforma elementele din listă în legende. În fig. 4 arată rezultatul exemplului de utilizare a imaginilor mici ca markeri.
Orez. 4. Desenul ca marker
Utilizarea list-style-image are câteva dezavantaje:
- desenul nu poate fi mutat în sus sau în jos;
- în diferite browsere, poziția imaginii în raport cu textul poate diferi.
Acest lucru poate fi evitat folosind proprietatea de fundal, care setează imaginea de fundal. Pentru fiecare articol din listă
- eliminăm marcajele originale și setăm imaginea de fundal fără a repeta. Și pentru ca textul să nu apară deasupra imaginii, îl deplasăm la dreapta prin padding-left (exemplul 4).
Exemplul 4. Utilizarea fundalului
Ul (margine-stânga: -1em;) li (stil listă: niciunul; fundal: url (imagini/bullet.png) fără repetare 0 2px; padding-left: 20px;)
Poziția textului și a marcatorului
Există două moduri de a poziționa marcatorul în raport cu text: marcatorul este mutat în afara chenarului elementelor din listă sau înfășurat în jurul textului (Fig. 5).
interior in afara Orez. 5. Amplasarea markerilor în raport cu textul
Proprietatea list-style-position este folosită pentru a controla poziția markerilor. Are două semnificații: exterior - marcatorii sunt plasați în afara blocului de text (acesta este implicit) și interior - marcatorii fac parte din blocul de text și sunt afișați în elementul din listă (exemplul 5).
Exemplul 5. Schimbarea poziției markerilor
Liste - Vă rugăm să verificați echipamentul inclus cu kitul 3BM înainte de a începe lucrul.
- În absența unuia sau mai multor dispozitive periferice, trebuie să contactați imediat personalul tehnic al VC.
- După inspecția vizuală a zonei de lucru, puteți porni cu atenție alimentarea 3BM.
Rezultatul acestui exemplu este prezentat în Fig. 6.
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 marcaj.
Î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 - Badminton
- Baseball
Marcatori sub formă de litere latine mici A - Chomolungma
- Chogori
- Kanchenjunga
Marcatori sub formă de litere mari latine A - Vârful s-a prăbușit
- Aleea Tantrumului
- Nebun
Marcatori cu cifre romane minuscule i - marea Filipinelor
- Marea Arabiei
- Marea coralilor
Cifre romane majuscule eu - roșu
- Verde
- Albastru
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 marcaje 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 suprascrie marcatorii (este mai bine să le setăm).
- Prima linie
- Al doilea
- Ultimul element
- - cerc umplut (implicit);
- - cerc deschis;
- - pătrat
- Un marker sub forma unui disc umplut
- Marker sub forma unui disc nevopsit
- Pătrat
- Prima linie
- Al doilea punct
- A treia linie
- - numerotarea se va efectua cu cifre arabe obișnuite (se va folosi implicit aceeași opțiune, în lipsa atributului „Tip”);
- - majuscule ca numerotare;
- - litere mici;
- - cifre romane majuscule;
- - cifre romane minuscule;
- cu numerotare cu cifre romane mari
- Numerotarea cu litere mici latine
- Cifre romane mici
- Primul element al cărui număr este specificat în eticheta OL prin atributul start = „23”.
- Următorul articol, cu un număr unu mai mare
- Inca unul inca
- Primul articol cu numărul unu
- Acest element va primi numărul specificat în atributul value = "32".
- Articol cu un număr mare
- Primul punct
- Al doilea
- Ultimul
- Primul termen
- Descriere
- Al doilea mandat
- Descrierea lui
- Primul paragraf al principalului numerotat
- Al doilea punct
- Primul element al marcatoarelor imbricate
- Al doilea
- Al treilea și ultimul paragraf etichetat
- Al treilea articol numerotat
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ă:
Salutare dragi cititori ai site-ului blogului. Astăzi, în cadrul acestui titlu, vreau să vorbesc despre o varietate de liste Html care pot fi create pe baza etichetelor special concepute UL, OL, LI și DL. Cu ajutorul perechii UL și LI se creează liste marcate, cu ajutorul OL și LI - numerotate, iar cu ajutorul elementelor DL, DT și DD se creează așa-numitele liste de definiții. De asemenea, ne vom uita pe scurt la principiile creării structurilor imbricate.
Vreau să vă reamintesc că deja am reușit, am reușit să vorbim despre elementele de bază ale modernului, precum și despre aspectul tabelului (). În plus, am atins elementele de bază, ei bine, am învățat prin intermediul.
Liste cu marcatori bazate pe etichetele UL și LI
Eticheta UL este folosită pentru a crea liste cu marcatori, iar OL este folosit pentru a crea liste numerotate. Aceste etichete sunt împerecheate și blocate, la fel ca elementul LI.
Articole separate din listă sunt situate între etichetele de deschidere și de închidere, care la rândul lor sunt închise într-un element LI de deschidere și de închidere. În partea de sus și de jos a listelor HTML, browserul adaugă indentare pe o linie, similară cu indentarea creată de o etichetă de paragraf.
Să vedem, de exemplu, o variantă cu marcatori care ar putea arăta astfel:
În interiorul etichetelor UL de deschidere și de închidere, pot fi doar elemente LI și deja în interiorul acestor elemente (articole) în sine, puteți insera orice conținut (text, imagini, titluri, paragrafe, link-uri și chiar alte liste).
Acestea. UL servește doar la organizarea unei liste cu marcatori (neordonate), iar tot ceea ce veți vedea pe o pagină web în interiorul acesteia este implementat folosind conținutul elementelor LI.
Pentru UL, puteți schimba tipul de marker scriind diferite valori pentru atributul „Tip” în el. Dacă „Tipul” (controlul aspectului marcatorilor) nu este specificat pentru elementul UL, atunci va fi afișat tipul de marcator implicit (disc - un cerc umplut cu culoarea textului):
În exemplele de mai sus, am scris atributul „Tip” în elementul UL, aplicând acest tip de marcatori tuturor articolelor. Dar atributul „Tip” poate fi atribuit fiecărei etichete LI individuale, setând propriul tip de marcator pentru acest articol.
Un exemplu de listă cu marcatori cu diferite tipuri de marcatori pentru fiecare articol:
Liste numerotate în HTML pe baza etichetei OL
Pentru a crea o listă numerotată se folosesc etichete OL, în interiorul cărora, din nou, vor fi amplasate elemente LI. OL și LI, așa cum am menționat deja, sunt bloc (adică tind să ocupe tot spațiul disponibil în lățime) și în interiorul OL nu se va putea plasa altceva decât elemente LI.
Se pare că OL și UL sunt etichete de serviciu care sunt necesare doar pentru a spune browserului ce fel de listă generăm (marcate sau numerotate). În cazul unuia numerotat, în stânga fiecărui element vom vedea nu un marker, ci un număr și un punct în spatele lui:
După cum am menționat mai sus, elementele UL, OL și LI au capacitatea de a utiliza atributul TYPE. Vă permite să personalizați tipul de marcator sau să specificați ce numere sau litere vor fi numerotate articole din listă. Pentru o listă numerotată, parametrii acestui atribut pot lua următoarele valori:
Un exemplu de listă numerotată cu diferite tipuri de numerotare pentru fiecare articol:
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:
Pentru OL, puteți începe o nouă numerotare de la orice valoare, începând de la orice articol, prin scrierea atributului VALOARE cu numărul necesar în LI de deschidere a acestui articol. De exemplu:
Liste de stiluri în CSS (Foi de stil)
Dar, de regulă, acum aspectul markerilor este setat nu prin atributul TYPE, ci pentru care sunt scrise proprietățile corespunzătoare.
Aici voi da doar un exemplu de marcatori diferite pentru liste nenumerotate, al căror aspect este stabilit printr-un fișier separat cu foi de stil în cascadă.
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-ul spune browserului că va urma o listă de definiții.
De obicei, acest tip este folosit (bine, sau se presupunea că va fi folosit) pentru scrierea intrărilor de dicționar, constând din termeni (închiși în etichete DT) și descrierile acestora (închiși în etichete DD).
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 de bloc, în plus, în interiorul unui element DT poate fi introdus doar conținut cu etichete inline (se dovedește că în interiorul unui DT nu se va putea folosi elemente de titlu și paragraf de bloc). Ș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 etichetele UL sau OL de deschidere și de închidere.
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șarea corectă a acestuia pe pagina web). Lista imbricată ar putea arăta cam așa:
Multă baftă! Ne vedem curând pe paginile site-ului blogului
puteți viziona mai multe videoclipuri accesând
");">
S-ar putea să fiți interesat
Cum să inserați un link și o imagine (foto) în etichetele HTML - IMG și A 
Formulare HTML pentru site - etichete Form, Input and Select, Option, Textarea, Label și altele pentru crearea elementelor formularelor web Selectare, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - Etichete HTML ale formularului derulant și casetă de text 
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, Yandex și alte programe 
Embed and object - Etichete HTML pentru afișarea conținutului media (video, flash, audio) pe paginile web 
Etichete și atribute ale titlurilor H1-H6, linie orizontală Hr, întrerupere de linie Br și paragraful 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
Figura 7. Lucrarea exemplului. În plus, în munca noastră nu știm întotdeauna ce element va urma celui care folosește float. Ideal ar fi inchiderea proprietatii float in acelasi bloc in care este deschisa.
Acest lucru se face folosind un pseudo-element. Iată codul:
Listați pe orizontală Acum avem cod de lucru 100%.
Figura 8. Exemplu de rulare. Această tehnică cu proprietatea float este de obicei folosită la codificarea site-urilor pentru a alinia coloanele care sunt create de etichete
... În acest fel, obținem construcția normală a stâlpilor cu alinierea la înălțime necesară. Când creăm un meniu, atunci, în cele mai multe cazuri, înălțimea blocurilor nu este importantă pentru noi, este aproape întotdeauna aceeași. Prin urmare, utilizarea regulii (display: inline-block) este destul de rezonabilă în aceste cazuri.Dar pentru a completa dezvăluirea subiectului, ne-am familiarizat cu toate opțiunile posibile aici. Deși pot exista și alte modalități, de exemplu, folosind tabelele CSS, motoarele de căutare recomandă cu tărie folosirea tabelelor numai în scopul propus, și nu pentru organizarea elementelor de navigare sau orice altceva.
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 o perioadă mică. Acest lucru atrage atenția cititorului asupra textului și crește lizibilitatea acestuia.
Cu element
- sunt asociate următoarele caracteristici:
Figura 1 prezintă rezultatul unui exemplu care ilustrează caracteristicile de mai sus ale unei liste cu marcatori.
Orez. 1. Vedere a listei cu marcatori
Tip marker
Markerii pot avea unul din trei tipuri: cerc umplut (implicit), cerc deschis și pătrat. Pentru a selecta tipul de marcator, utilizați proprietatea list-style-type sau stilul universal listă (exemplul 1). Se aplică următoarele valori:
Exemplul 1. Modificarea aspectului unui marker
Liste Exemplul arată cum să creați o listă cu marcatori folosind un pătrat solid și mic 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 caractere speciale care pot acționa cu succes ca o pictogramă marcator. „Înșurubați”-le direct
- în locul unde se întâlneşte
În același timp, la prima vedere, totul funcționează. Dar haideți să ne schimbăm listele. Să punem lista cu meniul clasei-1 în cod înaintea listei cu meniul clasei-2 (acum este mai jos).
Acesta este ceea ce obținem ca rezultat:
Figura 6. Exemplu de operare. Elementele din meniul de jos curg și în partea de sus a meniului, deoarece efectul proprietății float nu a fost anulat și se aplică tuturor elementelor ulterioare.
Cum se rezolvă această problemă?
Pentru a face acest lucru, trebuie să utilizați proprietatea clear, aceasta anulează fluxul elementului în jurul altui element, dacă acesta are proprietatea float setată.
Iată un exemplu modificat folosind proprietatea clear:
Listați pe orizontală Se vede că lista inferioară nu se mai lipește de cea superioară, elementele nu trec una peste alta. Dar în prima listă etichetele
- este, de asemenea, un element bloc.
