Kā lietot ul html. Kā novietot saraksta vienumus horizontāli? Kur saraksta stili ir ierakstīti veidnē Twenty Eleven

Hiperteksta iezīmēšanas valodai HTML ir tags

, izmanto, lai izveidotu sarakstus ar aizzīmēm. To atbalsta visi modernās pārlūkprogrammas un ļauj attēlot elementus tādā secībā, kam nav nepieciešama numurēšana. Piemēram, tajā ļoti bieži tiek parādīti izvēlnes vienumi un viss, kas saistīts ar sarakstiem lapā: ēdieni, produkti, aprīkojums, instrumenti un daudz kas cits, kas jāuzskaita, nenorādot konkrētas preces prioritāti.

Tagu sintakse

• Elements #1
• Elements #2
• Elements #3
• ...

Šis kods vietnē tiek pārvērsts sarakstā ar aizzīmēm:

• Elements #1
• Elements #2
• Elements #3

Tag

prasa obligāta lietošana noslēdzošais tags
.

Lai veidotu saraksta elementus, tiek izmantots pārī savienots tags. Starp sākuma un beigu tagiem ir atsevišķi vārdi, frāzes, rindkopas, attēli, koda daļas un daudz kas cits, kas ir aizzīmju saraksta saturs.

Kāds var būt aizzīmju saraksta saturs?

Tas var būt dažāds teksts, tostarp atsevišķi vārdi, frāzes un rindkopas, attēli, ligzdoti saraksti, php koda fragmenti un daudz kas cits, kam nepieciešama vienkārša atzīmēšana.

Katrs aizzīmētā saraksta vienums pēc noklusējuma ir ievilkts 40 pikseļus pa labi. Izmantojot CSS stili, mēs varam mainīt displeju šo sarakstu pēc saviem ieskatiem. Tag

ir balstīts uz blokiem, tāpēc tas aizņem visu tai pieejamo laukumu, ko ierobežo ekrāna mala, tabulas rāmis vai citi lapas elementi.
Ir atļauti saraksta pielikumi sarakstā.

Piemēram

• Elements #1
• • Prece #2-1
  • Elements #2-2
  • Elements #2-3
• Elements #3
• ...

Tagu atribūti un rekvizīti

Plaši izmantots tagu atribūts

ir tipa atribūts, kas norāda, kā izskatīsies saraksta marķieris. Var ņemt šādas vērtības

1. type="disc" - marķieris aizpildīta apļa formā (šī vērtība ir noklusējuma vērtība). Diska piemērs bija nedaudz augstāks.

2. type="circle" - marķieris caurspīdīga apļa formā

Piemēram:

• Elements #1
• Elements #2

• Elements #1
• Elements #2

3. type="square" - marķieris kvadrāta formā

Piemēram:

• Elements #1
• Elements #2

Un lūk, kā tas izskatās lapā:

• Elements #1
• Elements #2
1. piezīme

CSS aizzīmju veids tiek norādīts, izmantojot atribūtu list-style-type:

• ...

Apskatīsim, kādas vērtības var pieņemt saraksta stila tips:

• disks - marķieris apļa formā (piemērs bija iepriekš)
• aplis - marķieris caurspīdīga apļa formā (piemērs bija iepriekš)
• kvadrāts - marķieris kvadrāta formā (piemērs bija iepriekš)
• decimālzīme - marķieris numurēta saraksta veidā ar arābu cipariem: 1, 2, 3, ...
• decimāldaļas vadošā nulle - marķieris numurēta saraksta veidā ar arābu cipariem ar sākuma nulli: 01, 02, 03, ...
• apakšējā romiešu - marķieris numurēta saraksta veidā romiešu alfabētā ar maziem burtiem: i, ii, iii, iv, v
• augšromiešu - marķieris numurēta saraksta veidā romiešu alfabētā ar lielajiem burtiem: I, II, III, IV, V
• apakšējā latīņu valoda - marķieris saraksta veidā latīņu alfabētā ar maziem burtiem: a, b, c, d, ...
• augšējā latīņu valoda - marķieris saraksta veidā latīņu alfabētā ar lielajiem burtiem: A, B, C, D, ...
• apakšējā grieķu valoda - marķieris saraksta veidā grieķu alfabētā ar maziem burtiem
• augšējā grieķu valoda - marķieris saraksta veidā grieķu alfabētā ar lielajiem burtiem
2. piezīme

