HTML-da enumni qanday qilish kerak. Belgilangan ro'yxatlar

Assalomu alaykum aziz o'quvchilar! Bugun "html asoslari" sarlavhasi ostidagi maqolalar turkumining davomi sifatida men sizni hTML ro'yxatlari yordamida ul va li teglari (tartibsiz ro'yxat), ol va li (raqamlangan ro'yxat), dl, dt, dd (ta'riflar ro'yxati).

Endi men sizni eng ko'p ishlatiladigan narsalar bilan tanishtirishda davom etaman hTML teglari, bu sayt sahifalarida ro'yxatlar yaratish uchun ishlatiladi. Agar kimdir bu nima ekanligini bilmasa, shubhasiz, quyida keltirilgan ma'lumotlardan so'ng, u darhol nimani anglatishini tushunadi, chunki materialni taqdim etishning bunday shakli juda keng tarqalgan.

HTML markerlangan ro'yxatlar - ul va li teglari

Belgilangan ro'yxat ul yorlig'i bilan belgilanadi. Ro'yxat elementlari ochilish va yopish ul teglari orasida joylashgan bo'lib, ularning har birining mazmuni o'z navbatida ochilish va yopish teglari o'rtasida joylashgan bo'lishi kerak. Darhol shuni ta'kidlaymanki, ul yorlig'i juftlangan (ochilish va yopish teglari mavjudligi), shuningdek blok, ya'ni har safar li yorlig'i tomonidan hosil qilingan elementlarni (satrlarni) o'z ichiga olgan konteyner hosil qiladi. Shunga ko'ra, li yorlig'i juft va kichik harf bilan yozilgan.

Odatiy tashqi ko'rinish marker to'ldirilgan doira bilan ifodalanadi. Shu bilan birga, quyidagi qiymatlarga ega bo'lgan type atributini qo'llash orqali uning ko'rinishini o'zgartirishingiz mumkin: disk, aylana, kvadrat. Disk qiymati (to'ldirilgan doira markerining ko'rinishini belgilaydi) standart hisoblanadi. Ya'ni, agar tip atributi ko'rsatilmagan bo'lsa, u holda markerning ko'rinishi to'ldirilgan doiraga o'xshaydi. Agar biz ushbu atributlarni ul yorlig'iga qo'shsak, biz quyidagi variantlarni olamiz:

Tabiiyki, markirovka qilingan ro'yxatdagi alohida elementlarning har bir markeriga tip atributiga mos qiymatlarni yozish orqali o'ziga xos ko'rinish berilishi mumkin.

Raqamlangan HTML ro'yxatlari - ol va li teglari

