Eticheta ol în html înseamnă. Cum aranjez elementele din listă pe orizontală? Schimbarea marcatorilor de etichete cu CSS

Limbajul de marcare hipertext HTML are o etichetă

folosit pentru a crea liste cu marcatori. Este susținută de toată lumea browsere moderneși vă permite să afișați articole într-o ordine care nu necesită numerotare. De exemplu, afișează foarte des articolele de meniu și tot ce ține de listele de pe pagină: feluri de mâncare, produse, echipamente, unelte și multe altele care trebuie listate fără a indica prioritatea unuia sau acela.

Sintaxa etichetelor

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

Acest cod este convertit într-o listă cu marcatori pe site:

• Elementul #1
• Elementul #2
• Elementul #3

Etichetă

necesită utilizarea obligatorie a unei etichete finale
.

O etichetă asociată este utilizată pentru a forma elementele din listă. Între etichetele de deschidere și de închidere sunt cuvinte individuale, fraze, paragrafe, imagini, bucăți de cod și multe altele, care sunt conținutul unei liste cu marcatori.

Care poate fi conținutul unei liste cu marcatori?

Poate fi o varietate de texte, inclusiv cuvinte individuale, fraze și paragrafe, imagini, liste imbricate, bucăți de cod php și multe altele care necesită etichetare simplă.

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

este bazat pe blocuri, deci ocupă întreaga zonă disponibilă, limitată de marginea ecranului, cadrul tabelului sau alte elemente ale paginii.
Atașamentele din listă sunt permise

De exemplu

• Elementul #1
• • Elementul # 2-1
  • Elementul # 2-2
  • Elementul # 2-3
• Elementul # 3
• ...

Etichetați atributele și proprietățile

Atribut de etichetă utilizat pe scară largă

este un atribut de tip care indică cum va arăta marcatorul de listă. Poate lua următoarele valori

1. tip = „disc” - marcator sub forma unui cerc umplut (această valoare este implicită). Exemplul de disc era chiar mai sus.

2. tip = „cerc” - un marker sub forma unui cerc transparent

De exemplu:

• Elementul #1
• Elementul #2

• Elementul #1
• Elementul #2

3.tip = „pătrat” – un marker sub formă de pătrat

De exemplu:

• Elementul #1
• Elementul #2

Și așa arată pe pagină:

• Elementul #1
• Elementul #2
Nota 1

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

• ...

Să luăm în considerare ce valori poate lua tipul de listă:

• disc - un marker sub formă de cerc (exemplul a fost mai sus)
• cerc - un marcator sub forma unui cerc transparent (exemplul a fost mai sus)
• pătrat - un 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 - marcator sub forma unei liste numerotate în cifre arabe cu zero înainte: 01, 02, 03, ...
• inferior-roman - marcator sub forma unei liste numerotate în alfabetul roman cu litere mici: i, ii, iii, iv, v
• superior-roman - glonț sub forma unei liste numerotate în alfabetul roman cu litere mari: I, II, III, IV, V
• low-latin - un marcator sub forma unei liste în alfabetul latin cu litere mici: a, b, c, d, ...
• upper-latin - un 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 - marcator sub forma unei liste în alfabetul grecesc cu majuscule
Nota 2

Atributul poate fi atribuit ca etichetă în sine

