HTML uch xil turdagi ro'yxatlarni qo'llab-quvvatlaydi, ularning har biri o'z ro'yxat turlariga ega:

• – har bir elementi tartib raqami (harf)ga ega bo‘lgan raqamlangan (raqamlar yoki harflar yordamida) ro‘yxat;
  1. - har bir elementi yonida marker qo'yilgan (seriya raqamini ko'rsatadigan raqamli yoki alifbo belgilaridan ko'ra) marker qo'yilgan (raqamsiz) ro'yxat;

     • – taʼriflar roʻyxati atamalar va taʼriflarni oʻz ichiga olgan nom/qiymat juftliklaridan iborat.

     Raqamlangan ro'yxatlar

     Raqamlangan ro'yxatda brauzer avtomatik ravishda ma'lum bir qiymatdan (odatda 1) boshlab element raqamlarini tartib bilan kiritadi. Bu raqamlashni buzmasdan ro'yxat elementlarini kiritish va o'chirish imkonini beradi, chunki qolgan raqamlar avtomatik ravishda qayta hisoblab chiqiladi.
     Raqamlangan ro'yxatlar blok elementi yordamida tuziladi

     (Inglizcha tartiblangan ro'yxat - raqamlangan ro'yxatdan). Konteyner yonida
     har bir ro'yxat elementi uchun element joylashtiriladi
     1. (inglizcha ro'yxat elementidan - ro'yxat elementi). Standart arab raqamlari bilan raqamlangan ro'yxatdir.
        teg
        quyidagi sintaksisga ega:
        1. element 1
        2. element 2
        3. element 3

        Raqamlangan ro'yxat elementlari quyidagi misolda ko'rsatilganidek, bir nechta ro'yxat elementlarini o'z ichiga olishi kerak:

        Misol: raqamlangan ro'yxat

        • O'zingiz sinab ko'ring "

        Bosqichma-bosqich ko'rsatma

        1. Kalitni oling
        2. Kalitni qulfga soling
        3. Kalitni ikki marta aylantiring
        4. Kalitni qulfdan chiqarib oling
        5. Eshikni ochish

        Bosqichma-bosqich ko'rsatma

        1. Kalitni oling
        2. Kalitni qulfga soling
        3. Kalitni ikki marta aylantiring
        4. Kalitni qulfdan chiqarib oling
        5. Eshikni ochish

        Ba'zan mavjud HTML kodlarini ko'rib chiqishda siz argumentga duch kelasiz turi elementda

        , bu raqamlash turini ko'rsatish uchun ishlatiladi (harflar, rim va arab raqamlari va boshqalar). Sintaksis:

        Bu yerda: type – belgilar ro‘yxati:

        • A - bosh lotin harflari (A, B, C...);
        • a - kichik lotin harflari (a, b, c...);
        • I - katta rim raqamlari (I, II, III...);
        • i - kichik rim raqamlari (i, ii, iii...);
        • 1 - arab raqamlari (1, 2, 3 ...) (sukut bo'yicha ishlatiladi).

        Agar siz ro'yxat 1 dan boshqa raqam bilan boshlanishini istasangiz, buni atribut yordamida belgilashingiz kerak boshlash teg

        .
        Quyidagi misol katta Rim raqamlari va XLIX boshlang'ich qiymati bilan raqamlangan ro'yxatni ko'rsatadi:

        Raqamlashni atribut yordamida ham boshlash mumkin qiymat, bu elementga qo'shiladi

        1. quyida bayon qilinganidek:

        7. Bunday holda, ro'yxatning ketma-ket raqamlanishi to'xtatiladi va shu vaqtdan boshlab raqamlash yana boshlanadi, bu holda ettidan.

           Atributlardan foydalanish misoli qiymat teg

        8. , bu sizga berilgan ro'yxat elementining sonini o'zgartirish imkonini beradi:

           Ushbu misolda "Birinchi ro'yxat elementi" 1 raqami, "Ikkinchi ro'yxat bandi" 7 raqami va "Ro'yxatning uchinchi elementi" 8 raqami bo'ladi.

           CSS yordamida raqamlangan ro'yxatlarni formatlash

           Ro'yxat raqamlarini o'zgartirish uchun siz xususiyatdan foydalanishingiz kerak ro'yxat uslubi turi CSS uslublar jadvallari:

           Raqamlangan ro'yxat uslublari

           Misol	Ma'nosi	Tavsif
           a, b, c	pastki alfa	Kichik harf
           A, B, C	yuqori alfa	Bosh harflar
           i, ii, iii	pastki rim	Kichik harflarda rim raqamlari
           I, II, III	yuqori rimlik	Rim raqamlari bosh harflar bilan

           Misol: CSS xususiyatini qo'llash ro'yxat uslubi turi

           Belgilangan ro'yxatlar

           Belgilangan ro'yxatlar mohiyatan raqamlangan ro'yxatlarga o'xshaydi, faqat ular elementlarning ketma-ket raqamlanishini o'z ichiga olmaydi. Belgilangan ro'yxatlar blok elementi yordamida tuziladi

           (Ingliz tilidan tartibsiz ro'yxat - raqamlanmagan ro'yxat). Har bir ro'yxat elementi, raqamlangan ro'yxatlardagi kabi, teg bilan boshlanadi
           • . Brauzer ro'yxatning har bir elementini cheklaydi va avtomatik ravishda markerlarni ko'rsatadi.
             teg
             quyidagi sintaksisga ega:
             • Birinchi nuqta
             • Ikkinchi nuqta
             • Uchinchi nuqta

             Quyidagi misolda, sukut bo'yicha, ro'yxatning har bir elementi oldiga to'ldirilgan doira shaklida kichik marker qo'shilganligini ko'rishingiz mumkin:

             Teg ichida

             • Faqat matnni joylashtirish shart emas, oqimli kontentning har qanday elementini (havolalar, paragraflar, rasmlar va boshqalar) joylashtirish mumkin.

               Oʻrnatilgan roʻyxatlar

               Har qanday ro'yxat boshqasiga joylashtirilishi mumkin. Element ichida
             • Ichki ro'yxat yoki ikkinchi darajali ro'yxat yaratish joizdir. Roʻyxatni joylashtirish uchun element ichidagi yangi roʻyxatni tasvirlab bering
             • allaqachon mavjud ro'yxat. Bitta markirovka qilingan roʻyxatni boshqasiga joylashtirganingizda, brauzer ikkinchi darajali roʻyxat uchun markirovka uslubini avtomatik ravishda oʻzgartiradi. Har qanday ro'yxat boshqasiga joylashtirilishi mumkin. Quyidagi misol raqamlangan ro'yxatning ikkinchi elementiga joylashtirilgan markirovka qilingan ro'yxatning tuzilishini ko'rsatadi.

               Misol: Ichki ro'yxatlar

               • O'zingiz sinab ko'ring "
               • dushanba
                 1. Pochta yuboring
                 2. Muharrirga tashrif
                    • Mavzu tanlash
                    • Dekorativ dizayn
                    • Yakuniy hisobot
                 3. Kechqurun xabarlarni ko'rish
               • seshanba
                 1. Jadvalni qayta ko'rib chiqish
                 2. Rasmlarni yuborish
               • Chorshanba...
               • dushanba
                 1. Pochta yuboring
                 2. Muharrirga tashrif
                    • Mavzu tanlash
                    • Dekorativ dizayn
                    • Yakuniy hisobot
                 3. Kechqurun xabarlarni ko'rish
               • seshanba
                 1. Jadvalni qayta ko'rib chiqish
                 2. Rasmlarni yuborish
               • Chorshanba...

               Belgilangan ro'yxatlarni formatlash

               Ro'yxat belgisining ko'rinishini o'zgartirish uchun xususiyatdan foydalaning ro'yxat uslubi turi CSS uslublar jadvallari:

               Quyidagi misolda markirovka qilingan roʻyxatlarning turli uslublari koʻrsatilgan:

               Misol: Belgilar ro'yxati uslublari

               • O'zingiz sinab ko'ring "
               • Kofe
               • Kofe
               • Kofe
               • Kofe

               Disk:

               • Kofe
               • Sut

               Davra:

               • Kofe
               • Sut

               Kvadrat:

               • Kofe
               • Sut

               Yo'q:

               • Kofe
               • Sut

               Grafik belgilar.

               HTMLda grafik markerlar bilan ro'yxat yaratish mumkin. Ro'yxat markerlari standart doiralar yoki kvadratlar bo'lsa, bu boshqa narsa va ishlab chiquvchining o'zi sahifa dizayniga muvofiq markerni tanlaganida mutlaqo boshqa narsa. Ro'yxat elementlarini chiroyli qilish uchun ko'pincha kichik rasmlardan foydalaniladi.
               Oddiy markerni grafik bilan almashtirish uchun xususiyatni almashtiring ro'yxat uslubi turi mulk uchun ro'yxat uslubidagi tasvir va rasmning URL manzilini ko'rsating:

               Misol: Grafik belgilar

               • O'zingiz sinab ko'ring "

               Burj belgilari

               • Toros
               • Egizaklar

               Burj belgilari

               • Qo'y
               • Toros
               • Egizaklar

               Ta'riflar ro'yxati (ta'riflar)

               Ta'riflar ro'yxati, masalan, shaxsiy atamalar lug'atini yaratish uchun juda foydali. Har bir ta'rif ro'yxati elementi ikki qismdan iborat: atama va uning ta'rifi.
               Siz butun ro'yxatni elementga joylashtirasiz

               (Ingliz tilidagi ta'riflar ro'yxatidan - ta'riflar ro'yxati). U teglarni o'z ichiga oladi

               (inglizcha ta'rif atamasidan - belgilangan so'z, atama) va

               (inglizcha ta'rif tavsifidan - aniqlanayotgan atamaning tavsifi).
               Ta'riflar ro'yxati ko'pincha ilmiy, texnik va o'quv nashrlarida qo'llaniladi, ulardan lug'atlar, lug'atlar, ma'lumotnomalar va boshqalarni tuzishda foydalaniladi.

               Ta'riflar ro'yxatining umumiy tuzilishi quyidagicha:

               Birinchi muddat

               Birinchi atama tavsifi

               Ikkinchi muddat

               Ikkinchi atama tavsifi

               Quyidagi misol ta'riflar ro'yxatidan mumkin bo'lgan foydalanishni ko'rsatadi:

               Misol: Ta'riflar ro'yxati

               • O'zingiz sinab ko'ring "

               World Wide Web - ingliz tilidan. World Wide Web (WWW) - bu Internetga ulangan turli kompyuterlarda joylashgan tegishli hujjatlarga kirishni ta'minlaydigan taqsimlangan tizim. Internet - axborotni uzatish uchun yagona almashish protokolidan foydalanadigan tarmoqlar to'plami. Veb-sayt - bu havolalar va yagona dizayn bilan o'zaro bog'langan alohida veb-sahifalar to'plami.

               World Wide Web

               - ingliz tilidan World Wide Web (WWW) - bu Internetga ulangan turli kompyuterlarda joylashgan tegishli hujjatlarga kirishni ta'minlaydigan taqsimlangan tizim.

               Internet

               — axborotni uzatish uchun yagona almashuv protokolidan foydalanadigan tarmoqlar majmui.

               Veb-sayt

               - havolalar va yagona dizayn bilan o'zaro bog'langan alohida veb-sahifalar to'plami.

               Odatiy bo'lib, atama matni brauzer oynasining chap chetiga bosiladi va atama tavsifi quyida joylashgan va o'ngga siljiydi.

               HTMLda roʻyxatlarning ikki turi mavjud: raqamlangan va raqamlanmagan. Ularning yaratilishi deyarli bir xil. Hatto teglar ham bir belgi bilan farqlanadi. Siz ham raqamlangan, ham markerni o'z ichiga oladigan yaratishingiz mumkin.

               Ushbu ro'yxatlar siz xohlagan tarzda o'zgartirilishi mumkin. Hammasi sizning tasavvuringizga bog'liq. Birinchidan, biz Word muharririda bo'lgani kabi standart ro'yxatlarni ko'rib chiqamiz, so'ngra ularni takomillashtirish va tanib bo'lmaydigan darajada loyihalashtiramiz.

               HTML raqamlangan ro'yxati

               Oddiy raqamlangan raqam quyidagi teglar yordamida yaratilishi mumkin:

               Birinchi ro'yxat elementi

               Ro'yxatdagi ikkinchi element

               Ro'yxatdagi uchinchi element

               Oddiy ro'yxatlar shunday ko'rinadi

               Standartlarga ko'ra, ro'yxatning har bir elementi ochilish va yopish li tegi ichida bo'lishi kerak. Ammo agar siz yopilish belgisini qo'ymasangiz, natija aynan bir xil bo'ladi. Protsessor juda aqlli. Ro'yxatni o'zgartirish paytida u ochilish teglarini tahlil qiladi. Agar u yangisini ko'rsa

               , keyin avtomatik ravishda uning oldiga qo'yadi

               .

               Shunday qilib, ro'yxatlar quyida ko'rsatilganidek tuzilishi mumkin.

               

               Ammo professionallar nuqtai nazaridan, bu noto'g'ri.

               

               Raqamsiz (yoki markirovka qilingan) roʻyxatlar xuddi shunday tuziladi, faqat ol tegi oʻrniga ul yoziladi.

               Raqamlar yoki harflar yo'q - faqat markerlar deb ataladigan turli xil belgilar.

               

               HTML ko'p darajali raqamlangan ro'yxat

               Ko'pgina foydalanuvchilar ushbu imkoniyatga qiziqishmoqda. Shu sababli, har qanday raqamlangan HTML ro'yxatini ko'p darajali qilish mumkinligini ta'kidlash kerak. Qo'shimcha darajalar bir xil yoki etiketli bo'lishi mumkin.

               

               Yuqoridagi misolda ko'rsatilgan ro'yxatni yaratish uchun siz quyidagilarni yozishingiz kerak.

               

               E'tibor bering, ushbu kodda, birinchi misollardan farqli o'laroq, type atributi qo'shilgan. Uning yordamida siz raqamlangan va markirovka qilingan ro'yxatlar uchun saralash turini belgilashingiz mumkin.

               Raqamlanganlar uchun biz alifbo yoki raqamlar turini, boshqa holatlar uchun esa marker turini ko'rsatamiz.

               Agar siz maxsus HTML tegidan foydalansangiz, raqamlangan ro'yxat siz xohlagan narsaga aylanishi mumkin.

               Jadvaldagi istalgan qiymat bilan type atributini belgilashingiz mumkin. Yoki CSS uslubi sinfida ro'yxat uslubi turini kerakli tartiblash turi bilan belgilang.

               

               Qadriyatlarni tarjima qilish juda oddiy. Ingliz tilini bilishning o'zi kifoya. Ammo "doira", "kvadrat" va hokazo so'zlarni tarjima qila olmasangiz ham, ushbu qiymatlarni type atributida ko'rsatishda natija qanday bo'lishini vizual tarzda tushunishingiz mumkin.

               Raqamlangan ro'yxatlar uchun quyidagi variantlardan foydalaning:

               • 1 - arab raqamlari;
               • A - bosh harflar;
               • a - kichik lotin harflari;
               • I - bosh rim raqamlari;
               • i - kichik rim raqamlari.

               Standart har doim ro'yxat bo'ladi. Ya'ni, agar siz hech narsa belgilamasangiz, u type="1" bilan bir xil bo'ladi.

               Bundan tashqari, raqamlangan ro'yxatlar istalgan joydan boshlanishi mumkin. Odatiy bo'lib, chiqish 1 dan boshlanadi. Ammo agar xohlasangiz, kamida yuzdan boshlashingiz mumkin. Buning uchun har qanday qiymat bilan start atributini ko'rsatish kerak.

               

               Bundan tashqari, siz teskari tartibda xulosa chiqarishingiz mumkin. Buning uchun siz teskari yozishingiz kerak.

               

               Ro'yxatlar dizayni

               HTML-raqamli ro'yxat shu qadar chiroyli tarzda ishlab chiqilishi mumkinki, siz bu oddiy ro'yxat ekanligini va Photoshop-da yaratilgan rasm emasligini darhol anglamasligingiz mumkin.

               Bu erda chiroyli ro'yxatlar misollari.

               

               Misoldan ko'rinib turibdiki, siz raqamlash va elementlarning ko'rinishini o'zgartirishingiz mumkin.

               Siz shunday muntazam ro'yxat yaratishingiz mumkin.

               

               CSS uslublarida siz ol teglari uchun dizaynni belgilashingiz kerak. Shuni esda tutingki, bu holda sozlamalar ushbu uslub fayli ishlatiladigan saytdagi barcha ro'yxatlarga qo'llaniladi.

               

               Keling, avval dumaloq ro'yxat dizayni bilan variantni ko'rib chiqaylik. Ro'yxat kodiga qayting. U erda sinfning yaxlitlangan ro'yxati ko'rsatilgan. Bunday go'zallikni yaratish uchun siz bu sinf bilan shug'ullanishingiz kerak. Siz sinfni xohlaganingizcha nomlashingiz mumkin.

               

               

               

               Endi kvadrat dizaynini ko'rib chiqaylik.

               

               Uslublar juda o'xshash. Farqi shundaki, birinchi holatda element CSS imkoniyatlaridan foydalangan holda yaxlitlanadi.

               Professional maket dizayneri barcha foydalanuvchilar zamonaviy kompyuterlardan foydalanmasligini oldindan bilishi va tushunishi kerak. Hamma ham Windows 7, 8, 10 o'rnatilmagan. Hali ham Windows XP-da bo'lgan va Internet Explorer brauzerining eski versiyalaridan foydalanadigan foydalanuvchilarning foizi bor.

               Qoida tariqasida, elementlarning deyarli barcha zamonaviy dizayn yaxshilanishlari ular tomonidan qo'llab-quvvatlanmaydi. Foydalanuvchiga sayt dizaynida umuman ish qilinmagandek tuyuladi. Hamma narsa uzoqlashdi. Elementlar bir-biri bilan to'qnashadi. Bunga yo'l qo'ymaslik uchun barcha variantlarni ko'rib chiqish kerak.

               Ba'zi veb-ustalar ularga ko'z yumadilar, chunki ularning zamonaviy bozordagi ulushi tobora kichikroq bo'ladi. Ammo professional uchun har bir tashrif buyuruvchi muhim ahamiyatga ega, ayniqsa, agar u tijorat sayti bo'lsa.

               Hammaga mos keladigan narsani yarating yoki brauzerning barcha o'zgarishlarini hisobga oling.

               HTMLda barcha teglar to'plami ro'yxatlarni tashkil qilish uchun javobgardir, ularning tashkil etilishi ma'lumotlarni tuzilishning ma'lum qoidalariga mos kelishi kerak.

               HTML standartining beshinchi versiyasi 3 turdagi ro'yxatlarni qo'llab-quvvatlaydi: raqamlangan ro'yxatlar, markirovka qilingan ro'yxatlar va ta'riflar ro'yxati. Shuningdek, u roʻyxatlarni bir-biriga joylashtirish, koʻp darajali roʻyxatlarni yaratish imkonini beradi.

               Raqamlangan ro'yxat

               Raqamlangan ro'yxat- bu ma'lum bir ketma-ketlikka ega bo'lgan elementlar to'plami (ro'yxat elementlari). Raqamlangan ro'yxatdagi har bir elementda elementning ro'yxatdagi boshqa elementlarga nisbatan paydo bo'lish tartibini ko'rsatadigan noyob marker mavjud. Odatiy bo'lib, raqamlangan ro'yxat elementi belgilari raqamlardir. Birinchi element 1 raqami, ikkinchisi 2 va hokazo.

               Raqamli ro'yxatlarning eng keng tarqalgan namunalari turli xil idishlarni tayyorlash uchun retseptlardir. Har qanday retsepti aniq harakatlar ketma-ketligi bilan raqamlangan ro'yxat bo'lgani uchun.

               HTMLda raqamlangan ro'yxatlar yaratish uchun tegdan foydalaning

               , ichida ma'lumotlarga ega ro'yxat elementlari joylashgan. Har bir ro'yxat elementi teg yordamida ko'rsatiladi
               1. :

                  Raqamlangan ro'yxat:

                  1. Kofe
                  2. Choy
                  3. Sut
                  Sinab ko'ring »

                  Eslatma: teg

                  faqat asosiy elementlar sifatida teglarni o'z ichiga olishi mumkin
                  1. , ya'ni raqamlangan ro'yxatning barcha mazmuni elementlarning ichiga joylashtirilishi kerak
                  2. . teg
                  3. , o'z navbatida, kontentda hech qanday cheklovlar yo'q, shuning uchun siz unga paragraflar, rasmlar, havolalar, jadvallar, boshqa ro'yxatlar va hokazolarni joylashtirishingiz mumkin.

                     Belgilangan roʻyxat

                     Belgilangan roʻyxat- bular raqamlanmagan, ya'ni tartibsiz elementlar ro'yxati, ularning ketma-ketligi muhim emas. Barcha markirovka qilingan roʻyxat elementlari bir xil oʻqlarga ega va sukut boʻyicha ular kichik qora doiralar koʻrinishida koʻrinadi.

                     HTMLda markirovka qilingan roʻyxatlar yaratish uchun tegdan foydalaning

                     , uning ichida ro'yxat elementlarining o'zi joylashgan (raqamlangan ro'yxatlarda bo'lgani kabi, teg
                     • ro'yxatning barcha ko'rsatilgan tarkibini o'z ichiga oladi):

                       Belgilangan roʻyxat:

                       • Kofe
                       • Choy
                       • Sut
                       Sinab ko'ring »

                       Markerlarning turlari

                       Raqamlangan roʻyxat punktlarining turlari turi atributi yordamida oʻzgartirilishi mumkin. Ushbu atribut besh turdagi markerlarni qo'llab-quvvatlaydi:

                       Belgilangan roʻyxatlar turi atributiga ega emas, shuning uchun siz HTML yordamida markirovka qilingan roʻyxat uchun marker turini oʻzgartira olmaysiz. Marker turini o'zgartirish uchun, bu holda, CSS xususiyatidan foydalanishingiz mumkin list-style-type , uning yordamida standart qiymatdan tashqari yana ikkita marker turini tanlashingiz mumkin: doira yoki kvadrat .

                       Ro'yxat belgilarini o'zgartirish:

                       type="a" atributli raqamlangan ro'yxat:

                       1. Olmalar
                       2. Bananlar
                       3. Limonlar

                       type="I" atributiga ega raqamlangan ro'yxat:

                       1. Olmalar
                       2. Bananlar
                       3. Limonlar

                       Belgilangan ro'yxat belgilarining turlari:

                       • Olmalar
                       • Bananlar
                       • Limonlar
                       • Olmalar
                       • Bananlar
                       • Limonlar
                       Sinab ko'ring »

                       CSS xususiyati list-style-type , markerli roʻyxatlar uchun markerlar turlariga qoʻshimcha ravishda, raqamlangan roʻyxatlar uchun koʻplab turdagi markerlarga ega. Ammo bitta standart turdagi markerni boshqasiga o'zgartirish har doim ham chiroyli ro'yxat yaratish uchun etarli emas. Ro'yxatlarni loyihalash uchun faqat markerning ko'rinishini o'zgartirishga emas, balki markerlarni rasmlar bilan almashtirishga, ularning joylashishini nazorat qilishga va chekinishni boshqarishga imkon beruvchi CSS-dan foydalanish yaxshiroqdir. Bularning barchasini qanday qilishni ko'rishingiz mumkin.

                       Gorizontal ro'yxat

                       Agar siz gorizontal menyu yaratish uchun HTML ro'yxatidan foydalanayotgan bo'lsangiz, ro'yxat elementlarini bir qatorda ketma-ket joylashtirishingiz kerak bo'ladi. Buni HTML yordamida amalga oshirish mumkin emas, shuning uchun siz CSS-dan foydalanishingiz kerak bo'ladi.

                       Gorizontal roʻyxat yaratish uchun siz foydalanmoqchi boʻlgan boshqa xususiyatlarga qarab inline yoki inline-block qiymatiga ega roʻyxat elementlari uchun CSS koʻrsatish xususiyatini oʻrnatishingiz kerak.

                       Raqamlangan ro'yxat

                       1. Olmalar
                       2. Bananlar
                       3. Limonlar

                       Belgilangan roʻyxat:

                       • Olmalar
                       • Bananlar
                       • Limonlar
                       Sinab ko'ring »

                       Shundan so'ng, barcha ro'yxat elementlari bitta qatorga joylashtiriladi. E'tibor bering, o'qlar ro'yxat elementlaridan yo'qoladi va ular orasida hatto bo'sh joy ham qolmaydi, lekin ro'yxatning chap chegarasi qoladi.

                       Gorizontal ro'yxatni gorizontal menyuga qanday aylantirishni ko'rishingiz mumkin.

                       Yagona farq shundaki, bu teg qat'iy ravishda ro'yxatlarni raqamlash uchun yaratilgan. Tegning nomi inglizcha "Buyurtma ro'yxati" qisqartmasidan olingan - raqamlangan ro'yxat.

                       Teg sintaksisi

                       1. №1 element
                       2. №2 element
                       3. №3 element
                       4. ...

                     Bu yerda type="value" atributi quyidagi qiymatlarni qabul qilishi mumkin

                     • A - katta lotin harflari ko'rinishidagi markerlarni o'rnatadi (A, B, C..);
                     • a - kichik lotin harflari ko'rinishidagi markerlarni o'rnatadi (a, b, c..);
                     • I - katta rim raqamlari ko'rinishidagi markerlarni o'rnatadi (I, II, III, IV..);
                     • i - kichik rim raqamlari ko'rinishidagi markerlarni o'rnatadi (i, ii, iii, iv..);
                     • 1 (standart) - arab raqamlari ko'rinishidagi markerlarni o'rnatadi (1, 2, 3..);

                     Start="value" atributi hisobotning boshlang'ich qiymatini (boshlang'ich qiymatini) belgilaydi.

                     Reversed atributi teskari hisoblashni belgilaydi (agar kerak bo'lsa).

                     teg

                     yopish tegidan majburiy foydalanishni talab qiladi

                     Juftlangan teg ro'yxat elementlarini shakllantirish uchun ishlatiladi

                  4. . Ochilish va yopish teglari o'rtasida alohida so'zlar, iboralar, paragraflar, rasmlar, kod qismlari va boshqa ko'p narsalar mavjud bo'lib, ular markirovka qilingan ro'yxatning mazmuni hisoblanadi.

                     Eslatma

                     Ro'yxatda siz hisobni o'zingizga o'zgartirishingiz mumkin. Buning uchun tegda maxsus qiymat = "" atributi mavjud

                  5. , ba'zi bir raqamli qiymat tayinlangan. Masalan

                     1. №1 element
                     10. №2 element
                     11. №3 element

               Htmldagi raqamlangan ro'yxatlarga misollar (

               )

               Misol 1. Lotin harflarida HTML raqamlangan ro'yxat

               Katta harflar bilan misol

               1. №1 element
               2. №2 element
               3. №3 element

               1. №1 element
               2. №2 element
               3. №3 element

               Kichik harflar bilan misol

               1. №10 element
               2. №11 element
               3. №12 element

               Bu sahifada shunday ko'rinadi:

               1. №1 element
               2. №2 element
               3. №3 element

               Misol 2. Rim harflaridagi HTML raqamlangan ro'yxat

               Katta harflar bilan misol

               1. №1 element
               2. №2 element
               3. №3 element

               Bu sahifada shunday ko'rinadi:

               1. №1 element
               2. №2 element
               3. №3 element

               Kichik harflar bilan misol

               1. №1 element
               2. №2 element
               3. №3 element

               Bu sahifada shunday ko'rinadi:

               1. №1 element
               2. №2 element
               3. №3 element

               Misol 3. Raqamlangan ro'yxat html turli boshlang'ich pozitsiyasi

               Hisoblagichning boshlang'ich qiymatini o'rnatish imkonini beruvchi start atributining imkoniyatlarini ko'rsatadigan misol.

               50. №1 element
               51. №2 element
               52. №3 element

               Bu sahifada shunday ko'rinadi:

               1. №1 element
               2. №2 element
               3. №3 element

               Misol 4. Html raqamlangan ro'yxatlar sonini o'zgartirish

               Quyida teglarda yangi elementlarni ko'rsatishda qiymat atributidan foydalangan holda hisoblagich qiymatlarini o'zgartirish imkoniyatiga misol keltirilgan.

               • .

                 10. №1 element
                 11. №2 element
                 100. №3 element
                 101. №4 element

                 Bu sahifada shunday ko'rinadi:

                 1. №1 element
                 2. №2 element
                 3. №3 element
                 4. №4 element

                 Misol 5. Htmldagi teskari raqamlangan ro'yxat

                 Quyida teskari raqamlangan ro'yxatga misol keltirilgan (teskari tartibda hisoblash).

                 10. №1 element
                 11. №2 element
                 12. №3 element
                 13. №4 element

                 Bu sahifada shunday ko'rinadi:

                 1. №1 element
                 2. №2 element
                 3. №3 element
                 4. №4 element

                 Ta'riflar ro'yxatlari ro'yxatdagi muayyan ob'ektlar va ularning ta'riflarini bog'laydi. Misol uchun, agar siz xaridlar ro'yxatidagi narsalarga ta'riflar qo'shmoqchi bo'lsangiz, buni shunday qilishingiz mumkin:

                 sut Oq suyuq sut mahsuloti. non Undan tayyorlangan oziq-ovqat mahsuloti. sariyog' - sariq rangli qattiq sut mahsuloti. kofe loviyalari Ba'zi qahva daraxtlarining mevalari urug'lari.

                 Har bir ta'rif va atama ta'riflar guruhidir (yoki nom-qiymat guruhi). Siz xohlagancha ta'rif guruhlariga ega bo'lishingiz mumkin, lekin har bir guruh kamida bitta atama va kamida bitta ta'rifga ega bo'lishi kerak. Ta'rifsiz atama yoki atamasiz ta'rif bo'lishi mumkin emas.

                 Bitta ta'rif bilan bir nechta atamalarni bog'lash mumkin yoki aksincha. Masalan, "qahva" atamasi bir nechta ma'noga ega bo'lishi mumkin va siz ularni birin-ketin ko'rsatishingiz mumkin:

                 kofe - qovurilgan, maydalangan qahva loviyalaridan tayyorlangan ichimlik, bir chashka qahva, o'rta va to'q jigarrang qahva ichiladigan uchrashuv

                 Shu bilan bir qatorda, bir xil ta'rifga ega bir nechta atama bo'lishi mumkin. Bu atamaning barchasi bir xil ma'noga ega bo'lgan o'zgarishlarni ko'rsatish uchun ishlatiladi:

                 soda pop soda kola Shirin, gazlangan ichimlik

                 Ta'riflar ro'yxati boshqa turdagi ro'yxatlardan farq qiladi, chunki ular ro'yxat ob'ektlari o'rniga aniqlangan atamalar va ta'riflardan foydalanadi.

                 Shuning uchun ta'riflar ro'yxati bir juft elementlardan foydalanadi

                 , teglar guruhlarini qamrab oladi
                 Va
                 . Kamida bitta teglar guruhi birlashtirilishi kerak
                 bir guruh bilan
                 ; teglar
                 har doim birinchi navbatda turishi kerak.

                 Bitta ta'rifga ega bir atama uchun oddiy ta'riflar ro'yxati quyidagicha ko'rinadi:

                 Muddati

                 Terminning ta'rifi

                 Muddati

                 Terminning ta'rifi

                 Muddati

                 Terminning ta'rifi

                 Bu quyidagicha chiqariladi:

                 Atama Atama ta'rifi Termin atama ta'rifi Termin atama ta'rifi

                 Ushbu misolda biz bir nechta atamalarni ta'rifga bog'laymiz va aksincha:

                 Muddati

                 Terminning ta'rifi

                 Muddati

                 Muddati

                 Oldingi ikkala atama uchun ham qo'llaniladigan ta'rif

                 Quyidagi taʼriflarning ikkalasiga ham ega boʻlishi mumkin boʻlgan atama

                 Terminning bitta ta'rifi

                 Terminning yana bir ta'rifi

                 Bu quyidagicha taqdim etiladi:

                 Atama Terminning ta'rifi Term Termin Oldingi atamalarning ikkalasiga ham tegishli ta'rif Quyidagi ikkala ta'rifga ega bo'lishi mumkin bo'lgan atama atamaning bitta ta'rifi Terminning boshqa ta'rifi

                 Bir nechta atamalarni bitta ta'rif bilan bog'lash odatiy hol emas, lekin agar zarurat tug'ilsa, buni bilish yaxshidir.

                 Ro'yxat turini tanlash

                 Muayyan ro'yxat turidan foydalanishga qaror qilganda, odatda ikkita oddiy savolni berish orqali qaror qabul qilishingiz mumkin:

                 1. Shartlar aniqlanganmi (yoki boshqa nom/qiymat juftlari birlashtirilgan)?
                    • Ha bo'lsa, ta'riflar ro'yxatidan foydalaning.
                    • Agar yo'q bo'lsa, ta'riflar ro'yxatidan foydalanmang - keyingi savolga o'ting.
                 2. Ro'yxat elementlarining tartibi muhimmi?
                    • Ha bo'lsa, tartiblangan ro'yxatdan foydalaning.
                    • Agar yo'q bo'lsa, foydalaning tartibsiz ro'yxati.

                 HTML ro'yxatlari va matn o'rtasidagi farq

                 HTML ro'yxati va o'qlar yoki qo'lda yozilgan raqamlar bilan ba'zi matnlar o'rtasidagi farq nima deb hayron bo'lishi mumkin. HTML ro'yxatidan foydalanishning bir qancha afzalliklari bor:

                 • Agar tartiblangan roʻyxatdagi roʻyxat elementlarining tartibini oʻzgartirish kerak boʻlsa, ularni HTML kodida koʻchirish kifoya. Agar raqamlar qo'lda yozilgan bo'lsa, tartibni to'g'rilash uchun siz hamma narsani ko'rib chiqishingiz va har bir elementning raqamini o'zgartirishingiz kerak bo'ladi - bu juda zerikarli, hech bo'lmaganda!
                 • HTML ro'yxatidan foydalanish ro'yxatni to'g'ri shakllantirish imkonini beradi. Agar siz shunchaki katta matndan foydalansangiz, alohida elementlarni ko'proq yoki kamroq foydali tarzda shakllantirish ancha qiyin bo'ladi.
                 • HTML ro'yxatidan foydalanish kontentga shunchaki "ro'yxatga o'xshash" vizual effektni emas, balki tegishli semantik tuzilmani beradi. Bu muhim afzalliklarga ega, chunki u ekran o'quvchilariga ko'rish qobiliyati zaif foydalanuvchilarga matn va raqamlarning chalkash aralashmasini o'qishdan ko'ra, ro'yxatni o'qiyotganliklarini aytishga imkon beradi.

                 Boshqa tomondan: matn va ro'yxatlar bir xil narsa emas. Roʻyxat oʻrniga matndan foydalanish koʻproq mehnat talab qiladi va hujjatni oʻqiydiganlar uchun muammolarni keltirib chiqarishi mumkin. Shuning uchun, agar hujjat ro'yxatni talab qilsa, unda tegishli HTML ro'yxatidan foydalanish kerak.

                 Oʻrnatilgan roʻyxatlar

                 Ro'yxat elementi boshqa butun ro'yxatni o'z ichiga olishi mumkin - bu "ichilgan" ro'yxat deb ataladi. Bu ma'ruza boshida bo'lgani kabi mazmunlar jadvali kabi narsalar uchun foydali bo'lishi mumkin:

                 1. Birinchi bob 1. Birinchi bo‘lim 2. Ikkinchi bo‘lim 3. Uchinchi bo‘lim 2. Ikkinchi bob 3. Uchinchi bob

                 Esda tutish kerak bo'lgan asosiy nuqta shundaki, o'rnatilgan ro'yxat bitta ro'yxat elementiga murojaat qilishi kerak. Buni kodda aks ettirish uchun ushbu ro'yxat elementi ichiga ichki ro'yxat joylashtirilgan. Yuqoridagi ro'yxat uchun kod quyidagicha ko'rinadi:

                 1. Birinchi bob
                    1. Birinchi bo'lim
                    2. Ikkinchi bo'lim
                    3. Uchinchi bo'lim
                 2. Ikkinchi bob
                 3. Uchinchi bob

                 E'tibor bering, ichki ro'yxat elementdan keyin boshlanadi

               • va element ro'yxatini o'z ichiga olgan matn ("Birinchi bob"); va elementdan oldin tugaydi
               , element ro'yxatini o'z ichiga oladi. Ichki ro'yxatlar ko'pincha veb-sayt navigatsiya menyusining asosini tashkil qiladi, chunki ular veb-sayt tuzilishini aniqlashning qulay usuli hisoblanadi.

               Nazariy jihatdan, siz har qanday miqdordagi ro'yxatlarni joylashtirishingiz mumkin, ammo amalda ro'yxatlar juda chuqur joylashtirilgan bo'lsa, bu chalkash bo'lishi mumkin. Juda katta ro'yxatlar uchun tarkibni sarlavhali bir nechta ro'yxatlarga yoki hatto alohida sahifalarga bo'lish yaxshiroqdir.

               Bosqichma-bosqich misol

               Keling, barchasini birlashtirish uchun bosqichma-bosqich misolni ko'rib chiqaylik. Quyidagi stsenariyni ko'rib chiqing:

               Biz pazandachilik maktabi uchun kichik veb-sayt yaratmoqdamiz. Asosiy sahifada biz retseptlar sahifalariga bog'langan tasniflangan retseptlar ro'yxatini ko'rsatamiz. Har bir retsept sahifasida kerakli ingredientlar, ushbu ingredientlar bo'yicha eslatmalar va tayyorlash usuli ko'rsatilgan. Uchta toifa "Kek" (shu jumladan, "Oddiy shimgich", "Shokoladli tort" va "Olma choyi keki" uchun retseptlar); "Pechenye" ​​(jumladan, "ANZAC pechene", "Murabbo tomchilari" va "Eriyotgan daqiqalar" uchun retseptlar); va "Tez nonlar" (shu jumladan, "Damper" va "Scones" uchun retseptlar). Mijoz toifalar va retseptlar qanday tartibda ko'rsatilishiga ahamiyat bermaydi, u faqat odamlar qaysi mahsulotlar toifalar va qaysi retseptlar ekanligini tushunishlarini xohlaydi.

               Keling, ushbu veb-saytni yaratish jarayonini ko'rib chiqaylik. Ushbu bo'limda biz belgilashni yaratamiz va ro'yxatlarga ba'zi uslublarni qo'shamiz. Uslublar seriyadagi ro'yxatni shakllantirish bo'yicha ma'ruzagacha batafsil yoritilmaydi.

               Bosh sahifa tartibi

               Doctype, elementlarni o'z ichiga olgan yaxshi shakllangan HTML sahifasini yarating html, bosh va tanani tanlang va uni stepbystep-main.html sifatida saqlang. Asosiy sarlavha (h1) “HTML Pazandachilik maktabi” va (h2) “Retseptlar” sarlavhasini qo‘shing:

               HTML pazandachilik maktabi

               Retseptlar

               Retseptlar

               • Keklar
               • Pechene
               • Tez nonlar

               Li elementlari uchun chekinish kodni o'qishni osonlashtiradi, lekin bu shart emas.

               Endi siz retseptlarni sub-moddalar sifatida qo'shishingiz kerak, masalan, "Oddiy shimgich", "Shokoladli tort" va "Olma choyi keki" "Kek" toifasiga kiradi. Buning uchun har bir ro'yxat pozitsiyasida ichki ro'yxat yaratishingiz kerak. Buyurtma muhim emasligi sababli, u yana mos keladi tartibsiz ro'yxati. O'quv materialini soddalashtirish uchun barcha retseptlarni bitta retsept sahifasiga bog'lash mumkin:

               Retseptlar

               • Keklar
                 • Oddiy shimgich
                 • Shokoladli tort
                 • Olma choyi keki
               • Pechene
                 • ANZAC pechene
                 • Jam tomchilari
                 • Erish momentlari
               • Non / tez non
                 • Damper
                 • Qovoqlar