Endi ol teglari yordamida qanday qilib raqamlangan ro'yxat tuzilishini ko'rib chiqamiz (ul ga o'xshash blok va juft teglar). Li yorlig'i, shuningdek, raqamlangan HTML ro'yxati elementlarini belgilaydigan yorliq vazifasini ham bajaradi. Raqamli ro'yxat - bu raqamlangan narsalar to'plami. Raqamlash turi turi atributi bilan belgilanadi, u quyidagi qiymatlarni olishi mumkin:

A - katta lotin harflari;
a - kichik lotin harflari;
I - katta rim raqamlari;
i - kichik rim raqamlari;
1 - arab raqamlari

	Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat
Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat	Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat
Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat	Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat
Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat	Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat
Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat	Buyurtma qilingan ro'yxatda 1 ta narsa Raqamli ro'yxatda 2 ta maqola 3 ta raqamlangan ro'yxat

Shuningdek, buyumlar teskari tartibda raqamlangan raqamlangan ro'yxatni taqdim etishingiz mumkin, masalan: 3, 2, 1. Bu ol tegining zaxira atributi yordamida amalga oshiriladi.

Shuningdek, markirovka qilingan ro'yxatni 1 o'rniga boshqa har qanday raqam bilan boshlash mumkin. Buning uchun start atributidan foydalanishingiz mumkin va tip atributining qaysi qiymati o'rnatilishi muhim emas. Name atributini (1 va I) tip atributining turli xil qiymatlari bilan birgalikda ishlatish misolini ko'ring:

HTML ta'rifi ro'yxatlari - dl, dd, dt teglari

HTML ro'yxatlarining yana bir turi bu ta'riflar ro'yxati. U quyidagicha shakllanadi. Ushbu ro'yxatning tarkibi konteynerni tashkil etuvchi ochilish va yopilish dl teglari orasida joylashgan. Dt yorlig'i atamani belgilaydi va dd - bu atamaning tavsifi.

Ko'rib turganingizdek, atama bo'lgan dt tegining tarkibi chap tomonga siljiydi va ushbu atama ta'rifi bo'lgan dd tegining mazmuni kursiv bilan yoziladi. Bularning barchasi turli xil CSS uslublaridan foydalanish orqali erishiladi, ular haqida biz kelgusi nashrlarda albatta gaplashamiz.

Aytgancha, zamonaviy haqiqat shuki, html tilini alohida ajratib bo'lmaydi, shuning uchun ushbu muhim materiallarni o'tkazib yubormaslik uchun blog yangilanishiga RSS-lenta yoki elektron pochta orqali obuna bo'ling. Agar siz olgan bo'lsangiz, bugungi maqola mavzusi shu bilan yakunlanadi zarur ma'lumotlar, ijtimoiy tarmoq tugmachalarini ishlatishdan bosh tortmang.

Xayrli kun!

Ushbu maqolada siz ro'yxatlarning barcha imkoniyatlari haqida bilib olasiz, raqamlangan ro'yxatni qanday tuzishni tushunasiz, oddiy markirovka qilingan ro'yxatni o'zboshimchalik bilan o'qlar bilan yanada qiziqarli va sezilarli qilishiga yordam beradigan teglarni o'zlashtirasiz. Darsni tugatgandan so'ng, siz ro'yxatlarning qaerda ishlatilishini va qanday sharoitlarda foydalanish mumkinligini tushunasiz.

Ushbu maqola asosiy HTML bo'yicha ushbu qisqa o'quv qo'llanmaning uchinchi qismi. Ushbu darsni o'qishdan oldin, avvalgi ikkitadan o'tishni tavsiya etaman:

Maqola endi boshlandi va siz allaqachon standart markirovka qilingan ro'yxatdan foydalanishni sezishingiz mumkin. Mening veb-saytimda bu juda oddiy ko'rinadi: chap tomonda chiziq va kvadrat marker bilan kichik indent mavjud. Maqolada biz markerlarning nima ekanligini, raqamlarni qanday yaratishni va shuningdek o'zingizning markeringizni qanday qilishni batafsil ko'rib chiqamiz.

Maqolaning har bir qismida ma'lum ro'yxatlarni yaratish, ma'lum bir ro'yxatni qanday kiritish haqida batafsil tushuntirishlar bilan birga keladi.

1. HTML-da markirovka qilingan ro'yxatlar

Ushbu turdagi ro'yxatlar matndagi ma'no jihatidan o'xshash elementlar to'plamini ro'yxatlash uchun ishlatiladi. Bu bitta mavzu bilan bog'liq bo'lgan havolalar ro'yxati, matnning alohida qismlari uchun batafsil tushuntirish bo'lishi mumkin. Keling, markerlangan ro'yxatlar kodda qanday ko'rinishini ko'raylik:

Va brauzerda shunday ko'rinadi:

Shakl: 1.1. Brauzerda HTML bilan belgilangan tartibsiz ro'yxatning standart ko'rinishi

1.1 Standart o'q nuqtalari

Yuqoridagi rasmda (1.1-rasm.), Menyuning har bir elementining boshida doiralarni ko'rishingiz mumkin. Bu marker. Odatiy bo'lib, bu brauzerda to'ldirilgan doira. HTMLda markerlarning bir nechta turlari mavjud: to'ldirilgan doira, bo'sh doira va kvadrat. Ular CSS yoki uchinchi tomon rasmlarini talab qilmaydi:

1.2 Bo'sh doira sifatida ro'yxat belgisi

Siz atribut qiymatlarini bilasiz, ammo endi kodda HTML markirovka qilingan ro'yxatini qanday yaratishni ko'rib chiqamiz. Yuqoridagi jadvaldan biz turi atributi uchun ikkinchi "aylana" qiymatini tanladik va uni markerlangan ro'yxatimizga tayinladik:

<hTML\u003e <bosh\u003e <sarlavha\u003eBo'sh doiradagi marker bilan markirovka qilingan ro'yxatning misoli</ sarlavha\u003e </ bosh\u003e <tanasi\u003e <p\u003eYulduzlar:</ p\u003e <ul turi \u003d "aylana"\u003e <li\u003eSirius</ li\u003e <li\u003eArkturus</ li\u003e <li\u003ePollux</ li\u003e <li\u003eBetelgeuse</ li\u003e <li\u003eQuyosh</ li\u003e </ ul\u003e </ tanasi\u003e </ html\u003e

Keling, ushbu kod brauzerda qanday ko'rinishini ko'raylik:

Shakl: 1.2. Brauzerda aylana shaklidagi ro'yxat uchun o'q ko'rinishi

1.3 Kvadrat shaklida ro'yxat belgisi

HTML ro'yxati uchun to'rtburchak o'q bilan so'nggi misolni ko'rib chiqamiz:

Belgilagichga e'tibor bering, u kvadratga aylandi:

Shakl: 1.3. Brauzerda kvadrat ro'yxat uchun marker ko'rinishi

Muhim eslatma: bu endi markerlangan ro'yxatlarni shakllantirish uchun ishlatilmaydi. CSS (CSS nima ekanligini o'qing) va HTML o'rtasida aniq ajratish mavjud. HTML formatlash uchun, CSS esa jozibali ko'rinish yaratish uchun.