și etichete
• ... Când setați un atribut unei etichete
  toate elementele din listă vor fi afișate așa cum indică atributul. Dar ne putem seta propriul afișaj la acest sau acel element. Exemplu din imagine:

  Codul arată astfel:

  • Elementul #1
  • Elementul #2
  • Elementul # 3

  • Elementul #1
  • Elementul #2
  • Elementul #3

  Schimbarea marcatorilor de etichete

  folosind CSS

  Elemente din lista cu marcatori create de Tag

  , poate fi marcat cu imagini arbitrare. CSS este folosit pentru a schimba tipul de marker. De exemplu

  • Elementul #1
  • Elementul #2
  • Elementul # 3

  Și așa arată pe pagină:

  • Elementul #1
  • Elementul #2
  • Elementul #3

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

  , se aplică tuturor elementelor listei.

  Salutare dragi cititori! Astăzi, ca o continuare a seriei de articole de la rubrica „Bazele html”, vreau să vă familiarizez cu algoritmul de creare liste html cu ajutor etichete ul și li (listă neordonată), ol și li (listă numerotată), dl, dt, dd (lista de definiții).

  Acum voi continua să vă fac cunoștință cu etichetele html cele mai des folosite, 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 este vorba, 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. Elementele din listă sunt situate între etichetele ul de deschidere și de închidere, conținutul fiecăreia dintre ele trebuie, la rândul său, să fie situat între etichetele de deschidere și de închidere. Imediat, observ că eticheta ul este împerecheată (prezența unei etichete de deschidere și de închidere), precum și bloc, adică formează un container care conține elemente (șiruri) care sunt formate de fiecare dată de eticheta li. În consecință, eticheta li este asociată și cu litere mici.

  Mod implicit aspect markerul este reprezentat printr-un cerc umplut. Cu toate acestea, îi puteți modifica aspectul aplicând atributul type, care are următoarele valori: disc, cerc, pătrat. Valoarea discului (care determină aspectul marcatorului de 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, fiecare marker element individual Puteți personaliza lista cu marcatori specificând valorile adecvate pentru atributul tip.

  Liste HTML numerotate - etichete ol și li

  Acum să vedem cum se formează o listă numerotată folosind etichete ol (etichete bloc și etichete pereche, similare cu ul). Eticheta li acționează și ca o etichetă care definește elementele listei html numerotate. O listă numerotată este o colecție de articole 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 dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată
  1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată	1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată
  1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată	1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată
  1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată	1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată
  1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată	1 articol dintr-o listă numerotată 2 articol dintr-o listă numerotată 3 articol dintr-o listă numerotată

  De asemenea, puteți furniza o listă numerotată în care articolele sunt numerotate în ordine inversă, de exemplu: 3, 2, 1. Acest lucru se face folosind atributul de rezervă al etichetei ol.

  De asemenea, este posibil să începeți o listă cu marcatori cu orice alt număr în loc de 1. Pentru a face acest lucru, puteți utiliza atributul start și nu contează deloc ce valoare a atributului tip este setată. Vedeți un exemplu de utilizare a atributului nume împreună cu diferitele valori pentru atributul tip (1 și I):

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

  Un alt tip de liste html este o listă de definiții. Se formează după cum urmează. Conținutul acestei liste este cuprins între etichetele dl de deschidere și de închidere care formează containerul. Eticheta dt definește un termen, iar dd este descrierea acelui 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 definiția acestui termen, este scris cu caractere cursive. Toate acestea se realizează prin utilizarea diferitelor stiluri css, despre care vom vorbi cu siguranță în publicațiile viitoare.

  Apropo, realitățile moderne sunt astfel încât limbaj html nu poate fi vizualizat în afara, așa că pentru a nu rata aceste materiale esențiale, abonați-vă la actualizarea blogului prin RSS sau prin e-mail. Aceasta încheie subiectul articolului de astăzi, dacă ați primit informatie necesara, nu refuzați să folosiți butoanele rețelelor sociale.

  liste HTML sunt folosite pentru a grupa informații înrudite. Există trei tipuri de liste:

  listă cu puncte —

  - fiecare element al listei
  • marcat cu un marker,
    lista numerotata —
    - fiecare element al listei
    1. marcat cu un număr,
       lista de definiții- - este format din perechi de termeni
       —
       definiție.

       Fiecare listă este un container care conține elemente de listă sau perechi termen-definiție. Elementele din listă se comportă ca elemente de bloc, stivuind una sub alta și ocupând întreaga lățime a blocului container. Fiecare element din listă are o casetă suplimentară pe partea care nu participă la aspect.

       Generarea listelor HTML

       1. Lista cu marcatori

       Listă cu puncte este o listă neordonată (din lista de neordonate în limba engleză)... Creat folosind o etichetă asociată

       ... Marcatorul unui element din listă este o etichetă, de exemplu, un cerc umplut.

       Browserele adaugă următoarea formatare în caseta de listă în mod implicit:

       Fiecare element din listă este creat folosind o etichetă pereche

    2. (din limba engleză articol de listă).
    disponibil.
    • Microsoft
    • Google
    • măr
    Orez. 1. Lista cu marcatori

    2. Lista numerotata

    Lista numerotata este creat folosind o etichetă asociată. Fiecare element de listă este, de asemenea, creat folosind elementul

  • ... Browserul numerotează automat elementele în ordine, iar dacă ștergeți unul sau mai multe elemente dintr-o astfel de listă, restul numerelor vor fi recalculate automat.

    Caseta listă are și stiluri implicite de browser:

  • este disponibil atributul valoare, ceea ce vă permite să schimbați numărul implicit pentru elementul din listă selectat. De exemplu, dacă pentru primul element din listă ați setat
  • , apoi restul numerotării va fi recalculată în raport cu noua valoare.

    Pentru etichetă

    sunt disponibile următoarele atribute:
    Tabelul 1. Atributele etichetei

    Atribut	Descriere, valoare acceptată
    inversat	Atributul inversat specifică afișarea listei în ordine inversă (de exemplu, 9, 8, 7 ...).
    start	Atributul start specifică valoarea initiala, de la care va începe numerotarea, de exemplu, construcția primului articol i se va atribui un număr de serie „10”. De asemenea, puteți seta tipul de numerotare în același timp, de exemplu, .
    tip	Atributul type specifică tipul de marcator de utilizat în listă (ca litere sau numere). Valori acceptate: 1 - valoare implicită, numerotare zecimală. A - numerotarea listei în ordine alfabetică, litere mari(A, B, C, D). a - numerotarea listei în ordine alfabetică, litere mici (a, b, c, d). I - numerotarea cu cifre romane majuscule (I, II, III, IV). i - numerotarea în cifre romane mici (i, ii, iii, iv).

    1. Microsoft
    2. Google
    3. măr
    Orez. 2. Lista numerotata

    3. Lista definițiilor

    Liste de definiții sunt create folosind eticheta

    ... Pentru a adăuga un termen, utilizați eticheta
    , și pentru a insera o definiție - eticheta
    .

    Caseta de listă cu definiții are următoarele stiluri implicite de browser:

    Pentru etichete

    ,

    și

    disponibil.

    Director:

    Petr Tochilin

    Distribuție:

    Andrei Gaidulyan

    Alexei Gavrilov

    Vitali Gogunsky

    Mariya Kozhevnikova

    
    Orez. 3. Lista definițiilor

    4. Lista imbricată

    Adesea, capacitățile listelor simple nu sunt suficiente, de exemplu, atunci când creați un cuprins, nu puteți face fără articole imbricate... Marcajul pentru lista imbricată ar fi următorul:

    • Paragraful 1.
    • Punctul 2.
      • Subclauza 2.1.
      • Subclauza 2.2.
        • Subclauza 2.2.1.
        • Subclauza 2.2.2.
      • Subclauza 2.3.
    • Punctul 3.

    
    Orez. 4. Lista imbricată

    5. Lista numerotată pe mai multe niveluri

    O listă cu mai multe niveluri este utilizată pentru a afișa elementele din listă la diferite niveluri, cu indentări diferite. Marcajul pentru o listă numerotată pe mai multe niveluri ar fi după cum urmează:

    1. paragraf
    2. paragraf
       1. paragraf
       2. paragraf
       3. paragraf
          1. paragraf
          2. paragraf
          3. paragraf
       4. paragraf
    3. paragraf
    4. paragraf

    Acest marcaj implicit va crea o nouă numerotare, începând cu una pentru fiecare listă imbricată. Pentru a face numerotarea imbricată, trebuie să utilizați următoarele proprietăți:
    counter-reset resetează unul sau mai multe contoare, setând o valoare de resetat;
    counter-increment specifică valoarea numărului de increment, i.e. cu ce pas va fi numerotat fiecare articol ulterior;
    continut - continutul generat, in acest caz este responsabil de afisarea numarului inaintea fiecarui articol din lista.

    Ol (/ * eliminați numerotarea standard * / list-style: none; / * Identificați contorul și numiți-l li. Valoarea contorului nu este specificată - implicit este 0 * / counter-reset: li;) li: înainte (/ * Definim elementul care trebuie numerotat - li. Pseudo-elementul înainte specifică că conținutul inserat folosind proprietatea conținut va fi plasat înaintea elementelor din listă. De asemenea, stabilește valoarea incrementului contorului (implicit este 1). * / Counter-increment: li; / * Proprietatea conținut afișează numărul contoarelor elementelor din listă () înseamnă că textul generat este valoarea tuturor contoarelor cu acest nume. O perioadă între ghilimele adaugă o perioadă de separare între numere și un se adaugă un punct cu un spațiu înainte de conținutul fiecărui element din listă * / conținut: contoare (li, ".") ".";)
    Orez. 5. Lista numerotată pe mai multe niveluri

  Să continuăm conversația noastră despre începuturile html-ului. În acest articol, vreau să vorbesc despre cum să creez paragrafe, liste și titluri în text. Și, de asemenea, despre etichetele unice
  și

  ---

  .

  Vă sfătuiesc cu tărie să citiți prima lecție din această serie, precum și un articol introductiv despre începerea învățării html pentru cei care nu sunt încă familiarizați cu acestea.

  Vom continua acum studiul etichetelor. Voi presupune că cititorul este deja familiarizat cu materialul articolelor de mai sus.

  Ca întotdeauna, planul de lucru:

  1. Paragrafe
  2. Rupere de linie
     
  3. Liste și articole din listă
  4. Titluri
  5. Rigle orizontale

     ---

  Paragrafe

  Textul este aproape întotdeauna alcătuit din paragrafe. Un paragraf este un element de text care poartă o idee completă.

  V paragraf html, după cum se poate aprecia din titlu, este indicat de. Litera „p” este luată din cuvântul „paragraf”, care înseamnă doar „paragraf”.

  Să luăm în considerare un exemplu:

  Textul primului paragraf. Conține gândirea. Dar gândul s-a încheiat.
  

  
  

  Un alt gând a început deja și îl scriem într-un alt paragraf.
  

  După cum puteți vedea, aplicarea paragrafelor este foarte simplă și nu necesită comentarii speciale. Dacă ne uităm la acest cod într-un browser, vom vedea două linii cu o linie goală între ele. În textele rusești, se obișnuiește să se separe un paragraf nu printr-o linie goală, ci prin deplasarea primului rând la dreapta. Dar pe Internet este adesea folosită o astfel de formatare, de aceea este adesea lăsată și în textele în limba rusă. Cu toate acestea, dacă acest comportament nu vă convine, îl puteți modifica folosind CSS.

  Rupere de linie
  

  Uneori trebuie să traduci un rând fără a încheia gândul, fără a închide paragraful. Adică, du-te la linie nouă... Există o singură etichetă pentru asta
  ... Iată un exemplu de aplicare a acestuia:

  Vântul merge vesel
  
  Și barca îndeamnă
  
  Aleargă spre sine în valuri
  Cu pânzele ridicate.
  

  Acest fragment dintr-o poezie de A.S. Pușkin ne-a ajutat să ilustrăm acțiunea etichetei
  ... Am plasat în mod deliberat ultimele două rânduri ale acestui catren într-o singură linie de cod pentru a arăta că liniile sunt împachetate pe o linie nouă nu pentru că am plasat rupturi de linie, ci pentru că am plasat etichete
  ... Această etichetă este foarte simplă și nu are nevoie de o explicație detaliată, așa că aici vom termina de discutat.

  Liste,

  și lista articole

  Uneori trebuie să enumerați ceva în text. În acest scop sunt folosite trei etichete: ul, ol, li. Toate aceste etichete sunt etichete de container, dar eticheta este întotdeauna conținută într-unul dintre containere sau și nu are sens în afara acestora. Containerul ul este folosit atunci când nu ne pasă de ordinea articolelor enumerate și nu vrem să ne concentrăm pe ordinea în care merg. Eticheta ol, pe de altă parte, se concentrează pe succesiunea elementelor numerotând automat fiecare linie. Să luăm în considerare un exemplu:

  
  
  • Bulka
  
  
  • Plăcintă
  
  
  • Pâine
  
  
  • Plăcintă
  
  

  Pe ecranul browserului, acest cod va arăta astfel:

  • Bulka
  • Plăcintă
  • Pâine
  • Plăcintă

  Dacă înlocuim eticheta ul cu eticheta ol, obținem o listă numerotată:

  
  
  1. Bulka
  
  
  2. Plăcintă
  
  
  3. Pâine
  
  
  4. Plăcintă
  
  

  Acum arată așa:

  1. Bulka
  2. Plăcintă
  3. Pâine
  4. Plăcintă

  Nimeni nu interzice imbricarea unei liste în alta, formând liste imbricate cu subliste:

  
  Instrumente:
  
  • A văzut
  
  
  • Şurubelniţă
    
    
    
    1. Drept
    
    
    2. Traversa
    
    
    
    
  
  
  • Burghiu
  
  

  Trebuie să experimentați puțin cu aceste liste pentru a vă obișnui să le folosiți. Există un alt tip de liste, dar este rar folosit, așa că nu voi vorbi despre el acum. Poate într-un alt articol.

  Desigur, ca orice altceva, aspectul acestor elemente poate fi schimbat dincolo de recunoaștere cu CSS.

  Titluri

  Desigur, paragrafele ajută la structurarea documentelor. Dar, pentru a împărți textul mare în părți logice mai mici, puteți subtitra fiecare dintre ele. Fiecare parte poate conține mai multe subpărți, cu propriile titluri de nivel inferior și așa mai departe. Pentru a seta titlul, utilizați etichetele , unde „x” este un număr de la 1 la 6. Cu cât numărul este mai mare, cu atât titlul este mai mic. Adică, titlul de nivel superior va fi h1, iar titlul cel mai de jos h6. În mod implicit, textul din aceste titluri este afișat cu font mare, indentat. Acest text este afișat pe întreaga linie, adică etichetele hx sunt bazate pe blocuri. Eticheta h1 are cel mai mare font, iar eticheta h6 are cel mai mic. De regulă, pe pagină există una, maximum - două etichete h1 de nivel superior. Pe măsură ce nivelul scade, numărul de etichete crește. Dar rareori un webmaster va putea descompune textul în așa fel încât să aibă nevoie de titluri de 5 sau 6 niveluri. Chiar și al 4-lea nivel este rar folosit.

  Vorbește mai puțin, lucrează mai mult!

  Element

  (din limba engleză „unordered list” - „unordered list”) creează o listă neordonată (neordonată). De obicei, elementul
  este folosit pentru a crea astfel de liste, unde modificarea ordinii elementelor din această listă nu schimbă semnificativ sensul listei.

  Etichetă

  se referă la elemente de bloc, deci va ocupa toată lățimea disponibilă, iar dimensiunea înălțimii va depinde de cantitatea de conținut.

  Elementele pentru listele numerotate sunt definite folosind eticheta

  • , care, pe lângă text, poate include și alte elemente HTML (liste, imagini, titluri, paragrafe etc.). În mod implicit, listele cu marcatori sunt afișate pe o pagină web ca o listă care începe cu un mic cerc negru. Browserele adaugă o mică marjă la stânga atunci când afișează elementele din listă.

    Notă: Dacă să

    aplicat proprietate CSS, apoi elementele
    • moștenesc aceste proprietăți.

      Sfat: Pentru a schimba tipul de marcator, utilizați proprietatea CSS list-style-type sau proprietatea list-style-image pentru a înlocui marcatorii cu imagini. Pentru a crea liste numerotate utilizați eticheta

      .

      Sintaxă

      ...
      • ...
      ...

      Etichetă de final

      Necesar.

      Atribute

      compact Depreciat în HTML5 Reduce indentarea și spațierea între rânduri. tip HTML5 Setează aspectul marcatorului de listă.

      Disponibil pentru acest articol atribute globaleși evoluții.

      Stil implicit

      Majoritatea browserelor vor reda elementul

      cu urmatoarele Valori CSS Mod implicit:

      Ul (afișare: bloc; tip listă-stil: disc; margine-sus: 1em; margine-jos: 1 em; margine-stânga: 0; margine-dreapta: 0; padding-left: 40px;)

      Diferențele dintre HTML 4.01 și HTML5

      Atributele compact și type nu sunt acceptate în HTML5.

      Exemplu de utilizare:

      Lista HTML neordonată:

      Exemplu HTML:

      Incearca-l tu insuti
      • Cafea
      • Ceai
      • Cacao

      Specificații (editare)

      Specificație	stare
      Standard de viață HTML WHATWG (WHATWG)	Nivel de trai
      HTML 4.01 (W3C)	Recomandare
      HTML5 (W3C)	Recomandare
      HTML 5.1 (W3C)	Recomandare

      Suport pentru browser

      Încercați singur - Exemple

      Cum să faci lista să înceapă cu un alt număr decât 1.