HTML нь гурван өөр төрлийн жагсаалтыг дэмждэг бөгөөд тус бүр өөрийн гэсэн жагсаалтын төрлүүдтэй:

• - элемент бүр серийн дугаартай (үсэг) дугаарлагдсан (тоо эсвэл үсэг ашиглан) жагсаалт;
  1. - элемент бүрийн хажууд тэмдэглэгээ байрлуулсан, сумтай (дугааргүй) жагсаалт (серийн дугаарыг харуулсан тоон болон үсгийн тэмдэгтээс илүү);

     • – Тодорхойлолтын жагсаалт нь нэр томъёо, тодорхойлолтыг багтаасан нэр/утга хосоос бүрдэнэ.

     Дугаарласан жагсаалтууд

     Дугаарлагдсан жагсаалтад хөтөч нь тодорхой утгаас (ихэвчлэн 1) эхлэн дарааллаар нь элементийн дугаарыг автоматаар оруулдаг. Энэ нь үлдсэн тоонуудыг автоматаар дахин тооцоолох тул дугаарлалтад саад учруулахгүйгээр жагсаалтын зүйлсийг оруулах, устгах боломжийг олгоно.
     Дугаарлагдсан жагсаалтыг блок элемент ашиглан үүсгэнэ

     (Англи хэлний захиалгат жагсаалтаас - дугаарласан жагсаалт). Савны дэргэд
     Жагсаалтын зүйл бүрийн хувьд элемент байрлуулсан
     1. (Англи хэлний жагсаалтаас - жагсаалтын зүйл). Анхдагч нь араб тоогоор дугаарласан жагсаалт юм.
        Tag
        дараах синтакс байна:
        1. элемент 1
        2. элемент 2
        3. элемент 3

        Дараах жишээнд үзүүлсэн шиг дугаарласан жагсаалтын зүйл нь жагсаалтын олон зүйлийг агуулсан байх ёстой.

        Жишээ нь: Дугаарласан жагсаалт

        • Та өөрөө туршаад үзээрэй"

        Алхам алхмаар зааварчилгаа

        1. Түлхүүрийг аваарай
        2. Түлхүүрийг түгжээнд оруулна уу
        3. Түлхүүрийг хоёр ээлжээр эргүүл
        4. Түлхүүрийг цоожноос гарга
        5. Хаалгаа нээ

        Алхам алхмаар зааварчилгаа

        1. Түлхүүрийг аваарай
        2. Түлхүүрийг түгжээнд оруулна уу
        3. Түлхүүрийг хоёр ээлжээр эргүүл
        4. Түлхүүрийг цоожноос гарга
        5. Хаалгаа нээ

        Заримдаа одоо байгаа HTML кодуудыг харахад аргументтай тулгарах болно төрөлэлемент дотор

        , энэ нь дугаарлалтын төрлийг (үсэг, ром, араб тоо гэх мэт) зааж өгөхөд хэрэглэгддэг. Синтакс:

        Энд: төрөл – тэмдэглэгээний жагсаалт:

        • A - том латин үсэг (A, B, C...);
        • a - жижиг латин үсэг (a, b, c...);
        • I - том Ромын тоонууд (I, II, III...);
        • i - жижиг Ромын тоонууд (i, ii, iii...);
        • 1 - Араб тоонууд (1, 2, 3 ...) (анхдагчаар ашигладаг).

        Хэрэв та жагсаалтыг 1-ээс өөр тоогоор эхлүүлэхийг хүсвэл атрибутыг ашиглан үүнийг зааж өгөх хэрэгтэй эхлэхшошго

        .
        Дараах жишээнд том ром тоо, XLIX эхлэлийн утга бүхий дугаарлагдсан жагсаалтыг харуулав.

        Атрибутыг ашиглан дугаарлах ажлыг мөн эхлүүлж болно үнэ цэнэ, энэ нь элементэд нэмэгддэг

        1. дараах байдлаар:

        7. Энэ тохиолдолд жагсаалтын дараалсан дугаарлалт тасалдаж, энэ үеэс эхлэн дугаарлалт дахин эхэлнэ, энэ тохиолдолд долоогоос.

           Атрибут ашиглах жишээ үнэ цэнэшошго

        8. , энэ нь өгөгдсөн жагсаалтын элементийн дугаарыг өөрчлөх боломжийг олгодог:

           Энэ жишээнд "Жагсаалтын эхний зүйл" нь 1-р дугаар, "Жагсаалтын хоёр дахь зүйл" нь 7 дугаар, "Жагсаалтын гурав дахь зүйл" нь 8 дугаар байх болно.

           Дугаарлагдсан жагсаалтыг CSS ашиглан форматлах

           Жагсаалтын дугаарыг өөрчлөхийн тулд өмчийг ашиглах хэрэгтэй жагсаалтын хэв маягийн төрөл CSS загварын хүснэгтүүд:

           Дугаарласан жагсаалтын загварууд

           Жишээ	Утга	Тодорхойлолт
           a, b, c	доод-альфа	Жижиг үсэг
           A, B, C	дээд-альфа	Том үсэгнүүд
           i, ii, iii	доод Ром	Ром тоо жижиг үсгээр
           I, II, III	дээд роман	Том үсгээр бичсэн Ром тоо

           Жишээ нь: CSS шинж чанарыг ашиглах жагсаалтын хэв маягийн төрөл

           Сумтай жагсаалтууд

           Сумтай жагсаалт нь үндсэндээ дугаарласан жагсаалттай төстэй бөгөөд зөвхөн тэдгээрт дараалсан дугаарлалт агуулаагүй болно. Сумтай жагсаалтыг блок элемент ашиглан үүсгэнэ

           (Англи хэл дээрх эрэмблэгдээгүй жагсаалтаас - дугааргүй жагсаалт). Жагсаалтын элемент бүр нь дугаарласан жагсаалтын нэгэн адил шошготой эхэлдэг
           • . Хөтөч нь жагсаалтын зүйл бүрийг догол мөр болгож автоматаар сум харуулдаг.
             Tag
             дараах синтакс байна:
             • Эхний цэг
             • Хоёр дахь цэг
             • Гурав дахь цэг

             Дараах жишээн дээр та жагсаалтын зүйл бүрийн өмнө анхдагчаар дүүргэсэн тойрог хэлбэрээр жижиг тэмдэглэгээ нэмж байгааг харж болно.

             Шошго дотор

             • Зөвхөн текстийг байрлуулах шаардлагагүй, урсгалын агуулгын аль ч элементийг (холбоос, догол мөр, зураг гэх мэт) байрлуулахыг зөвшөөрнө.

               Оруулсан жагсаалтууд

               Аливаа жагсаалтыг өөр жагсаалтад оруулах боломжтой. Элемент дотор
             • Оруулсан жагсаалт эсвэл хоёрдугаар түвшний жагсаалт үүсгэхийг зөвшөөрнө. Жагсаалтыг оруулахын тулд элемент доторх шинэ жагсаалтыг тайлбарлана уу
             • аль хэдийн байгаа жагсаалт. Та нэг сумтай жагсаалтыг нөгөө рүү оруулахад хөтөч хоёр дахь түвшний жагсаалтын сумны загварыг автоматаар өөрчилдөг. Аливаа жагсаалтыг өөр жагсаалтад оруулах боломжтой. Дараах жишээ нь дугаарлагдсан жагсаалтын хоёр дахь зүйлд байрлуулсан тэмдэглэгдсэн жагсаалтын бүтцийг харуулж байна.

               Жишээ нь: Оруулсан жагсаалт

               • Та өөрөө туршаад үзээрэй"
               • Даваа гараг
                 1. Шуудан илгээх
                 2. Редакторт зочилно уу
                    • Сэдэв сонгох
                    • Чимэглэлийн дизайн
                    • Эцсийн тайлан
                 3. Орой мессеж үзэх
               • Мягмар гараг
                 1. Хуваарийг өөрчлөх
                 2. Зураг илгээх
               • Лхагва гараг...
               • Даваа гараг
                 1. Шуудан илгээх
                 2. Редакторт зочилно уу
                    • Сэдэв сонгох
                    • Чимэглэлийн дизайн
                    • Эцсийн тайлан
                 3. Орой мессеж үзэх
               • Мягмар гараг
                 1. Хуваарийг өөрчлөх
                 2. Зураг илгээх
               • Лхагва гараг...

               Сумтай жагсаалтыг форматлаж байна

               Жагсаалтын тэмдэглэгээний харагдах байдлыг өөрчлөхийн тулд та өмчийг ашиглах хэрэгтэй жагсаалтын хэв маягийн төрөл CSS загварын хүснэгтүүд:

               Дараах жишээ нь тэмдэглэгдсэн жагсаалтын өөр өөр хэв маягийг харуулж байна:

               Жишээ нь: Сумны жагсаалтын хэв маяг

               • Та өөрөө туршаад үзээрэй"
               • Кофе
               • Кофе
               • Кофе
               • Кофе

               Диск:

               • Кофе
               • Сүү

               Тойрог:

               • Кофе
               • Сүү

               Дөрвөлжин:

               • Кофе
               • Сүү

               Байхгүй:

               • Кофе
               • Сүү

               График маркерууд.

               HTML хэл дээр график тэмдэглэгээ бүхий жагсаалт үүсгэх боломжтой. Жагсаалтын тэмдэглэгээ нь стандарт тойрог эсвэл дөрвөлжин байх нь нэг зүйл бөгөөд хөгжүүлэгч өөрөө хуудасны дизайны дагуу тэмдэглэгээг сонгох нь өөр хэрэг юм. Жагсаалтын зүйлсийг үзэсгэлэнтэй болгохын тулд жижиг зургуудыг ихэвчлэн ашигладаг.
               Энгийн тэмдэглэгээг графикаар солихын тулд өмчийг солих хэрэгтэй жагсаалтын хэв маягийн төрөлөмч бүрт жагсаалт маягийн зурагмөн зургийн URL-г заана уу:

               Жишээ нь: График тэмдэглэгээ

               • Та өөрөө туршаад үзээрэй"

               Zodiac тэмдэг

               • Үхрийн орд
               • Ихэр

               Zodiac тэмдэг

               • Хонь
               • Үхрийн орд
               • Ихэр

               Тодорхойлолтын жагсаалт (тайлбар)

               Тодорхойлолтын жагсаалт нь жишээ нь таны хувийн нэр томьёоны толь бичиг үүсгэхэд маш хэрэгтэй. Тодорхойлолтын жагсаалтын зүйл бүр нэр томъёо ба түүний тодорхойлолт гэсэн хоёр хэсгээс бүрдэнэ.
               Та бүхэл бүтэн жагсаалтыг элемент болгон оруулна

               (Англи хэлний тодорхойлолтын жагсаалтаас - тодорхойлолтуудын жагсаалт). Үүнд шошго орно

               (Англи хэлний тодорхойлолтын нэр томъёоноос - тодорхойлсон үг, нэр томъёо) ба

               (Англи хэл дээрх тодорхойлолтоос - тодорхойлсон нэр томъёоны тайлбар).
               Тодорхойлолтын жагсаалтыг шинжлэх ухаан, техникийн болон боловсролын хэвлэлд ихэвчлэн ашигладаг бөгөөд тайлбар толь бичиг, толь бичиг, лавлах ном гэх мэт эмхэтгэхэд ашигладаг.

               Тайлбарын жагсаалтын ерөнхий бүтэц нь дараах байдалтай байна.

               Эхний улирал

               Эхний нэр томъёоны тодорхойлолт

               Хоёр дахь хугацаа

               Хоёр дахь нэр томъёоны тодорхойлолт

               Дараах жишээ нь тодорхойлолтын жагсаалтын нэг боломжит хэрэглээг харуулж байна:

               Жишээ нь: Тодорхойлолтын жагсаалт

               • Та өөрөө туршаад үзээрэй"

               World Wide Web - Англи хэлнээс. World Wide Web (WWW) нь интернетэд холбогдсон өөр өөр компьютер дээр байрлах холбогдох баримт бичигт хандах боломжийг олгодог тархсан систем юм. Интернэт бол мэдээлэл дамжуулахдаа нэг солилцооны протокол ашигладаг сүлжээний багц юм. Вэбсайт гэдэг нь холбоосууд болон нэг төрлийн дизайнаар хоорондоо холбогдсон бие даасан вэб хуудасны багц юм.

               World Wide Web

               - англи хэлнээс World Wide Web (WWW) нь интернетэд холбогдсон өөр өөр компьютер дээр байрлах холбогдох баримт бичигт хандах боломжийг олгодог тархсан систем юм.

               Интернет

               — мэдээлэл дамжуулахад нэг солилцооны протокол ашигладаг сүлжээний багц.

               Вэб сайт

               - холбоосууд болон жигд дизайнаар хоорондоо холбогдсон бие даасан вэб хуудасны багц.

               Анхдагч байдлаар, нэр томъёоны текстийг хөтөчийн цонхны зүүн ирмэг дээр дарж, нэр томъёоны тайлбарыг доор байрлуулж, баруун тийш шилжүүлнэ.

               HTML-д дугаарлагдсан ба дугааргүй гэсэн хоёр төрлийн жагсаалт байдаг. Тэдний бүтээл бараг ижил байна. Тэр ч байтугай шошго нь нэг тэмдэгтээр ялгаатай. Та мөн дугаарласан болон тэмдэглэгээний аль алиныг нь багтаах боломжтой үүсгэж болно.

               Эдгээр жагсаалтыг өөрийн хүссэнээр өөрчилж болно. Энэ бүхэн таны төсөөллөөс хамаарна. Эхлээд бид Word засварлагчтай адил стандарт жагсаалтуудыг харж, дараа нь тэдгээрийг сайжруулж, танигдахааргүй загварчлах болно.

               HTML дугаарлагдсан жагсаалт

               Дараах тэмдэглэгээг ашиглан энгийн дугаарлагдсан нэгийг үүсгэж болно.

               Жагсаалтын эхний зүйл

               Жагсаалтын хоёр дахь зүйл

               Жагсаалтын гурав дахь зүйл

               Энгийн жагсаалтууд иймэрхүү харагдаж байна

               Стандартын дагуу жагсаалтын зүйл бүр нь нээх, хаах li tag дотор байх ёстой. Гэхдээ хаалтын шошгыг тавихгүй бол үр дүн нь яг адилхан байх болно. Процессор нь маш ухаалаг. Жагсаалтыг хөрвүүлэх явцад энэ нь нээлтийн хаягуудыг задлан шинжилдэг. Хэрэв тэр шинийг харвал

               , дараа нь автоматаар урд нь тавьдаг

               .

               Тиймээс жагсаалтыг доор харуулсны дагуу хийж болно.

               

               Гэхдээ мэргэжлийн хүмүүсийн үзэж байгаагаар энэ нь буруу юм.

               

               Дугааргүй (эсвэл сум) жагсаалтыг ижил аргаар үүсгэсэн бөгөөд зөвхөн ol tag-ын оронд ul гэж бичнэ.

               Ямар ч тоо, үсэг байхгүй - зөвхөн тэмдэглэгээ гэж нэрлэгддэг төрөл бүрийн тэмдэгтүүд.

               

               HTML олон түвшний дугаарлагдсан жагсаалт

               Олон хэрэглэгчид энэ боломжийг сонирхож байна. Тиймээс ямар ч HTML дугаарлагдсан жагсаалтыг олон түвшний хийж болно гэдгийг тэмдэглэх нь зүйтэй. Нэмэлт түвшин нь ижил эсвэл шошготой байж болно.

               

               Дээрх жишээнд үзүүлсэн жагсаалтыг үүсгэхийн тулд та дараах зүйлийг бичих хэрэгтэй.

               

               Энэ кодонд эхний жишээнүүдээс ялгаатай нь type шинж чанарыг нэмсэн болохыг анхаарна уу. Үүний ачаар та дугаарласан болон тэмдэглэгдсэн жагсаалтын аль алинд нь эрэмбэлэх төрлийг зааж өгч болно.

               Дугаарласан хүмүүсийн хувьд бид цагаан толгой эсвэл тооны төрлийг, бусад тохиолдолд тэмдэглэгээний төрлийг заана.

               Хэрэв та тусгай HTML шошго ашигладаг бол дугаарласан жагсаалт нь таны хүссэн зүйл болж болно.

               Хүснэгтээс төрөл шинж чанарыг дурын утгаар зааж өгч болно. Эсвэл css загварын ангид жагсаалтын хэв маягийн төрлийг хүссэн эрэмбэлэх төрлөөр зааж өгнө.

               

               Үнэт зүйлийн орчуулга нь маш энгийн. Англи хэлний анхан шатны мэдлэг хангалттай. Гэхдээ та "тойрог", "дөрвөлжин" гэх мэт үгсийг орчуулж чадахгүй байсан ч төрлийн шинж чанарт эдгээр утгыг зааж өгөхөд үр дүн нь юу болохыг нүдээр харж болно.

               Дугаарласан жагсаалтын хувьд дараах сонголтыг ашиглана уу.

               • 1 - Араб тоо;
               • A - том үсэг;
               • a - жижиг латин үсэг;
               • I - том ром тоо;
               • i - жижиг ром тоо.

               Өгөгдмөл нь үргэлж жагсаалт юм. Хэрэв та юу ч заагаагүй бол type="1"-тэй адил байна.

               Нэмж дурдахад дугаарласан жагсаалтууд нь хүссэн байрлалаас эхэлж болно. Анхдагчаар гаралт нь 1-ээс эхэлдэг. Гэхдээ хэрэв та хүсвэл хамгийн багадаа зуугаас эхэлж болно. Үүнийг хийхийн тулд та эхлэх шинж чанарыг дурын утгатай зааж өгөх хэрэгтэй.

               

               Үүнээс гадна та урвуу дарааллаар дүгнэлт хийж болно. Үүнийг хийхийн тулд та эсрэгээр бичих хэрэгтэй.

               

               Жагсаалтын дизайн

               HTML дугаартай жагсаалтыг маш сайхан зохион бүтээсэн тул энэ нь ердийн жагсаалт бөгөөд Photoshop дээр хийсэн зураг биш гэдгийг шууд ойлгохгүй байж магадгүй юм.

               Сайхан жагсаалтын жишээ энд байна.

               

               Жишээнээс харахад дугаарлалт болон элементүүдийн харагдах байдлыг өөрөө өөрчилж болно.

               Та иймэрхүү ердийн жагсаалтыг үүсгэж болно.

               

               Css-ийн загварт та ол хаягуудын дизайныг зааж өгөх хэрэгтэй. Энэ тохиолдолд тохиргоо нь энэ загварын файлыг ашиглаж буй сайтын бүх жагсаалтад хэрэгжих болно гэдгийг анхаарна уу.

               

               Эхлээд дугуй жагсаалтын загвар бүхий сонголтыг авч үзье. Жагсаалтын код руу буцах. Ангийн дугуйрсан жагсаалтыг тэнд зааж өгсөн болно. Ийм гоо сайхныг бий болгохын тулд та энэ ангид хандах хэрэгтэй. Та ангиа хүссэнээрээ нэрлэж болно.

               

               

               

               Одоо квадрат дизайныг харцгаая.

               

               Загварууд нь нэлээд төстэй юм. Үүний ялгаа нь эхний тохиолдолд элементийг CSS-ийн чадавхийг ашиглан бөөрөнхийлсөн явдал юм.

               Мэргэжлийн зохион бүтээгч бүх хэрэглэгчид орчин үеийн компьютер ашигладаггүй гэдгийг урьдчилан харж, ойлгох ёстой. Хүн болгонд Windows 7, 8, 10 суулгаагүй. Windows XP дээр хэвээр байгаа бөгөөд Internet Explorer хөтчийн хуучин хувилбарыг ашигладаг хэрэглэгчдийн тодорхой хувь нь байдаг.

               Дүрмээр бол, бараг бүх орчин үеийн дизайны элементүүдийн сайжруулалтыг тэд дэмждэггүй. Сайтын дизайн дээр огт ажил хийгээгүй мэт хэрэглэгчдэд санагдах болно. Бүх зүйл холдсон гэж. Элементүүд хоорондоо мөргөлддөг. Үүнээс зайлсхийхийн тулд та бүх сонголтыг анхаарч үзэх хэрэгтэй.

               Зарим вэбмастерууд орчин үеийн зах зээл дэх тэдний эзлэх хувь улам бүр багасч байгаа тул тэднийг нүдээ аниад байдаг. Гэхдээ мэргэжлийн хүний ​​хувьд зочин бүр чухал, ялангуяа арилжааны сайт бол.

               Хүн бүрт тохирсон зүйлийг хийх эсвэл хөтчийн бүх хувилбарыг анхаарч үзээрэй.

               HTML-д бүхэл бүтэн шошго нь жагсаалтыг зохион байгуулах үүрэгтэй бөгөөд тэдгээрийн зохион байгуулалт нь өгөгдлийн бүтцийг бий болгох тодорхой дүрэм журмыг дагаж мөрдөх ёстой.

               HTML стандартын тав дахь хувилбар нь дугаарласан жагсаалт, тэмдэглэгдсэн жагсаалт, тодорхойлолтын жагсаалт гэсэн 3 төрлийн жагсаалтыг дэмждэг. Энэ нь мөн жагсаалтуудыг хооронд нь үүрлэх, олон түвшний жагсаалт үүсгэх боломжийг олгодог.

               Дугаарласан жагсаалт

               Дугаарласан жагсаалт- энэ нь тодорхой дараалал бүхий элементүүдийн багц (жагсаалтын зүйл) юм. Дугаарласан жагсаалтын зүйл бүр жагсаалтын бусад зүйлстэй харьцуулахад тухайн зүйлийн харагдах дарааллыг харуулсан өвөрмөц тэмдэглэгээтэй байна. Анхдагч байдлаар, дугаарлагдсан жагсаалтын тэмдэглэгээ нь тоо юм. Эхний зүйл нь 1, хоёр дахь нь 2 гэх мэт дугаарлагдсан байна.

               Дугаарласан жагсаалтын хамгийн түгээмэл жишээ бол янз бүрийн хоол бэлтгэх жор юм. Аливаа жор нь үйлдлүүдийн тодорхой дараалал бүхий дугаарлагдсан жагсаалт байдаг тул.

               HTML дээр дугаарласан жагсаалт үүсгэхийн тулд тагийг ашиглана уу

               , дотор нь өгөгдөл бүхий жагсаалтын элементүүд байрладаг. Жагсаалтын зүйл бүрийг шошго ашиглан зааж өгсөн болно
               1. :

                  Дугаарласан жагсаалт:

                  1. Кофе
                  2. Цай
                  3. Сүү
                  Оролдоод үз »

                  Жич: шошго

                  зөвхөн тагийг хүүхэд элемент болгон агуулж болно
                  1. , өөрөөр хэлбэл дугаарлагдсан жагсаалтын бүх агуулгыг элементүүдийн дотор байрлуулсан байх ёстой
                  2. . Tag
                  3. , эргээд агуулгын хувьд ямар ч хязгаарлалт байхгүй тул та догол мөр, зураг, холбоос, хүснэгт, бусад жагсаалт гэх мэтийг байрлуулж болно.

                     Сумтай жагсаалт

                     Сумтай жагсаалт- эдгээр нь дугааргүй, өөрөөр хэлбэл дараалал нь хамаагүй элементүүдийн эрэмблэгдээгүй жагсаалт юм. Сумтай жагсаалтын бүх зүйл ижил сумтай бөгөөд анхдагч байдлаар тэдгээр нь жижиг хар дугуй хэлбэртэй харагдана.

                     HTML дээр тэмдэглэгдсэн жагсаалт үүсгэхийн тулд тагийг ашиглана уу

                     , жагсаалтын элементүүд нь өөрөө байрладаг (дугаарласан жагсаалтын хувьд шошго
                     • , жагсаалтад үзүүлсэн бүх агуулгыг агуулсан):

                       Сумтай жагсаалт:

                       • Кофе
                       • Цай
                       • Сүү
                       Оролдоод үз »

                       Тэмдэглэгээний төрлүүд

                       Дугаарласан жагсаалтын тэмдэгтүүдийн төрлийг type шинж чанарыг ашиглан өөрчилж болно. Энэ шинж чанар нь таван төрлийн тэмдэглэгээг дэмждэг:

                       Сумтай жагсаалтад төрлийн шинж чанар байхгүй тул та HTML ашиглан тэмдэглэгдсэн жагсаалтын тэмдэгтийн төрлийг өөрчлөх боломжгүй. Тэмдэглэгээний төрлийг өөрчлөхийн тулд энэ тохиолдолд та CSS шинж чанарыг ашиглаж болно list-style-type , үүний тусламжтайгаар та анхдагч утгаас гадна өөр хоёр төрлийн тэмдэглэгээг сонгож болно: тойрог эсвэл дөрвөлжин .

                       Жагсаалтын тэмдэглэгээг өөрчлөх:

                       type="a" шинж чанартай дугаарласан жагсаалт:

                       1. Алим
                       2. Банана
                       3. Нимбэг

                       type="I" шинж чанартай дугаарласан жагсаалт:

                       1. Алим
                       2. Банана
                       3. Нимбэг

                       Сумтай жагсаалтын тэмдэглэгээний төрлүүд:

                       • Алим
                       • Банана
                       • Нимбэг
                       • Алим
                       • Банана
                       • Нимбэг
                       Оролдоод үз »

                       CSS шинж чанарын жагсаалт-style-type нь тэмдэглэгдсэн жагсаалтад зориулсан тэмдэглэгээний төрлөөс гадна дугаарлагдсан жагсаалтад зориулсан олон төрлийн тэмдэглэгээтэй байдаг. Гэхдээ нэг стандарт төрлийн тэмдэглэгээг нөгөөд өөрчлөх нь үзэсгэлэнтэй жагсаалт үүсгэхэд хангалтгүй юм. Жагсаалтыг зохион бүтээхдээ CSS-ийг ашиглах нь илүү дээр бөгөөд энэ нь зөвхөн тэмдэглэгээний дүр төрхийг өөрчлөх төдийгүй тэмдэглэгээг зургаар сольж, байршлыг нь хянах, доголтыг хянах боломжийг олгодог. Энэ бүхнийг хэрхэн яаж хийхийг та харж болно.

                       Хэвтээ жагсаалт

                       Хэрэв та хэвтээ цэс үүсгэхийн тулд HTML жагсаалтын хайрцаг ашиглаж байгаа бол жагсаалтын зүйлсийг нэг мөрөнд дараалан байрлуулах шаардлагатай болно. Үүнийг HTML ашиглан хийх боломжгүй тул та CSS ашиглах хэрэгтэй болно.

                       Хэвтээ жагсаалт үүсгэхийн тулд та өөр ямар шинж чанаруудыг ашиглах гэж байгаагаас хамааран inline эсвэл inline-block утгатай жагсаалтын зүйлсийн CSS дэлгэцийн шинж чанарыг тохируулах хэрэгтэй.

                       Дугаарласан жагсаалт

                       1. Алим
                       2. Банана
                       3. Нимбэг

                       Сумтай жагсаалт:

                       • Алим
                       • Банана
                       • Нимбэг
                       Оролдоод үз »

                       Үүний дараа жагсаалтын бүх зүйл нэг мөрөнд жагсах болно. Жагсаалтын зүйлээс сум алга болж, тэдгээрийн хооронд зай ч үлдэхгүй, харин жагсаалтын зүүн талын догол мөр үлдэх болно гэдгийг анхаарна уу.

                       Та хэвтээ жагсаалтыг хэвтээ цэс болгон хэрхэн өөрчлөхийг харж болно.

                       Цорын ганц ялгаа нь энэ шошго нь жагсаалтыг дугаарлахад зориулагдсан болно. Шошгоны нэр нь "Захиалгат жагсаалт" гэсэн англи товчлолоос гаралтай - дугаарласан жагсаалт.

                       Шошгоны синтакс

                       1. Элемент №1
                       2. Элемент №2
                       3. Элемент №3
                       4. ...

                     type="value" шинж чанар нь дараах утгыг авч болно

                     • A - том латин үсэг хэлбэрээр тэмдэглэгээг тавьдаг (A, B, C ..);
                     • a - жижиг латин үсгийн хэлбэрээр тэмдэглэгээг тавьдаг (a, b, c..);
                     • I - том Ромын тоо хэлбэрээр тэмдэглэгээг тавьдаг (I, II, III, IV ..);
                     • i - жижиг ром тоо хэлбэрээр тэмдэглэгээг тавьдаг (i, ii, iii, iv..);
                     • 1 (анхдагч) - араб тоон хэлбэрээр тэмдэглэгээг тавьдаг (1, 2, 3 ..);

                     Эхлэх = "утга" шинж чанар нь тайлангийн анхны утгыг (эхлэх утга) зааж өгдөг.

                     Урвуу шинж чанар нь урвуу тооллогыг (шаардлагатай бол) зааж өгдөг.

                     Tag

                     хаалтын шошгыг заавал ашиглахыг шаарддаг

                     Жагсаалтын элементүүдийг бүрдүүлэхийн тулд хосолсон шошгыг ашигладаг

                  4. . Нээх болон хаах шошгуудын хооронд тэмдэглэгдсэн жагсаалтын агуулга болох бие даасан үг, хэллэг, догол мөр, зураг, кодын хэсэг болон бусад олон зүйл байдаг.

                     Анхаарна уу

                     Жагсаалт дотор та дансаа өөрийнхөөрөө сольж болно. Энэ зорилгоор шошгон дээр тусгай атрибут утга = "" байдаг.

                  5. , энэ нь зарим тоон утгыг өгсөн. Жишээлбэл

                     1. Элемент №1
                     10. Элемент №2
                     11. Элемент №3

               html дээр дугаарласан жагсаалт бүхий жишээнүүд (

               )

               Жишээ 1. Латин үсгээр дугаарласан HTML жагсаалт

               Том үсгээр бичсэн жишээ

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Жижиг үсгээр жишээ

               1. Элемент №10
               2. Элемент №11
               3. Элемент №12

               Энэ хуудсан дээр иймэрхүү харагдаж байна:

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Жишээ 2. Ром үсгээр дугаарласан HTML жагсаалт

               Том үсгээр бичсэн жишээ

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Энэ хуудсан дээр иймэрхүү харагдаж байна:

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Жижиг үсгээр жишээ

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Энэ хуудсан дээр иймэрхүү харагдаж байна:

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Жишээ 3. Дугаарласан жагсаалт html өөр эхлэх байрлал

               Тоолуурын эхлэлийн утгыг тохируулах боломжийг олгодог эхлэх атрибутын чадварыг харуулсан жишээ.

               50. Элемент №1
               51. Элемент №2
               52. Элемент №3

               Энэ хуудсан дээр иймэрхүү харагдаж байна:

               1. Элемент №1
               2. Элемент №2
               3. Элемент №3

               Жишээ 4. html дугаарлагдсан жагсаалтын тоог өөрчлөх

               Шошгонд шинэ элементүүдийг харуулахдаа value шинж чанарыг ашиглан тоолуурын утгыг өөрчлөх боломжтой жишээг доор харуулав.

               • .

                 10. Элемент №1
                 11. Элемент №2
                 100. Элемент №3
                 101. Элемент №4

                 Энэ хуудсан дээр иймэрхүү харагдаж байна:

                 1. Элемент №1
                 2. Элемент №2
                 3. Элемент №3
                 4. Элемент №4

                 Жишээ 5. Html дээр урвуу дугаарласан жагсаалт

                 Урвуу дугаарласан жагсаалтын жишээг доор харуулав (урвуу дарааллаар тоолох).

                 10. Элемент №1
                 11. Элемент №2
                 12. Элемент №3
                 13. Элемент №4

                 Энэ хуудсан дээр иймэрхүү харагдаж байна:

                 1. Элемент №1
                 2. Элемент №2
                 3. Элемент №3
                 4. Элемент №4

                 Тодорхойлолтын жагсаалт нь тодорхой объектууд болон тэдгээрийн тодорхойлолтуудыг жагсаалтад холбодог. Жишээлбэл, хэрэв та худалдааны жагсаалтад байгаа зүйлсэд тодорхойлолт нэмэхийг хүсвэл дараах байдлаар хийж болно.

                 сүү Цагаан шингэн сүүн бүтээгдэхүүн. талх гурилаар хийсэн хүнсний бүтээгдэхүүн. цөцгийн тос нь шар өнгийн хатуу сүүн бүтээгдэхүүн юм. кофены шош Зарим кофены модны жимсний үр.

                 Тодорхойлолт, нэр томъёо бүр нь тодорхойлолтын бүлэг (эсвэл нэр-үнэгийн бүлэг) юм. Та хүссэнээрээ олон тодорхойлолттой бүлэгтэй байж болно, гэхдээ бүлэг бүр дор хаяж нэг нэр томъёо, дор хаяж нэг тодорхойлолттой байх ёстой. Тодорхойлолтгүй нэр томъёо, нэр томъёогүй тодорхойлолт байж болохгүй.

                 Нэг тодорхойлолттой нэгээс олон нэр томьёог холбох боломжтой, эсвэл эсрэгээр. Жишээлбэл, "кофе" гэсэн нэр томъёо нь хэд хэдэн утгатай байж болох бөгөөд та тэдгээрийг нэг нэгээр нь харуулж болно.

                 кофе шарж, нунтагласан кофены үрээр хийсэн ундаа аяга кофе Дунд зэргийн болон хар хүрэн кофе уудаг уулзалт

                 Эсвэл нэг тодорхойлолттой нэгээс олон нэр томьёотой байж болно. Энэ нь бүгд ижил утгатай нэр томъёоны хувилбаруудыг харуулахад хэрэглэгддэг:

                 сод поп сод кола Амтат, хийжүүлсэн ундаа

                 Тодорхойлолтын жагсаалт нь жагсаалтын объектын оронд тодорхойлсон нэр томъёо, тодорхойлолтын тайлбарыг ашигладаг тул бусад төрлийн жагсаалтаас ялгаатай.

                 Тиймээс тодорхойлолтын жагсаалтад нэг хос элемент ашигладаг

                 , шошгуудын бүлгийг хамарсан
                 Тэгээд
                 . Дор хаяж нэг шошго бүлэг хосолсон байх ёстой
                 нэг бүлэгтэй
                 ; шошго
                 үргэлж дарааллаар нь нэгдүгээрт орох ёстой.

                 Нэг тодорхойлолт бүхий нэг нэр томъёоны тодорхойлолтуудын энгийн жагсаалт дараах байдалтай байна.

                 Хугацаа

                 Нэр томъёоны тодорхойлолт

                 Хугацаа

                 Нэр томъёоны тодорхойлолт

                 Хугацаа

                 Нэр томъёоны тодорхойлолт

                 Дараах байдлаар гарна.

                 Нэр томьёо Нэр томьёо нэр томьёо Нэр томьёо нэр томьёо Нэр томьёо нэр томъёоны тодорхойлолт

                 Энэ жишээнд бид нэгээс олон нэр томьёог тодорхойлолттой холбодог ба эсрэгээр:

                 Хугацаа

                 Нэр томъёоны тодорхойлолт

                 Хугацаа

                 Хугацаа

                 Өмнөх хоёр нэр томъёонд хамаарах тодорхойлолт

                 Дараах тодорхойлолтуудын аль алиныг нь агуулж болох нэр томъёо

                 Энэ нэр томъёоны нэг тодорхойлолт

                 Энэ нэр томъёоны өөр нэг тодорхойлолт

                 Дараах байдлаар танилцуулах болно.

                 Нэр томьёо Нэр томьёоны тодорхойлолт Нэр томьёо Нэр томьёо Өмнөх нэр томъёоны аль алинд нь хамаарах тодорхойлолт Дараах хоёр тодорхойлолтыг хоёуланг нь агуулж болох нэр томъёо Нэр томьёоны нэг тодорхойлолт Нэр томьёоны өөр нэг тодорхойлолт

                 Нэг тодорхойлолттой олон нэр томьёог холбох нь түгээмэл биш боловч хэрэгцээ гарвал боломжтой гэдгийг мэдэх нь сайн хэрэг.

                 Жагсаалтын төрлийг сонгох

                 Тодорхой жагсаалтын төрлийг ашиглахаар шийдэхдээ та хоёр энгийн асуулт асууж шийдвэрлэж болно.

                 1. Нэр томъёо нь тодорхойлогдсон уу (эсвэл бусад нэр/утга хосолсон)?
                    • Хэрэв тийм бол тодорхойлолтуудын жагсаалтыг ашиглана уу.
                    • Хэрэв тийм биш бол тодорхойлолтуудын жагсаалтыг бүү ашигла - дараагийн асуулт руу шилжинэ үү.
                 2. Жагсаалтын элементүүдийн дараалал чухал уу?
                    • Хэрэв тийм бол дараалсан жагсаалтыг ашиглана уу.
                    • Үгүй бол ашигла эмх замбараагүйжагсаалт.

                 HTML жагсаалт ба текстийн ялгаа

                 HTML жагсаалт болон сумтай эсвэл гараар бичсэн тоонуудын хооронд ямар ялгаа байдаг бол гэж гайхаж магадгүй. HTML жагсаалтыг ашиглах нь хэд хэдэн давуу талтай:

                 • Хэрэв та эрэмбэлэгдсэн жагсаалт дахь жагсаалтын зүйлсийн дарааллыг өөрчлөх шаардлагатай бол тэдгээрийг HTML кодоор шилжүүлж болно. Хэрэв тоонууд гараар бичигдсэн бол дарааллыг засахын тулд бүх зүйлийг шалгаж, элемент бүрийн дугаарыг өөрчлөх шаардлагатай болно - энэ нь хамгийн багадаа уйтгартай юм!
                 • HTML жагсаалтыг ашиглах нь жагсаалтыг зөв загварчлах боломжийг олгоно. Хэрэв та зүгээр л том текст ашигладаг бол бие даасан элементүүдийг илүү их эсвэл бага ашигтай байдлаар хэвлэхэд илүү хэцүү байх болно.
                 • HTML жагсаалтыг ашиглах нь контентыг зүгээр л "жагсаалттай төстэй" харааны эффект гэхээс илүүтэйгээр зөв семантик бүтцийг өгдөг. Энэ нь дэлгэц уншигчдад зөвхөн төөрөгдүүлсэн текст болон тоонуудыг уншихаас илүүтэйгээр харааны бэрхшээлтэй хэрэглэгчдэд жагсаалт уншиж байгаагаа хэлэх боломжийг олгодог учраас чухал ач холбогдолтой юм.

                 Нөгөө талаас: текст болон жагсаалт нь ижил зүйл биш юм. Жагсаалтын оронд текст ашиглах нь илүү их ажил шаарддаг бөгөөд баримт бичиг уншигчдад асуудал үүсгэж болзошгүй. Тиймээс, хэрэв баримт бичигт жагсаалт шаардлагатай бол зохих HTML жагсаалтыг ашиглах ёстой.

                 Оруулсан жагсаалтууд

                 Жагсаалтын элемент нь өөр бүхэл жагсаалтыг агуулж болно - үүнийг "үүрлэсэн" жагсаалт гэж нэрлэдэг. Энэ нь лекцийн эхэнд байгаа агуулгын хүснэгт гэх мэт зүйлсэд хэрэгтэй байж болно.

                 1. Нэгдүгээр бүлэг 1. Нэгдүгээр хэсэг 2. Хоёрдугаар хэсэг 3. Гуравдугаар хэсэг 2. Хоёрдугаар бүлэг 3. Гуравдугаар бүлэг

                 Анхаарах гол зүйл бол үүрлэсэн жагсаалт нь тодорхой нэг жагсаалтын элементэд хамаарах ёстой. Үүнийг кодонд тусгахын тулд энэ жагсаалтын элемент дотор үүрлэсэн жагсаалтыг байрлуулна. Дээрх жагсаалтын код дараах байдалтай байна.

                 1. Нэгдүгээр БҮЛЭГ
                    1. Нэгдүгээр хэсэг
                    2. Хоёрдугаар хэсэг
                    3. Гуравдугаар хэсэг
                 2. Хоёрдугаар бүлэг
                 3. Гуравдугаар бүлэг

                 Оруулсан жагсаалт нь элементийн дараа эхэлдэг гэдгийг анхаарна уу

               • мөн элементийн жагсаалтыг агуулсан текст ("Нэгдүгээр бүлэг"); элементийн өмнө дуусна
               , элементийн жагсаалтыг агуулсан. Суурилуулсан жагсаалтууд нь вэб сайтын бүтцийг тодорхойлоход тохиромжтой арга учраас ихэвчлэн вэб сайтын навигацийн цэсийн үндэс болдог.

               Онолын хувьд та хэдэн ч жагсаалтыг үүрлэж болно, гэхдээ практик дээр жагсаалтуудыг хэт гүнзгий оруулбал энэ нь төөрөлдөх болно. Маш том жагсаалтын хувьд агуулгыг гарчиг бүхий олон жагсаалт, бүр тусдаа хуудас болгон хуваах нь дээр.

               Алхам алхмаар жишээ

               Бүгдийг нэгтгэхийн тулд алхам алхмаар жишээ авч үзье. Дараах хувилбарыг авч үзье.

               Бид хоолны сургуулийн жижиг вэб сайт үүсгэж байна. Үндсэн хуудсан дээр бид жорын хуудастай холбоотой ангилсан жоруудын жагсаалтыг харуулах болно. Жорны хуудас бүрд шаардлагатай орц найрлага, тэдгээр орцын талаархи тэмдэглэл, бэлтгэх аргыг жагсаасан болно. Гурван ангилал нь "Бялуу" ("Энгийн хөвөн", "Шоколадтай бялуу", "Алимны цайны бялуу" гэх мэт жоруудыг багтаасан); "Жигнэмэг" ("ANZAC жигнэмэг", "Саатал дусал", "Хайлах мөч"-ийн жорыг багтаасан); болон "Түргэн талх" ("Дампер" ба "Шуурхай" жорыг оруулаад). Үйлчлүүлэгчид категори, жорыг ямар дарааллаар харуулах нь хамаагүй, тэр зүгээр л хүмүүст ямар зүйл анги, аль нь жор болохыг ойлгохыг хүсдэг.

               Энэ вэб сайтыг бий болгох үйл явцыг авч үзье. Энэ хэсэгт бид тэмдэглэгээг үүсгэж, жагсаалтад зарим загвар нэмэх болно. Дараах цувралд жагсаалтын загварчлалын тухай лекц унших хүртэл загварчлалын талаар дэлгэрэнгүй ярихгүй.

               Үндсэн хуудасны зохион байгуулалт

               Баримт бичгийн төрөл, элементүүдийг багтаасан сайн бүтэцтэй HTML хуудсыг үүсгэ html, толгой ба бие , мөн stepbystep-main.html гэж хадгална. "HTML Cooking School" гэсэн үндсэн гарчиг (h1) болон "Жор" дэд гарчгийг (h2) нэмнэ үү.

               HTML хоолны сургууль

               Хоолны жор

               Хоолны жор

               • Бялуу
               • Жигнэмэг
               • Түргэн талх

               Li элементүүдийн догол нь кодыг уншихад хялбар болгодог боловч шаардлагагүй.

               Одоо та жорыг дэд зүйл болгон нэмэх хэрэгтэй, жишээлбэл, "Энгийн хөвөн", "Шоколадтай бялуу", "Алимны цайны бялуу" нь "Бялуу" ангилалд багтдаг. Үүнийг хийхийн тулд та жагсаалтын байрлал бүрт үүрлэсэн жагсаалт үүсгэх хэрэгтэй. Захиалга чухал биш тул дахин таарч байна эмх замбараагүйжагсаалт. Хичээлийн материалыг хялбарчлахын тулд бүх жорыг нэг жорын хуудсанд холбож болно:

               Хоолны жор

               • Бялуу
                 • Энгийн хөвөн
                 • Шоколадтай бялуу
                 • Алимны цайны бялуу
               • Жигнэмэг
                 • ANZAC жигнэмэг
                 • Jam дусал
                 • Хайлах мөчүүд
               • Талх/түргэн талх
                 • Дампуур
                 • Сконус