Ushbu belgini o'z ichiga olgan kod, joriy hujjat turini HTML5 (") sifatida belgilashda (""), tekshirish paytida xatolik yuz beradi. Agar tasdiqlash nima ekanligini eshitmagan bo'lsangiz, bu erga borishingiz kerak -.

Xato quyidagicha bo'ladi:

Shakl: 1.4. Ro'yxatning "turi" atributidan foydalanilganda validatorda xato

Biz o'qlangan ro'yxatlarni aniqladik. Endi raqamlangan ro'yxatlarga o'tamiz, so'ngra ichki saytlarda va ko'pincha haqiqiy saytlarda ishlatiladigan bir nechta tayyor misollarni ko'rib chiqamiz.

2. HTML dagi raqamlangan ro'yxatlar

Ro'yxatlarning avvalgi turidan farqli o'laroq, raqamlangan ro'yxatlar bitta muhim xususiyatga ega: ular avtomatik ravishda raqamlashni qo'shadilar. Bu raqamlash kerak bo'lganda foydalidir katta ro'yxat... Bu qo'lda juda uzoq vaqt talab etadi va siz hali ham adashishingiz mumkin. Teg yordamida raqamlangan ro'yxat ko'rsatiladi. Bu amalda qanday ko'rinadi:

Raqamli ro'yxatning misoli:

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

<hTML\u003e <bosh\u003e <sarlavha\u003eStandart raqamlangan ro'yxat namunasi</ sarlavha\u003e </ bosh\u003e <tanasi\u003e <p\u003eBirdan beshgacha:</ p\u003e <ol\u003e <li\u003eBirinchidan</ li\u003e <li\u003eIkkinchi</ li\u003e <li\u003eUchinchidan</ li\u003e <li\u003eTo'rtinchi</ li\u003e <li\u003eBeshinchi</ li\u003e </ ol\u003e </ tanasi\u003e </ html\u003e

Raqamli ro'yxat quyidagicha ko'rinadi standart sozlamalar brauzerda:

Shakl: 2.1. Standart sozlamalarga ega brauzerda raqamlangan ro'yxat

