HTML atbalsta trīs sarakstus dažādi veidi, katram no tiem ir savi parametri:

• – numurēts (izmantojot ciparus vai burtus) sarakstu, kura katram elementam ir kārtas numurs (burts);
  1. – saraksts ar aizzīmēm (nav numurēts), pie katra elementa ir novietots marķieris (nevis ciparu vai alfabēta rakstzīmes, kas norāda sērijas numuru);

     • – definīciju saraksts sastāv no nosaukuma/vērtības pāriem, tostarp terminiem un definīcijām.

     Numurēti saraksti

     Numurētā sarakstā pārlūkprogramma automātiski ievieto elementu numurus secībā, sākot ar noteiktu vērtību (parasti 1). Tas ļauj ievietot un dzēst saraksta elementus, netraucējot numerāciju, jo atlikušie skaitļi tiks automātiski pārrēķināti.
     Numurētie saraksti tiek veidoti, izmantojot bloka elementu

     (no angļu valodas Ordered List - numurētais saraksts). Blakus konteineram
     katram saraksta vienumam tiek ievietots elements
     1. (no angļu valodas List Item - saraksta vienums). Noklusējums ir numurēts saraksts ar arābu cipariem.
        Tag
        ir šāda sintakse:
        1. 1. elements
        2. 2. elements
        3. 3. elements

        Numurētajiem saraksta vienumiem ir jābūt vairākiem saraksta vienumiem, kā parādīts šajā piemērā:

        Piemērs: numurēts saraksts

        • Izmēģiniet pats"

        Soli pa solim instrukcija

        1. Paņemiet atslēgu
        2. Ievietojiet atslēgu slēdzenē
        3. Pagrieziet atslēgu divus apgriezienus
        4. Izņemiet atslēgu no slēdzenes
        5. Atver durvis

        Soli pa solim instrukcija

        1. Paņemiet atslēgu
        2. Ievietojiet atslēgu slēdzenē
        3. Pagrieziet atslēgu divus apgriezienus
        4. Izņemiet atslēgu no slēdzenes
        5. Atver durvis

        Dažreiz, aplūkojot esošos HTML kodus, jūs saskaraties ar argumentu veids elementā

        , ko izmanto, lai norādītu numerācijas veidu (burti, romiešu un Arābu cipari un tā tālāk.). Sintakse:

        Šeit: ierakstiet - saraksta simboli:

        • A - lielie latīņu burti (A, B, C...);
        • a - mazie latīņu burti (a, b, c...);
        • I - lielie romiešu cipari (I, II, III...);
        • i - mazie romiešu cipari (i, ii, iii...);
        • 1 — arābu cipari (1, 2, 3 . . .) (tiek izmantoti pēc noklusējuma).

        Ja vēlaties, lai saraksts sāktos ar citu skaitli, nevis 1, tas jānorāda, izmantojot atribūtu sākt tagu

        .
        Nākamajā piemērā ir parādīts numurēts saraksts ar lieliem romiešu cipariem un XLIX sākuma vērtību:

        Numerāciju var sākt arī, izmantojot atribūtu vērtību, kas tiek pievienots elementam

        1. šādā veidā:

        7. Šajā gadījumā saraksta secīgā numerācija tiks pārtraukta un no šī brīža numerācija sāksies no jauna, šajā gadījumā no septiņiem.

           Atribūtu lietošanas piemērs vērtību tagu

        8. , kas ļauj mainīt norādītā saraksta elementa numuru:

           Šajā piemērā "Pirmajam saraksta vienumam" būtu 1. numurs, "Otrā saraksta vienumam" būtu 7. numurs un "Trešajam saraksta vienumam" būtu 8. numurs.

           Numurēto sarakstu formatēšana ar CSS

           Lai mainītu saraksta numurus, jāizmanto rekvizīts saraksta stila veids CSS stila lapas:

           Numurēto sarakstu stili

           Piemērs	Nozīme	Apraksts
           a, b, c	zemākā alfa	Mazie burti
           A, B, C	augšējā alfa	Lielie burti
           i, ii, iii	apakšromiešu	Romiešu cipari ar mazajiem burtiem
           I, II, III	augšējais romāns	Romiešu cipari ar lielajiem burtiem

           Piemērs: CSS īpašuma lietošana saraksta stila veids

           Saraksti ar aizzīmēm

           Saraksti ar aizzīmēm pēc būtības ir līdzīgi numurētiem sarakstiem, tikai tie nesatur vienumu secīgu numerāciju. Saraksti ar aizzīmēm tiek izveidoti, izmantojot bloka elementu

           (no angļu valodas Unordered List - unnumbered list). Katrs saraksta elements, tāpat kā numurētajos sarakstos, sākas ar tagu
           • . Pārlūkprogramma katru saraksta vienumu veic atkāpi un automātiski parāda aizzīmes.
             Tag
             ir šāda sintakse:
             • Pirmais punkts
             • Otrais punkts
             • Trešais punkts

             Nākamajā piemērā var redzēt, ka pēc noklusējuma pirms katra saraksta vienuma tiek pievienots neliels marķieris aizpildīta apļa formā:

             Tagas iekšpusē

             • Nav nepieciešams ievietot tikai tekstu, ir pieļaujams ievietot jebkuru straumējamā satura elementu (saites, rindkopas, attēlus utt.)

               Ligzdotie saraksti

               Jebkuru sarakstu var ievietot citā sarakstā. Elementa iekšpusē
             • Ir atļauts izveidot ligzdotu sarakstu vai otrā līmeņa sarakstu. Lai ligzdotu sarakstu, elementā aprakstiet jauno sarakstu
             • jau esošais saraksts. Ievietojot vienu sarakstu ar aizzīmēm citā, pārlūkprogramma automātiski maina otrā līmeņa saraksta aizzīmju stilu. Jebkuru sarakstu var ievietot citā sarakstā. Nākamajā piemērā ir parādīta numurēta saraksta otrajā vienumā ligzdotā saraksta ar aizzīmēm struktūra.

               Piemērs: Ligzdotie saraksti

               • Izmēģiniet pats"
               • pirmdiena
                 1. Nosūtīt pastu
                 2. Redaktora apmeklējums
                    • Tēmas izvēle
                    • Dekoratīvais dizains
                    • Gala ziņojums
                 3. Vakara ziņojumu apskate
               • otrdiena
                 1. Pārskatiet grafiku
                 2. Sūtīt attēlus
               • trešdien...
               • pirmdiena
                 1. Nosūtīt pastu
                 2. Redaktora apmeklējums
                    • Tēmas izvēle
                    • Dekoratīvais dizains
                    • Gala ziņojums
                 3. Vakara ziņojumu apskate
               • otrdiena
                 1. Pārskatiet grafiku
                 2. Sūtīt attēlus
               • trešdien...

               Aizzīmju sarakstu formatēšana

               Pārmaiņām izskats Jāizmanto saraksta marķiera rekvizīts saraksta stila veids CSS stila lapas:

               Šajā piemērā ir parādīti dažādi aizzīmju sarakstu stili:

               Piemērs: aizzīmju saraksta stili

               • Izmēģiniet pats"
               • Kafija
               • Kafija
               • Kafija
               • Kafija

               Disks:

               • Kafija
               • Piens

               Aplis:

               • Kafija
               • Piens

               Kvadrāts:

               • Kafija
               • Piens

               Nav:

               • Kafija
               • Piens

               Grafiskie marķieri.

               HTML ir iespējams izveidot sarakstu ar grafiskie marķieri. Viena lieta ir, ja saraksta marķieri ir standarta apļi vai kvadrāti, un pavisam cita lieta, kad izstrādātājs pats izvēlas marķieri atbilstoši lapas dizainam. Lai saraksta vienumi būtu skaisti, bieži tiek izmantoti mazi attēli.
               Lai aizstātu parasto marķieri ar grafisku, nomainiet rekvizītu saraksta stila veids par īpašumu saraksta stila attēls un norādiet attēla URL:

               Piemērs: grafiskie marķieri

               • Izmēģiniet pats"

               Zodiaka zīmes

               • Vērsis
               • Dvīņi

               Zodiaka zīmes

               • Auns
               • Vērsis
               • Dvīņi

               Definīciju saraksti (apraksti)

               Definīciju saraksti ir ļoti noderīgi, lai izveidotu, piemēram, savu personīgo terminu vārdnīcu. Katram definīciju saraksta vienumam ir divas daļas: termins un tā definīcija.
               Jūs ievietojat visu sarakstu elementā

               (no angļu valodas definīciju saraksta - definīciju saraksts). Tas ietver tagus

               (no angļu valodas Definition Term - definēts vārds, termins) un

               (no angļu valodas Definition Description — definējamā termina apraksts).
               Definīciju sarakstus bieži izmanto zinātniskās, tehniskajās un izglītības publikācijās, izmantojot tos glosāriju, vārdnīcu, uzziņu grāmatu u.c.

               Aprakstu saraksta vispārējā struktūra ir šāda:

               Pirmais termiņš

               Pirmā termiņa apraksts

               Otrais termiņš

               Otrā termiņa apraksts

               Nākamajā piemērā ir parādīts viens no iespējamie lietojumi definīciju saraksts:

               Piemērs: definīciju saraksts

               • Izmēģiniet pats"

               World Wide Web - no angļu valodas. World Wide Web (WWW) ir izplatīta sistēma, kas nodrošina piekļuvi saistītiem dokumentiem, kas atrodas dažādos datoros, kas savienoti ar internetu. Internets ir tīklu kopums, kas informācijas pārsūtīšanai izmanto vienu apmaiņas protokolu. Vietne ir atsevišķu tīmekļa lapu kopums, kas ir savstarpēji savienotas ar saitēm un vienotu dizainu.

               Pasaules tīmeklis

               - no angļu valodas World Wide Web (WWW) ir izplatīta sistēma, kas nodrošina piekļuvi saistītiem dokumentiem, kas atrodas dažādos datoros, kas savienoti ar internetu.

               Internets

               — tīklu kopums, kas informācijas pārsūtīšanai izmanto vienu apmaiņas protokolu.

               Tīmekļa vietne

               - atsevišķu tīmekļa lapu kopums, kas ir savstarpēji savienotas ar saitēm un vienotu dizainu.

               Pēc noklusējuma termina teksts tiek nospiests pārlūkprogrammas loga kreisajā malā, un termina apraksts atrodas zemāk un pārvietots pa labi.

               Ja ir nepieciešams kaut ko numurēt vietnē, visbiežāk tiek izmantots sakārtots saraksts (

               ). Ir pamatoti gaidīt, ka varētu būt vēlme strādāt pie šo skaitļu dizaina. Tomēr CSS šīs vēlmes īstenošana ir diezgan problemātiska, bet, par laimi, ne neiespējama. Savā apmācībā Rodžers Johansons parāda, kā to var īstenot, izmantojot pseidoelementu:before, kas var iestatīt satura rekvizītu uz counter .

               Pseidoelements:befor tiek izmantots, lai parādītu vēlamo saturu pirms elementa, kuram tas tiek pievienots. Darbojas kopā ar satura īpašumu.

               Tomēr ir vērts skaidri norādīt, ka numurētos skaitītājus var izmantot ne tikai sakārtotiem sarakstiem. Piemēram, pieņemsim, ka vēlaties numurēt definīciju sarakstu (

               ), kas sastāv no jautājumiem un atbildēm uz jūsu FAQ.

               Marķējums izskatīsies apmēram šādi:

               Cik daudz koksnes varētu saspraust koka patrona, ja ar malkas patronu varētu iesist malku?

               1,000,000

               Kāds ir nepiekrautas bezdelīgas gaisa ātrums?

               Ko tu ar to domā? Āfrikas vai Eiropas bezdelīga?

               Kāpēc vista šķērsoja ceļu?

               Lai tiktu uz otru pusi

               Katrs jauns

               elements ir jauns jautājums, tāpēc mēs tiem piemērojam numerāciju. Tas izskatīsies ļoti vienkārši:

               Satura rekvizīts ļauj tīmekļa lapas tekstā ievietot ģenerētu saturu, kas tekstā sākotnēji nav iekļauts.
               skaitītāja vērtība Drukā skaitītāja vērtību, kas norādīta skaitītāja atiestatīšanas rekvizītā.

               Skaitītāja atiestatīšanas rekvizīts iestata skaitītāja identifikatoru un iestata sākotnējo vērtību.
               Pret pieauguma rekvizīts norāda soli, par kuru tiek palielināta skaitītāja vērtība.

               Bieži uzdotie jautājumi ( counter-reset: my-badass-counter; ) .faq dt:before ( saturs: counter(my-badass-counter); counter-increment: my-badass-counter; )

               Pseidoelementam :before var piešķirt jebkuru stilu. Piemēram:

               

               Apgūstot šo īpašumu, jūs varat numurēt, ko vien vēlaties. Kādu dienu, piemēram, es ievietoju vienu no savām iecienītākajām receptēm un numurēju katru soli/foto ar romiešu cipariem. Tas man kalpoja kā atgādinājums: cipariem nav jābūt decimāldaļām.

               

               Skaitliskā šķirne tiek attēlota kā saraksta stila rekvizīta vērtības.
               Proti:

               

               Viss, kas nepieciešams, ir norādīt vēlamo opciju skaitītāja vērtībā.

               Saturs: skaitītājs(mans-skaitītājs, zemāks-romiešu);

               CSS3 nākotne

               Iepriekš minētais materiāls ir aktuāls šodienai, tomēr tas nobāl, salīdzinot ar iespējām, kas slēpjas CSS3 sarakstos. Kad pārlūkprogrammas tos atbalstīs, būs iespējams, piemēram, strādāt tieši ar saraksta marķieriem.

               Li::marķieris ( platums: 30 pikseļi; teksta izlīdzināšana: pa labi; mala pa labi: 10 pikseļi; displejs: inline-block; ) ol ( saraksta stils: simboli ("*""2020""2021""A7"); ) ul (list-style-type: "šeit ir jābūt zvaigznītei)"; )

               Ja kādreiz esat mēģinājis mainīt rindu numuru (ciparu) CSS stilus sakārtotajos sarakstos

               , tad, iespējams, radās problēmas. Izmantojot CSS atlasītājus, nav iespējams sasniegt šo elementu stilus. Bet diezgan bieži interfeisa dizains ietver tā krāsas, fona, izmēra utt. maiņu.

               Šis ir vienkāršākais nestiilēta saraksta piemērs:

               html

               1. Lai iestādītu koku
               2. Uzcelt māju
               3. Audzini dēlu

               Apskatīsim vairākus veidus, kā atrisināt iepriekš minēto problēmu.

               Tradicionāli neveikls veids.

               Tradicionālais veids, kā atrisināt šo problēmu, ir slēpt pārlūkprogrammas automātiski piešķirtos rindu numurus. Šajā gadījumā tiek izmantots saraksta stils: nav; rekvizīts. .

               css

               li( saraksta stils: nav; ) .num( krāsa: balta; fons: #2980B9; displejs: iekļauts bloks; teksta līdzinājums: centrā; piemale: 5 pikseļi 10 pikseļi; līnijas augstums: 40 pikseļi; platums: 40 pikseļi; augstums: 40 pikseļi;)

               html

               1. 1 Lai iestādītu koku
               2. 2 Uzcelt māju
               3. 3 Audzini dēlu

               Piekrītu, tas izskatās lieki un neelastīgi. Mēs slēpjam automātiski piešķirtos kārtas numurus un aizstājam tos ar manuāli norādītām vērtībām, pārblīvējam izkārtojumu utt.

               Apskatīsim, kā mēs varam sasniegt to pašu rezultātu, neaizsprostot izkārtojumu un izmantojot pseidoelementu::before un CSS rekvizītus content , counter-increment , counter-reset .

               Skaists un pareizs veids.

               Vispirms mēs nodrošināsim kodu un demonstrāciju, un pēc tam izdomāsim, kas ir kas.

               css

               ol( counter-reset: myCounter; ) li( saraksta stils: nav; ) li:before ( counter-increment: myCounter; content:counter(myCounter); krāsa: balta; fons: #2980B9; displejs: inline-block; teksta līdzināšana: centrā; piemale: 5 pikseļi 10 pikseļi; līnijas augstums: 40 pikseļi; platums: 40 pikseļi; augstums: 40 pikseļi; )

               html

               1. Lai iestādītu koku
               2. Uzcelt māju
               3. Audzini dēlu

               Kā redzat, html kods paliek tīrs un skaists. Šajā gadījumā viss saraksta elementu stils tiek pārsūtīts uz css.

               Apskatīsim punktu pa punktam:

               • li::pirms– saraksta iekšpusē izveido pseidoelementu, kas ieņem pirmā bērna vietu.
               • counter-reset:myCounter;– atiestata myCounter css skaitītāju katrā
                 .
                 1. pretinkrements: myCounter;– palielina css skaitītāju myCounter katram pseidoelementam::befor .
                 2. saturs:skaitītājs(mans skaitītājs);– drukā myCounter pašreizējo vērtību pseidoelementā::before.

               Plašāku informāciju par css skaitītājiem var atrast

               
               

               Diezgan bieži nākas izmantot numerāciju: veidojot dažādus sarakstus, sarakstus, veidojot satura rādītāju vai satura rādītāju utt.

               CSS izmanto skaitītājus, lai automatizētu numerācijas procesu.

               Sāksim ar vienkāršu piemēru. Pēc tam sarežģītākā veidā mēs izveidosim ligzdotu sarakstu ar tā vienumu un apakšvienību automātisku numerāciju.

               Skaitītāja identifikācija

               Vispirms jums ir jāidentificē skaitītājs.

               Izmantojot skaitītāju atiestatīšanas rekvizītu, skaitītājam tiek piešķirts nosaukums un sākotnējā vērtība. Nosaukums var būt jebkas, bet nevar sākties ar skaitli.

               Koda fragments:

               Šis ieraksts saka, ka par tagu ir uzstādīts skaitītājs ar nosaukumu skaitli ar sākotnējo vērtību 3.

               Pēc noklusējuma skaitītāja sākotnējā vērtība ir 0.

               Skaitītāja pieaugums

               Šim nolūkam tiek izmantota pretinkrementa īpašība. To izmanto arī, lai norādītu skaitītāja soli — skaitli, par kādu palielināsies skaitītāja vērtība.

               Koda fragments:

               korpuss (pretatiestatīšana: numurs 3;)
               body p ( pretinkrementi : skaitlis 3 ; }

               Šis koda fragments saka, ka rindkopas ( tagu

               ) dokumenta pamattekstā tiks numurēts ar skaitļu skaitītāju ar soli 3.

               Pirmā rindkopa tiks numurēta ar 6, jo skaitītāja sākotnējā vērtība ir 3 un tās pieaugums ir 3.

               Skaitītāja pieauguma noklusējuma vērtība ir 1.

               Tagad ir iestatīti visi nepieciešamie skaitītāja parametri: nosaukums, sākotnējā vērtība, pieaugums un elements, kas tiks numurēts. Tālāk....

               Skaitītāja displejs

               Tagad jums ir jāparāda skaitītāja vērtība un jāiestata noteikumi tās atrašanās vietai. Tas tiek darīts, izmantojot satura rekvizītu un pseidoelementus pirms un pēc.

               Rekvizīts saturs ievieto saturu pirms ( pirms tam) vai pēc ( pēc) no norādītā elementa.

               Koda fragments:

               korpuss (pretatiestatīšana: numurs 3;)
               korpuss p:after ( pretpieaugums : skaitlis 3 ; saturs : " ir vienāds ar " skaitītājs(skaitlis) "." ;)

               Tātad iepriekšējam koda fragmentam mēs pievienojām satura rekvizītu, kas drukā vārdu "vienāds", kam seko skaitītāja skaitļa vērtība un punkts "." . Tas viss tiek ievietots lapā pēc rindkopas satura ( tagu

               ), ko saka pēc pseidoelements.

               Galu galā...

               Zemāk ir aprakstītais piemērs.

               Koda fragments:

               
               
               
               
               

               
               

               2 reizes 3

               
               

               3 reizes 3

               
               

               4 reizes 3

               
               

               5 reizes 3

               
               

               Rezultāts:

               Ligzdoti saraksti ar automātisko numerāciju

               Apskatīsim piemēru, kā izmantot skaitītājus, lai automatizētu ligzdotu sarakstu numerācijas procesu.

               Jums jau vajadzētu zināt gan HTML, gan CSS sarakstus, ka saraksta vienumi tiek numurēti automātiski. Bet šī numerācija ir visvienkāršākā.

               Kā ir ar apakšpunktu automātisko numerāciju, piemēram, 1.1, 1.2, 2.1, 2.2 utt.?

               Šī problēma tiek atrisināta, izmantojot skaitītājus, kas ļauj automatizēt ligzdotu sarakstu numerācijas procesu.

               Koda fragments:

               
               
               
               
               

               
               

               1. Pirmais saraksta vienums
               
               
               1. 1. punkta pirmā daļa
               
               
               2. 1.punkta otrā daļa
               
               
               2. Otrais saraksta vienums
               
               
               1. 2. punkta pirmā daļa
               
               
               2. 2.rindkopas otrā daļa
               
               
               3. Trešais punkts sarakstā
               
               
               1. 3. punkta pirmā daļa
               
               
               2. 3.rindkopas otrā daļa
               
               
               3. 3.rindkopas trešā daļa
               
               

               
               

               Rezultāts:

               Tādā veidā jūs automatizējat ligzdotu sarakstu numerācijas procesu!

               Laba diena!

               Šajā rakstā jūs uzzināsit par visām sarakstu iespējām, sapratīsit, kā izveidot numurētu sarakstu, un apgūsit tagus, kas palīdzēs vienkāršu sarakstu ar aizzīmēm pārvērst interesantākā un pamanāmākā ar patvaļīgām aizzīmēm. Pēc nodarbības pabeigšanas jums būs izpratne par to, kur tiek izmantoti saraksti un kādos apstākļos tos var izmantot.

               Šis raksts ir trešais šajā īsajā kursā par HTML pamatiem. Pirms šīs nodarbības lasīšanas iesaku izlasīt iepriekšējās divas:

               Raksts ir tikko sācies, un jūs jau varat pamanīt standarta aizzīmju saraksta izmantošanu. Manā vietnē tas izskatās pavisam vienkārši: kreisajā pusē ir neliels ievilkums ar līniju un kvadrātveida marķieri. Vēlāk rakstā mēs detalizēti apskatīsim, kādi ir marķieru veidi, kā izveidot skaitļus un arī kā izveidot savu marķieri.

               Katrā raksta daļā noteiktu sarakstu izveidei tiks pievienoti detalizēti paskaidrojumi par konkrēta saraksta ievietošanu.

               1. Uzzīmētie saraksti HTML kodā

               Šis saraksta veids tiek izmantots, lai tekstā uzskaitītu elementu kopu ar līdzīgu nozīmi. Tas varētu būt saišu saraksts, kas ir saistītas ar to pašu tēmu, detalizēts skaidrojums atsevišķām teksta daļām. Bet paskatīsimies, kā kodā izskatās saraksti ar aizzīmēm:

               Un pārlūkprogrammā tas izskatās šādi:

               Rīsi. 1.1. Standarta skats HTML aizzīmēm nesakārtotā saraksta pārlūkprogrammā

               1.1. Standarta aizzīmes sarakstiem ar aizzīmēm

               Augšējā attēlā (1.1. attēls) katra izvēlnes elementa sākumā var redzēt apļus. Šis ir marķieris. Pēc noklusējuma tas pārlūkprogrammā tiek parādīts kā aizpildīts aplis. HTML ir vairāki marķieru veidi: aizpildīts aplis, tukšs aplis un kvadrāts. Tiem nav nepieciešami nekādi CSS vai trešās puses attēli:

               1.2 Saraksta marķieris tukša apļa formā

               Jūs zināt atribūtu vērtības, bet tagad redzēsim, kā kodā izveidot HTML sarakstu ar aizzīmēm. Iepriekš redzamajā tabulā mēs izvēlējāmies tipa atribūta otro vērtību "circle" un iestatījām to mūsu aizzīmju sarakstā:

               <html > <galva> <virsraksts > Piemērs sarakstam ar aizzīmēm ar tukšu apļa marķieri</title> </head> <ķermenis > <p> Zvaigznes:</p> <ul tips = "aplis" > <li > Siriuss</li> <li > Arktūrs</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Sv</li> </ul> </body> </html>

               Tūlīt redzēsim, kā šis kods izskatīsies pārlūkprogrammā:

               Rīsi. 1.2. Saraksta marķiera skats kā aplis pārlūkprogrammā

               1.3. Saraksta marķieris kvadrāta formā

               Apskatīsim arī pēdējo piemēru ar kvadrātveida marķieri HTML sarakstam:

               Pievērsiet uzmanību marķierim, tas ir kļuvis kvadrātveida:

               Rīsi. 1.3. Saraksta marķiera skats kā kvadrāts pārlūkprogrammā

               Svarīga piezīme:Šī metode vairs netiek izmantota, lai izveidotu aizzīmju sarakstu stilus. Pastāv skaidra nodalīšana starp CSS (lasiet, kas ir CSS) un HTML. HTML ir paredzēts iezīmēšanai, un CSS ir pievilcīga izskata radīšanai.

               Kods, kas satur šo atribūtu, norādot pašreizējo dokumenta veidu kā HTML5 (""), validācijas laikā parādīs kļūdu. Ja neesat dzirdējis, kas ir validācija, šī ir īstā vieta jums.

               Kļūda būs šāda:

               Rīsi. 1.4. Validatora kļūda, izmantojot saraksta atribūtu "type".

               Mēs esam sakārtojuši sarakstus ar aizzīmēm. Tagad pāriesim pie numurētiem sarakstiem un pēc tam apskatīsim ligzdotos sarakstus un vairākus gatavi piemēri, kuras visbiežāk izmanto reālās vietnēs.

               2. Numurēti saraksti HTML

               Atšķirībā no iepriekšējā veida sarakstiem, numurētajiem sarakstiem ir viena svarīga iezīme: tie tiek automātiski numurēti. Tas ir noderīgi, ja nepieciešams numurēt lielu sarakstu. To darot manuāli, būs nepieciešams daudz laika, un jūs joprojām varat apjukt. Numurēts saraksts tiek norādīts, izmantojot tagu. Kā tas izskatās praksē:

               Numurēta saraksta piemērs:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <galva> <virsraksts > Standarta numurēta saraksta piemērs</title> </head> <ķermenis > <p> No viena līdz pieciem:</p> <ol > <li > Pirmkārt</li> <li > Otrkārt</li> <li > Trešais</li> <li > Ceturtais</li> <li > Piektais</li> </ol> </body> </html>

               Lūk, kā izskatās numurēts saraksts: standarta iestatījumi pārlūkprogrammā:

               Rīsi. 2.1. Numurēts saraksts pārlūkprogrammā ar standarta iestatījumiem

               Tāpat kā tā priekšgājējam (aizzīmju saraksts), tam ir savi skaitļu parādīšanas stili. Parastā numerācija nav vienīgais aizzīmju veids numurētajam sarakstam HTML.

               2.1 Standarta aizzīmes numurētiem sarakstiem

               Šeit mēs varam izvēlēties nevis trīs veidu marķierus, bet piecus:

               Marķiera nosaukums	"tipa" atribūta vērtība	Saraksta piemērs
               Marķieri arābu skaitļu formā	1	Badmintons Beisbols
               Marķieri mazo latīņu burtu veidā	a	Chomolungma Chogori Kančenjunga
               Marķieri lielo latīņu burtu formā	A	Virsotnes Plummets Tantruma aleja Insano
               Mazie romiešu ciparu marķieri	i	Filipīnu jūra Arābijas jūra koraļļu jūra
               Lielie romiešu ciparu marķieri	es	sarkans Zaļš Zils

               2.2. Sava numerācija HTML sarakstā

               Papildus parastajai numurēta saraksta izvadei mēs varam arī sākt numerāciju no jebkura skaitļa. Lai to izdarītu, jums jāiestata papildu atribūts "sākt" . Šī numerācija darbojas uz visu veidu marķieriem numurētiem sarakstiem. Kā tas izskatās praksē:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <galva> <virsraksts > Pielāgota numerācija numurētam sarakstam</title> </head> <ķermenis > <p> Mēs sākam numurēt no divpadsmit:</p> <ol type = "a" start = "12" > <li > Divpadsmit</li> <li > Trīspadsmit</li> <li >Četrpadsmit</li> <li > Piecpadsmit</li> <li > Sešpadsmit</li> </ol> </body> </html>

               Lūk, kā tas parādīsies īstajā vietnē:

               Rīsi. 2.2. Numerācija no patvaļīga skaitļa numurētā sarakstā

               Augšējā attēlā mēs numurējām sarakstu, sākot no divpadsmit, vienlaikus veidojot marķierus mazo latīņu burtu veidā. Tagad, manuprāt, ir kļuvis skaidrs, kā šos atribūtus izmantot savos projektos.

               Nu, tagad pāriesim pie ligzdotajiem HTML sarakstiem.

               3. Kā izveidot daudzlīmeņu (ligzdotu) sarakstu HTML

               Vietnē tiek izmantoti daudzlīmeņu saraksti, lai izveidotu izvēlnes. Šī izvēlne visbiežāk ir vai nu lejupejoša nolaižamā izvēlne (nodarbība ieslēgta), vai arī kreisā vai labā nolaižamā izvēlne. Šādas izvēlnes ļauj kompaktā formā saglabāt citus izvēlnes elementus.

               Izmantojot automašīnu modeļus kā piemēru, mēs izveidosim daudzlīmeņu sarakstu HTML valodā:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

               <html > <galva> <virsraksts > HTML ligzdoto aizzīmju saraksts</title> </head> <ķermenis > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Pikaso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </body> </html>

               Ievērojiet, kā daudzlīmeņu saraksts izskatās pārlūkprogrammā:

               Rīsi. 3.1. Vairāku līmeņu saraksta piemērs HTML valodā

               Mēs izveidojām daudzlīmeņu sarakstu, izmantojot aizzīmes (tag

               ). Ar citiem marķieriem parādījās daudzlīmeņu saraksts ar Citroen modeļiem. Galvenajā sarakstā ir aizpildītas aizzīmes, un 2. līmeņa sarakstā ir tukši apļi. Bet, kā jūs atceraties, izmantojot atribūtu “type”, mēs varam atkārtoti definēt marķierus (labāk ir iestatīt ).

               Bet mēs varam apvienoties daudzlīmeņu saraksti numurētas un marķētas šādi:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

               <html > <galva> <virsraksts > Numurēti, aizzīmēm un daudzlīmeņu saraksti HTML</title> </head> <ķermenis > <ul > <li > Pirmā tulpju grupa<ol > <li > Pirmā klase<ul > <li > Vienkāršas agrīnās tulpes</li> </ul> </li> <li > Otrā klase<ul > <li > Frotē tulpes</li> </ul> </li> </ol> </li> </ul> </body> </html>

               Iepriekš minētajā piemērā mums ir dubultā ligzdošana (2 līmeņi). Pirmkārt, ir iekļauts divu tulpju šķiru saraksts; mums tas ir numurēts. Pēc tam katrā numurētā saraksta vienumā tiek ligzdots saraksts ar aizzīmēm.

               Apskatīsim, kā tas izskatās pārlūkprogrammā:

               Rīsi. 3.2. Vairāku līmeņu numurēta saraksta piemērs pārlūkprogrammas sarakstam ar aizzīmēm

               4. Noderīgi materiāli par HTML sarakstiem

               Šī ir informācija, kas prasa izpratni par CSS īpašībām. Lai to izdarītu, iesaku apgūt šādas nodarbības: . Visi piemēri būs uzreiz ar avota kods un ir sadalīti cilnēs HTML (struktūra), CSS (stili) un Rezultāts (rezultāts).

               4.1. Kā HTML sarakstu izveidot virknē

               Veidojot horizontālo izvēlni, var būt nepieciešams pārveidot HTML sarakstu par virkni. Tas ir ļoti vienkārši izdarāms:

               4.2 Kā izveidot HTML sarakstu bez ikonas

               Par to atbild CSS saraksta stila tipa rekvizīts (sīkāka informācija):

               4.3. Kā centrēt sarakstu HTML

               Saraksta vienums ir bloka elements, tāpēc tas ir jācentrē, izmantojot polsterējumu. Bet ir viens svarīgs punkts— mums ir skaidri jānorāda platums, lai līdzinājums darbotos:

               4.4 Kā izveidot sarakstu HTML ar attēliem

               Pietiek tikai ar vienu CSS rekvizītu, list-style-image . URL iekšpusē norādiet adresi pirms ikonas. Es tikai vēlos atzīmēt, ka labāk ir nekavējoties atlasīt mazu attēlu, jo no tā ir atkarīgs saraksta līnijas augstums:

               4.5. Aizzīmju saraksta HTML — jūsu aizzīme

               Šajā gadījumā fontu ikonas ir jāsavieno iepriekš (piemēram, FontAwesome). Pēc tam standarta marķiera vietā varat izveidot jebkuru ikonu:

               4.6. Kā izveidot sarakstu HTML valodā vairākās kolonnās

               Lai izveidotu sarakstu vairākās kolonnās, mēs izmantosim CSS īpašums kolonnu skaits (īpašums tiek atbalstīts tikai šādās pārlūkprogrammās: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Lai redzētu sadalījumu vairākās kolonnās, ir jāiestata arī saraksta augstums:

               5. HTML Combo saraksts

               Lai izveidotu kombinēto lodziņu HTML ir labāks Vienkārši izmantojiet ikonu fontus. Piemēram, Flaticon vai Fontawesome.

               Šī informācija jau ir paredzēta pieredzējušiem cilvēkiem, tāpēc vispirms jums būs nepieciešams.

               6. Praktizējiet darbu ar sarakstiem

               Zemāk esošajā videoklipā varat redzēt visu darbu ar HTML sarakstiem praksē:

               Lai apkopotu saņemto informāciju, iesaku visas darbības veikt manuāli. Izmēģiniet dažādas aizzīmes sarakstiem, izveidojiet numurētus sarakstus un pēc tam pārejiet uz daudzlīmeņu (ligzdotajiem) sarakstiem un eksperimentējiet ar tiem.

               Šeit mēs pabeidzam sarakstus un pārejam uz nākamo nodarbību par attēliem.

               Ja jums ir nepieciešami vairāk nekā tikai vietņu veidošanas pamati, bet vēlaties apgūt Front-end izstrādātāja profesiju, pievērsiet uzmanību tiešsaistes skolas Netology kursam - "" un tiešsaistes skolai Skillbox un kursam "".

               Kurss ilgst ilgu laiku, bet jūs saņemsiet strukturētas zināšanas, ar kurām jūs varat nekavējoties iegūt darbu, ja jūs interesē šī joma.