Atribūtu var piešķirt pašam tagam

un tagus
• . Iestatot atzīmei atribūtu
  visi saraksta vienumi tiks parādīti, kā norādīts atribūtā. Bet mēs varam piešķirt šim vai citam elementam savu displeju. Piemērs attēlā:

  Kods izskatās šādi:

  • Elements #1
  • Elements #2
  • Elements #3

  • Elements #1
  • Elements #2
  • Elements #3

  Tagu marķieru maiņa

  izmantojot CSS

  Aizzīmju saraksta vienumi, kas izveidoti ar tagu

  , var atzīmēt ar patvaļīgiem attēliem. CSS tiek izmantots, lai mainītu marķiera veidu. Piemēram

  • Elements #1
  • Elements #2
  • Elements #3

  Un tā tas izskatās lapā:

  • Elements #1
  • Elements #2
  • Elements #3

  C izmantojot CSS mēs varam iestatīt cita veida marķiera displeju. Bet jums tas ir jāatceras, norādot jebkuru tagu stilu

  , tas attiecas uz visiem saraksta elementiem.
  Ja jūs nolemjat mainīt standarta ul un li sarakstus, šī tēma jums būs interesanta. Jo šeit jūs uzzināsit vairākus oriģinālie risinājumi. Kas noteikti palīdzēs mainīt standarta izskatu uz unikālu, kur tiek izmantots CSS stils, sarakstu noformēšanai. Priekšrocība ir tāda, ka mēs izmantosim tikai vienu klasi, kas radikāli mainīs izskatu. Papildus šiem parametriem jūs varat norādīt, ar kādu numuru sarakstam jāsākas, jūs varat visu izdarīt pats. Noklusējuma sākuma vērtība numurētiem sarakstiem ir pirmais vai burts A.

  Tā kā pamatinformācija nav pieejama, mēs tagad tuvāk apskatīsim elementus, kas tiek izmantoti, lai dažādām dizaina daļām nodrošinātu struktūru un nozīmi. Ja kāds nezina, ul un li ir daudz labāks variants nekā vienkāršs teksts, jo, kad teksts ir ietīts, it īpaši mobilais tālrunis, tas lieliski ievelkas un neaptinās ap marķieri.

  Saraksti tiek uzskatīti par lielisku veidu, kā parādīt informāciju lapās, jo tie ir viegli lasāmi un izskatās labi. Šķiet, ka daudzi cilvēki domā, ka aizzīmju punkti ir mazi attēli, taču patiesībā tie visi ir izveidoti, izmantojot diezgan vienkāršu HTML kodu. Jūs varat iegult dažādi veidi sarakstus savā starpā, ja vēlaties, vienkārši neaizmirstiet tos pareizi aizvērt. Visās šajās saraksta komandās varat spēlēt ar vajadzīgo tekstu.

  Jums arī jāzina, ka saraksti sākotnēji satur vairākus elementus:

  1 . Nesakārtota informācija.
  2 . Sakārtota informācija.
  3 . Definīcijas.

  Sāksim instalēšanu:

  1. Opcija:

  
  
  • Saraksta vienums
  
  
  • Unikāls saraksts
  
  
  • Oriģinālie saraksti
  
  
  • ZORNET.RU — tīmekļa pārzinis
  
  
  • Vēl viens saraksts
  
  
  
  CSS

  Ksangelopans (
  piemale: 19 pikseļi 0 0;
  polsterējums:0;
  saraksta stils: nav;
  pretatiestatīšana: li;
  }
  .ksangelopan li (
  apmale: 2px solid #3575ad;
  fons: #d7dee4;
  pozīcija: relatīvs;
  piemale-apakšā: 17 pikseļi;
  polsterējums: 15 pikseļi 9 pikseļi;
  }
  .ksangelopan li:hover (
  z-indekss: 1;
  }
  .ksangelopan li:before (
  apmale: 2px solid #2270b3;
  pozīcija: absolūta;
  augšā: -14 pikseļi;
  polsterējums: 3px 9px;
  fonta izmērs: 11 pikseļi;
  fonta svars: treknrakstā;
  krāsa: #246eaf;
  fons: #f2f4f7;
  pretpieaugums: li;
  saturs: counter(li);
  -webkit-transition-duration: 0,4s;
  pārejas ilgums: 0,4 s;
  }
  .ksangelopan li:hover:before (
  fons: #2672b3;
  krāsa: #f7f9fb;
  -webkit-transform: translate (-11px, 0);
  -ms-transform: tulkot(-11px, 0);
  -o-transformēt: tulkot(-11px, 0);
  pārveidot: tulkot(-11px, 0);
  }
  .ksangelopan li:after (
  saturs: "";
  pozīcija: absolūta;
  pārejas ilgums: 0,3 s;
  -webkit-transition-property: platums;
  pārejas īpašums: platums;
  z-indekss: -1;
  fons: #FFF;
  augstums: 100%;
  pa kreisi: 0;
  augšā: 0;
  platums: 0;
  }
  .ksangelopan li:hover:after (
  platums: 100%;
  }

  
  Tas viss uzstādīšanai.

  2 Otrā iespēja:

  

  
  
  • Saraksta vienums
  
  
  • Unikāls saraksts
  
  
  • Oriģinālie saraksti
  
  
  • ZORNET.RU — tīmekļa pārzinis
  
  
  • Vēl viens saraksts
  
  
  
  CSS

  Beleduzlopamges (
  piemale-apakšā: 8 pikseļi;
  polsterējums:0;
  saraksta stils: nav;
  pretatiestatīšana: li;
  }
  .beleduzlopamges li (
  pozīcija: relatīvs;
  apmale: 2px solid #195588;
  fons: #eff3f7;
  polsterējums: 15 pikseļi 19 pikseļi 15 pikseļi 27 pikseļi;
  piemale: 12 pikseļi 0 12 pikseļi 40 pikseļi;
  -webkit-transition-duration: 0,3s;
  pārejas ilgums: 0,3 s;
  }
  .beleduzlopamges li:hover (
  fons: #FFF;
  }
  .beleduzlopamges li:before (
  līnijas augstums: 32 pikseļi;
  pozīcija: absolūta;
  augšpusē: 4 pikseļi;
  pa kreisi: -39px;
  platums: 39 pikseļi;
  teksta līdzināšana: centrs;
  fonta izmērs: 16 pikseļi;
  fonta svars: treknrakstā;
  krāsa: #f9f5f5;
  fons: #275b88;
  pretpieaugums: li;
  saturs: counter(li);
  pārejas ilgums: 0,2 s;
  }
  .beleduzlopamges li:hover:before (
  platums: 46 pikseļi;
  }
  .beleduzlopamges li:after (
  pozīcija: absolūta;
  pa kreisi: 0;
  augšpusē: 4 pikseļi;
  saturs: "";
  augstums: 0;
  platums: 0;
  apmale: 16 pikseļi, caurspīdīga;
  apmale-left-color: #275b88;
  -webkit-transition-duration: 0,2s;
  pārejas ilgums: 0,2 s;
  }
  .beleduzlopamges li:hover:after (
  piemale-kreisais: 6 pikseļi;
  }

  
  Varat neatkarīgi iestatīt centra gammu, lai tā atbilstu vietnes galvenajam stilam.

  3 Trešā iespēja:

  

  
  
  • uCoz skripti
  
  
  • uCoz veidnes
  
  
  • Mājas lapas dizains
  
  
  • Vietņu stili
  
  
  • Stils ar CSS
  
  
  
  CSS

  Nizualisanelag (
  polsterējums:0;
  saraksta stils: nav;
  pretatiestatīšana: li;
  }
  .nizualisanelag li (
  pozīcija: relatīvs;
  polsterējums: 9px 17px 17px 25px;
  piemale-kreisais: 39px;
  pārejas ilgums: 0,2 s;
  kursors: rādītājs;
  fonta svars: treknrakstā;
  krāsa: #343638;
  }
  .nizualisanelag li:before (
  apmale: 3 pikseļi, caurspīdīga;
  līnijas augstums: 35 pikseļi;
  pozīcija: absolūta;
  augšā: 0;
  pa kreisi:-29px;
  platums: 41px;
  text-align:center;
  fonta izmērs: 14 pikseļi;
  fonta svars: treknrakstā;
  krāsa: #619dce;
  pretpieaugums: li;
  saturs: counter(li);
  pārejas ilgums: 0,3 s;
  
  kastes izmēra noteikšana: apmale-box;
  }
  .nizualisanelag li:hover:before (
  krāsa: #337AB7;
  }
  .nizualisanelag li:after (
  pozīcija: absolūta;
  augšā: 0;
  pa kreisi: -29px;
  platums: 41px;
  augstums: 41px;
  apmale: 5px solid #468bd0;
  apmales rādiuss: 50%;
  saturs: "";
  necaurredzamība: 0,5;
  -Webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  kastes izmēra noteikšana: apmale-box;
  }
  .nizualisanelag li:hover:after (
  animācija: 500 ms vieglums iekšā-out 0s bounceIn;
  necaurredzamība: 1;
  }

  @keyframes bounceIn (
  0% {
  necaurredzamība: 0;
  pārveidot: scale3d(.3, .3, .3);
  }
  20% {
  pārveidot: scale3d(1.3, 1.3, 1.3);
  }
  40% {
  pārveidot: scale3d(.9, .9, .9);
  }
  60% {
  necaurredzamība: 1;
  pārveidot: scale3d(1,03, 1,03, 1,03);
  }
  80% {
  pārveidot: scale3d(.97, .97, .97);
  }
  uz (
  necaurredzamība: 1;
  pārveidot: scale3d(1, 1, 1);
  }
  }

  
  Nāk ar skaistu animāciju.

  4 Ceturtā iespēja:

  

  
  
  • Pirmais vietnes elements
  
  
  • Otrais vietnes elements
  
  
  • Trešais vietnes elements
  
  
  • Ceturtais vietnes elements
  
  
  • Piektais vietnes elements
  
  
  
  CSS

  Polsterējums:0;
  saraksta stils: nav;
  }
  .kudezamuden li(
  polsterējums: 6px;
  }
  .kudezamuden li:before (
  polsterējums pa labi: 11 pikseļi;
  fonta svars: treknrakstā;
  krāsa: #4979a0;
  saturs: "\2606";
  pārejas ilgums: 0,4 s;
  }
  .kudezamuden li:hover:before (
  krāsa: #235e90;
  saturs: "\2605";
  }

  
  Līdzīgi iepriekšējās versijas, ir mainīta tikai pati ikona.

  Kopumā šī ir neliela sarakstu izlase, ko var izveidot tīmekļa pārzinis jauks saraksts portālā, kur viņš pats var vairāk noformēt, kā viņš pats to vēlas redzēt.

  Ja vienumi ir jāievieto numurētā sarakstā, nevis ar aizzīmēm, tiks izmantots sakārtots HTML. Šis saraksts ir izveidots, izmantojot tagu ol. Numerācija sākas ar vienu un palielinās par vienu katram nākamajam sakārtotajam saraksta elementam ar li tagu.

  Vienīgā atšķirība ir tā, ka šis tags ir stingri paredzēts numerācijas sarakstiem. Birkas nosaukums cēlies no angļu valodas saīsinājuma "Ordered List" - numurēts saraksts.

  Tagu sintakse

  1. Elements #1
  2. Elements #2
  3. Elements #3
  4. ...

  Kur atribūtam type="value" var būt šādas vērtības

  • A - nosaka marķierus lielo latīņu burtu formā (A, B, C ..);
  • a - nosaka marķierus mazo latīņu burtu formā (a, b, c..);
  • I - nosaka marķierus lielo romiešu ciparu formā (I, II, III, IV..);
  • i - nosaka marķierus mazo romiešu ciparu formā (i, ii, iii, iv..);
  • 1 (noklusējums) - iestata marķierus arābu ciparu formā (1, 2, 3..);

  Atribūts start="value" norāda pārskata sākotnējo vērtību (sākuma vērtību).

  Apgrieztais atribūts norāda apgriezto skaitīšanu (ja nepieciešams).

  Tag

  prasa obligātu beigu atzīmes lietošanu

  Lai veidotu saraksta elementus, tiek izmantots pārī savienots tags

  • . Starp sākuma un beigu tagiem ir atsevišķi vārdi, frāzes, rindkopas, attēli, koda daļas un daudz kas cits, kas ir aizzīmju saraksta saturs.

    Piezīme

    Sarakstā varat mainīt kontu uz savu. Šim nolūkam uz taga ir īpašs atribūts value="".

  • , kam ir piešķirti daži skaitliskā vērtība. Piemēram

    1. Elements #1
    10. Elements #2
    11. Elements #3

  Piemēri ar numurētiem sarakstiem html (

  )

  Piemērs 1. HTML numurēts saraksts ar latīņu burtiem

  Piemērs ar lielajiem burtiem

  1. Elements #1
  2. Elements #2
  3. Elements #3

  1. Elements #1
  2. Elements #2
  3. Elements #3

  Piemērs ar mazajiem burtiem

  1. Elements #10
  2. Elements #11
  3. Elements #12

  Lūk, kā tas izskatās lapā:

  1. Elements #1
  2. Elements #2
  3. Elements #3

  2. piemērs. HTML numurēts saraksts ar romiešu burtiem

  Piemērs ar lielajiem burtiem

  1. Elements #1
  2. Elements #2
  3. Elements #3

  Lūk, kā tas izskatās lapā:

  1. Elements #1
  2. Elements #2
  3. Elements #3

  Piemērs ar mazajiem burtiem

  1. Elements #1
  2. Elements #2
  3. Elements #3

  Lūk, kā tas izskatās lapā:

  1. Elements #1
  2. Elements #2
  3. Elements #3

  Piemērs 3. Numurētais saraksts html atšķirīga sākuma pozīcija

  Piemērs, kas parāda sākuma atribūta iespējas, kas ļauj iestatīt skaitītāja sākuma vērtību.

  50. Elements #1
  51. Elements #2
  52. Elements #3

  Lūk, kā tas izskatās lapā:

  1. Elements #1
  2. Elements #2
  3. Elements #3

  4. piemērs. Skaitīšanas maiņa html numurētos sarakstos

  Tālāk ir sniegts piemērs ar iespēju mainīt skaitītāja vērtības, izmantojot vērtības atribūtu, parādot tagos jaunus elementus

  • .

    10. Elements #1
    11. Elements #2
    100. Elements #3
    101. Elements #4

    Lūk, kā tas izskatās lapā:

    1. Elements #1
    2. Elements #2
    3. Elements #3
    4. Elements #4

    Piemērs 5. Apgriezti numurēts saraksts html

    Tālāk ir sniegts apgrieztā numurēta saraksta piemērs (skaitīšana apgrieztā secībā).

    10. Elements #1
    11. Elements #2
    12. Elements #3
    13. Elements #4

    Lūk, kā tas izskatās lapā:

    1. Elements #1
    2. Elements #2
    3. Elements #3
    4. Elements #4

    Elements

    (no angļu valodas "unordered list" ‒ "unordered list") izveido sarakstu ar aizzīmēm (nesakārtotu). Parasti elements
    izmanto, lai izveidotu sarakstus, kur, mainot šī saraksta vienumu secību, saraksta nozīme būtiski nemainās.

    Tag

    attiecas uz bloka elementiem, tāpēc tas aizņems visu tai pieejamo platumu, un augstuma lielums būs atkarīgs no satura daudzuma.

    Vienumi numurētiem sarakstiem tiek definēti, izmantojot tagu

    • , kas papildus tekstam var ietvert citus HTML elementus (sarakstus, attēlus, virsrakstus, rindkopas utt.). Pēc noklusējuma aizzīmju saraksti tiek parādīti tīmekļa lapā kā saraksts, kas sākas ar mazu melnu apli. Pārlūkprogrammas, parādot saraksta vienumus, pievieno nelielu piemali kreisajā pusē.

      Piezīme: Ja lai

      attiecas CSS īpašums, tad elementi
      • mantot šīs īpašības.

        Padoms: Lai mainītu marķiera veidu, izmantojiet rekvizītu list-style-type CSS vai list-style-image, kas ļauj aizstāt marķierus ar attēliem. Lai izveidotu numurētus sarakstus, izmantojiet tagu

        .

        Sintakse

        ...
        • ...
        ...

        Noslēdzošais tags

        Obligāti.

        Atribūti

        CompactNovecojis HTML5 Samazina atkāpi un rindstarpu. type HTML5 Iestata saraksta marķiera veidu.

        Pieejams šim vienumam globālie atribūti Un notikumiem.

        Noklusējuma stils

        Lielākā daļa pārlūkprogrammu parādīs šo elementu

        ar sekojošo CSS vērtības noklusējuma:

        Ul (displejs: bloks; saraksta veids: disks; malas augšdaļa: 1 em; piemale-apakšā: 1 em; piemale-kreisā: 0; mala labā puse: 0; polsterējums pa kreisi: 40 pikseļi; )

        Atšķirības starp HTML 4.01 un HTML5

        HTML5 netiek atbalstīti kompaktie un tipa atribūti.

        Lietošanas piemērs:

        Nesakārtots HTML saraksts:

        HTML piemērs:

        Izmēģiniet to pats
        • Kafija
        • Tēja
        • Kakao

        Specifikācijas

        Specifikācija	Statuss
        WHATWG HTML dzīves standarts (WHATWG)	Dzīves līmenis
        HTML 4.01 (W3C)	Ieteikums
        HTML5 (W3C)	Ieteikums
        HTML 5.1 (W3C)	Ieteikums

        Pārlūka atbalsts

        Izmēģiniet to pats - piemēri

        Kā es varu likt sarakstu sākt ar citu skaitli, nevis 1?

        Turpināsim sarunas par html pirmsākumiem. Šajā rakstā es vēlos runāt par to, kā tekstā izveidot rindkopas, sarakstus un virsrakstus. Un arī par atsevišķiem tagiem
        Un

        ---

        .

        Stingri iesaku izlasīt šīs sērijas pirmo nodarbību, kā arī ievadrakstu par html apguves sākšanu tiem, kas ar tiem vēl nav pazīstami.

        Tagad mēs turpināsim pētīt tagus. Pieņemu, ka lasītājs jau ir iepazinies ar iepriekšminēto rakstu materiālu.

        Kā vienmēr, darba plāns:

        1. Rindkopas
        2. Līnijas pārtraukumi
           
        3. Saraksti un saraksta elementi
        4. Virsraksti
        5. Horizontālie lineāli

           ---

        Rindkopas

        Teksts gandrīz vienmēr sastāv no rindkopām. Rindkopa ir teksta elements, kas nodod pilnīgu domu.

        Html failā rindkopa, kā redzams no virsraksta, tiek apzīmēta ar . Burts "p" ir ņemts no vārda "paragrāfs", kas nozīmē tikai "punkts".

        Apskatīsim piemēru:

        Pirmās rindkopas teksts. Tajā ir doma. Bet doma ir beigusies.
        

        
        

        Cita doma jau ir sākusies, un mēs to rakstām citā rindkopā.
        

        Kā redzat, rindkopu lietošana ir ļoti vienkārša un neprasa īpašus komentārus. Ja skatāmies uz šo kodu pārlūkprogrammā, mēs redzēsim divas rindiņas ar vienu tukšu rindiņu starp tām. Krievu tekstos ir pieņemts rindkopu atdalīt nevis ar tukšu rindiņu, bet gan pārbīdot pirmo rindiņu pa labi. Bet tieši šāds formatējums bieži tiek izmantots internetā, tāpēc tas bieži tiek atstāts krievu valodas tekstos. Tomēr, ja jums nepatīk šī darbība, varat to mainīt, izmantojot CSS.

        Līnijas pārtraukumi
        

        Dažreiz jums ir jātulko rindiņa, nepabeidzot domu vai neaizverot rindkopu. Tas ir, vienkārši dodieties uz jaunu līniju. Šim nolūkam ir viena atzīme
        . Šeit ir tā izmantošanas piemērs:

        Vējš jautri pūš
        
        Un laiva paātrinās
        
        Viņš skrien viļņos
        Ar paceltām burām.
        

        Šis dzejoļa fragments A.S. Puškins mums palīdzēja ilustrēt atzīmes darbību
        . Es īpaši ievietoju šīs četrrindes pēdējās divas rindiņas vienā koda rindā, lai parādītu, ka rindas tiek pārsūtītas uz jaunu rindiņu nevis tāpēc, ka ievietojām rindiņu pārtraukumus, bet gan tāpēc, ka ievietojām tagus
        . Šis tags ir ļoti vienkāršs, un tam nav nepieciešami detalizēti paskaidrojumi, tāpēc mēs pārtrauksim to apspriest šeit.

        Saraksti,

        un saraksta elementi

        Dažreiz tekstā kaut kas jāuzskaita. Šim nolūkam tiek izmantoti trīs tagi: ul, ol, li. Visi šie tagi ir konteinera tagi, taču atzīme vienmēr ir ietverta vienā no konteineriem vai, un tai nav nozīmes ārpus tiem. ul konteiners tiek izmantots, ja mums ir vienalga par uzskaitīto vienumu secību un mēs nevēlamies koncentrēties uz secību, kādā tie parādās. Gluži pretēji, tags ol koncentrē uzmanību uz elementu secību, automātiski numurējot katru rindiņu. Apskatīsim piemēru:

        
        
        • bulciņa
        
        
        • Pīrāgs
        
        
        • Klaips
        
        
        • Pīrāgs
        
        

        Pārlūka ekrānā šis kods izskatīsies šādi:

        • bulciņa
        • Pīrāgs
        • Klaips
        • Pīrāgs

        Ja mēs vienkārši aizstājam ul tagu ar ol tagu, mēs iegūstam numurētu sarakstu:

        
        
        1. bulciņa
        
        
        2. Pīrāgs
        
        
        3. Klaips
        
        
        4. Pīrāgs
        
        

        Tagad tas izskatās šādi:

        1. bulciņa
        2. Pīrāgs
        3. Klaips
        4. Pīrāgs

        Neviens neaizliedz ligzdot vienu sarakstu citā, veidojot ligzdotus sarakstus ar apakšsarakstiem:

        
        Rīki:
        
        • Zāģis
        
        
        • Skrūvgrieži
          
          
          
          1. Taisni
          
          
          2. Krusts
          
          
          
          
        
        
        • Urbt
        
        

        Jums ir nedaudz jāpaeksperimentē ar šiem sarakstiem, lai pierastu pie to izmantošanas. Ir arī cita veida saraksts, bet tas tiek izmantots reti, tāpēc tagad par to nerunāšu. Varbūt citā rakstā.

        Protams, tāpat kā viss pārējais, izskatsŠos elementus var pārveidot līdz nepazīšanai, izmantojot CSS.

        Virsraksti

        Protams, rindkopas palīdz strukturēt dokumentus. Bet, lai sadalītu lielu tekstu mazākās loģiskās daļās, varat katrai no tām nosaukt nosaukumu. Katrā daļā var būt papildu apakšdaļas ar saviem zemāka līmeņa virsrakstiem utt. Lai iestatītu nosaukumu, izmantojiet tagus , kur “x” ir skaitlis no 1 līdz 6. Jo lielāks skaitlis, jo zemāks virsraksts. Tas ir, augstākā līmeņa virsraksts tiks saukts par h1, bet apakšējā līmeņa virsraksts tiks saukts par h6. Pēc noklusējuma teksts šajos virsrakstos tiek parādīts lielā fontā un ar atkāpi. Šis teksts tiek parādīts visā rindā, tas ir, hx tagi ir bloku tagi. Tagam h1 ir lielākais fonts, bet h6 tagam ir mazākais fonts. Parasti lapā ir viens, maksimāli divi augstākā līmeņa h1 tagi. Līmenim samazinoties, atzīmju skaits palielinās. Taču reti kad tīmekļa pārzinis var tik ļoti sadalīt tekstu, ka viņam ir nepieciešami 5. vai 6. līmeņa virsraksti. Pat 4. līmenis tiek izmantots reti.

        Mazāk vārdu, vairāk darbības!