Oldingisi singari (markalangan ro'yxat), u raqamlarni ko'rsatish uchun o'ziga xos uslublarga ega. Oddiy raqamlash HTML-dagi raqamlangan ro'yxat uchun yagona turdagi o'q emas.

2.1 Raqamli ro'yxat uchun standart o'qlar

Bu erda biz uchta turdagi markerlarni emas, balki beshtasini tanlashimiz mumkin:

Marker nomi	"Tur" atributining qiymati	Ro'yxat misoli
Arabcha raqamlar	1	Badminton Beysbol
Kichik lotin harflari ko'rinishidagi belgilar	a	Xomolungma Chogori Kanchenjunga
Katta lotin harflari ko'rinishidagi belgilar	A	Sammit keskin tushib ketdi Tantrum xiyoboni Insano
Kichik Rim raqamlari	men	Filippin dengizi Arab dengizi Marjon dengizi
Katta rim raqamlari	Men	Qizil Yashil Moviy

2.2 HTML ro'yxatidagi maxsus raqamlash

Raqamli ro'yxatning odatdagi chiqishi bilan bir qatorda biz raqamlashni istalgan raqamdan boshlashimiz mumkin. Buning uchun qo'shimcha "start" atributini o'rnatishingiz kerak. Ushbu raqamlash raqamlangan ro'yxatlar uchun barcha turdagi o'qlar uchun ishlaydi. Bu amalda qanday ko'rinadi:

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

<hTML\u003e <bosh\u003e <sarlavha\u003eRaqamli ro'yxat uchun bepul raqamlash</ sarlavha\u003e </ bosh\u003e <tanasi\u003e <p\u003eBiz o'n ikkida raqamlashni boshlaymiz:</ p\u003e <ol type \u003d "a" start \u003d "12"\u003e <li\u003eO'n ikki</ li\u003e <li\u003eO'n uchta</ li\u003e <li\u003eO'n to'rt</ li\u003e <li\u003eO'n besh</ li\u003e <li\u003eO'n olti</ li\u003e </ ol\u003e </ tanasi\u003e </ html\u003e

Bu jonli saytda qanday ko'rsatiladi:

Shakl: 2.2. Raqamli ro'yxatdagi ixtiyoriy raqamdan raqamlash

Yuqoridagi rasmda biz markerlarni kichik lotin harflari ko'rinishida yasab, ro'yxatni o'n ikkidan boshlab raqamladik. Endi, menimcha, ushbu atributlardan loyihalaringizda qanday foydalanish kerakligi aniq bo'ldi.

Hozircha ichki HTML ro'yxatlariga o'tamiz.

3. HTML-da ko'p darajali (ichki) ro'yxatni qanday tuzish kerak

Saytda menyu tuzishda ko'p darajali ro'yxatlar qo'llaniladi. Ushbu menyu ko'pincha pastga ochiladigan (dars yoqilgan) yoki chapga yoki o'ngga ochiladiganga o'xshaydi. Bunday menyular boshqa menyu elementlarini ixcham shaklda saqlashga imkon beradi.

Masalan, avtoulov modellaridan foydalanib, biz HTML-da ko'p darajali ro'yxatni tuzamiz:

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

<hTML\u003e <bosh\u003e <sarlavha\u003eHTML joylashtirilgan markirovka qilingan ro'yxat</ sarlavha\u003e </ bosh\u003e <tanasi\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBerlingo</ li\u003e <li\u003eC1</ li\u003e <li\u003eC2</ li\u003e <li\u003eC3 Pikasso</ li\u003e <li\u003eC4 Grand Picasso</ li\u003e </ ul\u003e </ li\u003e <li\u003eKIA</ li\u003e <li\u003eToyota</ li\u003e <li\u003eAudi</ li\u003e <li\u003eLexus</ li\u003e </ ul\u003e </ tanasi\u003e </ html\u003e

Brauzerda ko'p darajali ro'yxat qanday ko'rinishiga e'tibor bering:

Shakl: 3.1. HTML-dagi ko'p darajali ro'yxatning misoli

Biz marker (yorliq) yordamida ko'p darajali ro'yxat tuzdik

Ammo biz ko'p darajali ro'yxatlarni quyidagi kabi raqamlangan va markalangan ro'yxatlar bilan birlashtira olamiz:

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

<hTML\u003e <bosh\u003e <sarlavha\u003eHTML-da raqamlangan, markirovka qilingan va ko'p darajali ro'yxatlar</ sarlavha\u003e </ bosh\u003e <tanasi\u003e <ul\u003e <li\u003eLolalarning birinchi guruhi<ol\u003e <li\u003eBirinchi sinf<ul\u003e <li\u003eOddiy erta lolalar</ li\u003e </ ul\u003e </ li\u003e <li\u003eIkkinchi sinf<ul\u003e <li\u003eTerri lolalari</ li\u003e </ ul\u003e </ li\u003e </ ol\u003e </ li\u003e </ ul\u003e </ tanasi\u003e </ html\u003e

Yuqoridagi misolda bizda ikkita uyalash mavjud (2 darajali). Birinchidan, biz ikkita lola sinfining ro'yxatini kiritdik, bizda u raqamlangan. Keyin markerlangan ro'yxat raqamlangan ro'yxatdagi har bir elementga joylashtiriladi.

Keling, uning ko'rinishini brauzerda ko'rib chiqaylik:

4. HTML-ro'yxatlar uchun foydali manbalar

Unda CSS xususiyatlarini tushunishni talab qiladigan ma'lumotlar mavjud. Buning uchun quyidagi darslarni o'rganishni maslahat beraman:. Barcha misollar darhol bo'ladi manba kodi va HTML (tuzilma), CSS (uslublar) va Natija (natija) yorliqlariga bo'linadi.

4.1 HTML ro'yxatini qanday qilib mag'lubiyatga aylantirish

Gorizontal menyu yaratishda sizga HTML ro'yxatini satrga aylantirish kerak bo'lishi mumkin. Buni amalga oshirish juda oddiy:

4.2 HTML ro'yxatini ikonasiz qanday tuzish kerak

CSS-dagi ro'yxat uslubidagi xususiyat bu uchun javob beradi (batafsil ma'lumot):

4.3 HTML markazida ro'yxat qanday tuziladi

Ro'yxat elementi blok elementidir, shuning uchun uni to'ldirish bilan markazlashtirish kerak. Ammo bitta muhim nuqta bor - biz hizalanmanın ishlashi uchun kenglikni aniq belgilashimiz kerak:

4.4 Rasmlar bilan HTML-da qanday ro'yxat tuziladi

Faqat bitta CSS mulk ro'yxati uslubidagi rasm etarli. Url ichida belgidan oldin manzilni ko'rsating. Shuni ta'kidlashni istardimki, darhol kichik rasmni tanlash yaxshidir, chunki ro'yxat satrining balandligi bunga bog'liq:

4.5 HTML markirovka qilingan markeringizni ro'yxati

Bunday holda, avval siz shrift belgilarini ulashingiz kerak (masalan, FontAwesome). Keyin standart marker o'rniga har qanday belgini yaratishingiz mumkin:

4.6 HTMLda qanday qilib bir nechta ustunlarga ro'yxat tuzish

Ko'p ustunli ro'yxatni yaratish uchun biz CSS ustunlarini hisoblash xususiyatidan foydalanamiz (bu xususiyat faqat quyidagi brauzerlarda qo'llab-quvvatlanadi: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Bir nechta ustunlarga bo'linishni ko'rish uchun ro'yxat uchun balandlikni belgilashingiz kerak:

5. Ro'yxatlar bilan ishlash amaliyoti

Quyidagi videoda siz barcha ishlarni ko'rishingiz mumkin hTML ro'yxatlari amalda:

HTML ro'yxatlari tegishli ma'lumot qismlarini birgalikda guruhlash uchun ishlatiladi. Ro'yxatlarning uch turi mavjud:

markerlangan ro'yxat —

marker bilan belgilangan,
raqamlangan ro'yxat —
1. raqam bilan belgilangan,
  ta'riflar ro'yxati - - term juftlaridan iborat
  —
  ta'rifi.
  Har bir ro'yxat ro'yxat elementlari yoki atamalarni aniqlash juftlarini o'z ichiga olgan konteynerdir. Ro'yxat elementlari blok elementlari kabi harakat qiladi, ularni bir-birining ostiga qo'yadi va konteyner blokining butun kengligini oladi. Har bir ro'yxat elementi mavjud qo'shimcha blokmaketda qatnashmaydigan tomonda joylashgan.
  
  HTML ro'yxatlarini yaratish
  
  1. Belgilangan ro'yxat
  
  Belgilangan ro'yxat tartibsiz ro'yxat (Ingliz tili tartibsiz ro'yxatidan)... Juftlashtirilgan teg yordamida yaratilgan
  ... Ro'yxat elementining markeri bu yorliq, masalan, to'ldirilgan doira.
  Brauzerlar sukut bo'yicha ro'yxat maydoniga quyidagi formatlashni qo'shadilar:
  Har bir ro'yxat elementi juft teg yordamida yaratiladi
2. (ingliz ro'yxati elementidan).
- Microsoft
- Google
- olma
Shakl: 1. Belgilangan ro'yxat
2. Raqamli ro'yxat

Raqamli ro'yxat juftlashtirilgan teg yordamida yaratiladi. Har bir ro'yxat elementi element yordamida tuziladi
... Brauzer elementlarni tartibda avtomatik ravishda raqamlaydi va agar siz bunday ro'yxatning bir yoki bir nechta elementini o'chirib tashlasangiz, qolgan raqamlar avtomatik ravishda qayta hisoblab chiqiladi.
Ro'yxat maydonida standart brauzer uslublari mavjud:
tanlangan ro'yxat elementi uchun standart raqamni o'zgartirishga imkon beradigan qiymat atributi mavjud. Masalan, agar siz o'rnatgan ro'yxatdagi birinchi element uchun

, keyin raqamlashning qolgan qismi yangi qiymatga nisbatan qayta hisoblab chiqiladi.

Teg uchun

Xususiyat	Tavsif, qabul qilingan qiymat
teskari	Qaytgan atribut ro'yxatni teskari tartibda aks ettiradi (masalan, 9, 8, 7 ...).
boshlang	Start atributi raqamlash boshlanadigan boshlang'ich qiymatni belgilaydi, masalan, qurilish birinchi bandga "10" seriya raqami beriladi. Shuningdek, siz raqamlash turini bir vaqtning o'zida belgilashingiz mumkin, masalan, .
turi	Type atributi ro'yxatda foydalaniladigan marker turini belgilaydi (harflar yoki raqamlar shaklida). Qabul qilingan qiymatlar: 1 - standart qiymat, o'nlik raqamlash. A - alifbo tartibida ro'yxatni raqamlash, katta harflar (A, B, C, D). a - alifbo tartibida ro'yxatni raqamlash, kichik harf (a B C D). I - Rim bosh raqamlarida raqamlash (I, II, III, IV). i - rim raqamlari kichik raqamlar (i, ii, iii, iv).

Microsoft
Google
olma

3. Ta'riflar ro'yxati

Ta'rif ro'yxatlari yorlig'i yordamida yaratilgan

Ta'riflar ro'yxati oynasida quyidagi standart brauzer uslublari mavjud:

Teglar uchun

va

mavjud

Ishlab chiqaruvchi:: Petr Tochilin
Rollarda:: Andrey Gaydulyan; Aleksey Gavrilov; Vitaliy Gogunskiy; Mariya Kozhevnikova

Shakl: 3. Ta'riflar ro'yxati

4. Ichki ro'yxat

Ko'pincha, oddiy ro'yxatlarning imkoniyatlari etarli emas, masalan, tarkib jadvalini yaratishda siz buni qila olmaysiz ichki narsalar... Ichki ro'yxat uchun belgilash quyidagicha bo'ladi:

1-xat.
2-nuqta.
- 2.1-band.
- 2.2-band.
  - 2.2.1-band.
  - 2.2.2-band.
- 2.3-band.
3-nuqta.

Shakl: 4. Ichki ro'yxat

5. Ko'p darajali raqamlangan ro'yxat

Qatlamli ro'yxat ro'yxat elementlarini har xil darajadagi indentlar bilan namoyish qilish uchun ishlatiladi. Ko'p darajali raqamlangan ro'yxat uchun qo'shimcha quyidagicha bo'ladi:

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

Ushbu standart belgilash har bir ichki ro'yxat uchun bitta raqamdan boshlab yangi raqamlashni yaratadi. Ichki raqamlashni amalga oshirish uchun siz quyidagi xususiyatlardan foydalanishingiz kerak:
qayta tiklash bir yoki bir nechta hisoblagichni qayta tiklaydi, tiklash uchun qiymatni o'rnatadi;
qarshi o'sish hisoblagich o'sish qiymatini belgilaydi, ya'ni. har bir keyingi element qaysi bosqich bilan raqamlanadi;
kontent - yaratilgan tarkib, bu holda u ro'yxatdagi har bir element oldidagi raqamni namoyish qilish uchun javobgardir.

Ol (/ * standart raqamlashni olib tashlash * / list-style: none; / * Hisoblagichni aniqlang va unga liv nom bering. Hisoblagich qiymati ko'rsatilmagan - sukut bo'yicha u 0 * / counter-reset: li;) li: before (/ * Biz raqamlanadigan elementni belgilaymiz - li. Pseudo-element avval kontent xususiyati yordamida kiritilgan tarkib ro'yxat elementlaridan oldin joylashishini belgilaydi, shuningdek, hisoblagich o'sish qiymatini belgilaydi (sukut bo'yicha 1). * / Qarama-qarshi o'sish: li; / * Kontent xususiyati ro'yxat elementlari sonini ko'rsatadi (), yaratilgan matn shu nomga ega bo'lgan barcha hisoblagichlarning qiymati ekanligini anglatadi, keltirilgan nuqta raqamlar orasidagi ajratish davrini qo'shadi va bo'shliq bilan nuqta har bir ro'yxat elementining tarkibidan oldin qo'shiladi * / content: hisoblagichlar (li, ".") ".";)
Shakl: 5. Ko'p darajali raqamlangan ro'yxat

HTML gipermatnini belgilash tili tegga ega

Tag sintaksis

# 1-band

# 2-band

# 3-modda

...

Ushbu kod saytdagi markirovka qilingan ro'yxatga aylantirildi:

# 1-band
# 2-band
# 3-modda

Teg

tugatish yorlig'idan majburiy foydalanishni talab qiladi

Ro'yxat elementlarini shakllantirish uchun juft teg ishlatiladi. Ochilish va yopish teglari orasida markirovka qilingan ro'yxatning mazmuni bo'lgan alohida so'zlar, iboralar, paragraflar, rasmlar, kod qismlari va boshqa ko'p narsalar mavjud.

Belgilangan ro'yxatning tarkibi qanday bo'lishi mumkin?

Bu turli xil matnlar, jumladan bitta so'zlar, iboralar va paragraflar, rasmlar, ichki ro'yxatlar, php-kod qismlari va boshqa ko'p narsalar bo'lishi mumkin.

Belgilangan har bir ro'yxat elementi sukut bo'yicha 40 piksel o'ng tomonga tushiriladi. Foydalanish cSS uslublari, biz ushbu ro'yxatning ko'rinishini o'z xohishiga ko'ra o'zgartirishimiz mumkin. Teg

Listdagi qo'shimchalarga ruxsat beriladi

masalan

# 1-band

# 2-1-band

# 2-2-band

2-3-band

# 3-modda

...

Atributlar va xususiyatlarni belgilash

Keng ishlatiladigan yorliq atributi

1. type \u003d "disk" - to'ldirilgan doira shaklida marker (bu qiymat standart hisoblanadi). Disk misoli yuqorida edi.

2. turi \u003d "aylana" - shaffof doira shaklida marker

Masalan:

# 1-band

# 2-band

# 1-band
# 2-band

3. turi \u003d "kvadrat" - kvadrat shaklida marker

Masalan:

# 1-band

# 2-band

Va sahifada shunday ko'rinadi:

# 1-band
# 2-band

CSS-da marker turi list-style-type atributidan foydalanib ko'rsatiladi:

...

Ro'yxat uslubi turi qanday qiymatlarni olishi mumkinligini ko'rib chiqamiz:

disk - doira shaklidagi marker (misol yuqorida keltirilgan)
doira - shaffof doira shaklidagi marker (misol yuqorida keltirilgan)
kvadrat - kvadrat shaklida marker (misol yuqorida keltirilgan)
o'nlik - arabcha raqamlarda raqamlangan ro'yxat ko'rinishidagi marker: 1, 2, 3, ...
o'nlik bilan etakchi - nol - arabcha raqamlarda raqamlangan ro'yxat ko'rinishidagi marker, oldingi nol bilan: 01, 02, 03, ...
pastki-roman - kichik harflar bilan Rim alifbosidagi raqamlangan ro'yxat ko'rinishidagi marker: i, ii, iii, iv, v
yuqori roman - Rim alifbosidagi raqamlangan ro'yxat ko'rinishidagi o'q katta harflar bilan: I, II, III, IV, V
pastki-lotin - lotin alifbosidagi ro'yxat shaklida marker kichik harflar bilan: a, b, c, d, ...
yuqori lotin - lotin alifbosidagi ro'yxat ko'rinishidagi marker katta harflar bilan: A, B, C, D, ...
pastki yunoncha - yunon alifbosidagi kichik harflar bilan ro'yxat ko'rinishidagi o'q
yuqori yunoncha - o'q katta harflar bilan yunon alifbosidagi ro'yxat shaklida

Izoh 2

Atribut yorliqning o'zi sifatida tayinlanishi mumkin

... Atributni tegga o'rnatishda

HTML-da enumni qanday qilish kerak. Belgilangan ro'yxatlar

HTML markerlangan ro'yxatlar - ul va li teglari

Raqamlangan HTML ro'yxatlari - ol va li teglari

HTML ta'rifi ro'yxatlari - dl, dd, dt teglari