Сумтай жагсаалтууд. HTML дээр жагсаалт үүсгэх Сонгосон жагсаалтын зүйлийг html дээр хэрхэн хянах вэ

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

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

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

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

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

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

   Анхаарна уу

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

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

   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 дугаарлагдсан жагсаалтын тоог өөрчлөх

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

3. .

   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.1, 1.2, 1.3 гэх мэт дэд зүйлүүдийг дугаарлах боломжгүй юм. Гэхдээ SHTML-д боломжгүй зүйлийг хэв маягт хуваарилж болно.

   Эхлээд ерөнхийдөө үүрлэсэн жагсаалтыг хэрхэн үүсгэхийг харцгаая. Гол сав нь шошго юм

   , жагсаалтын элементүүд нь хаягуудаар үүсгэгддэг
   1. . Оруулсан жагсаалт нь мөн эхэлдэг
      , гэхдээ энэ шошго нь савны дотор байрлах ёстой
      1. , зөв ​​синтакс ингэж хадгалагдана (жишээ 1).

         Жишээ 1: Тогтмол үүрлэсэн жагсаалт

         
         
         
         
         
         
         
         

         
         
         1. 1-р зүйл
            
            
            
            1. 1.1 дэд зүйл
            
            
            2. 1.2-р зүйл
            
            
            3. 1.3-р зүйл
            
            
            
            
         
         
         2. 2-р цэг
            
            
            
            1. 2.1-р зүйл
            
            
            2. 2.2-р зүйл
            
            
            
            
         
         
         
         
         
         
         

         Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 1. Оруулсан жагсаалтын дугаарлалт бүрд шинээр эхэлдэг гэдгийг анхаарна уу.

         Цагаан будаа. 1. Оруулсан жагсаалтын харагдац

         Одоо жагсаалтын суурилагдсан дугаарыг устгаж, шинээр бий болгоё, гэхдээ бидэнд хэрэгтэй хэлбэрээр. Үүнийг хийхийн тулд танд загварын гурван шинж чанар хэрэгтэй: эсрэг дахин тохируулах, эсрэг өсөлт, контент.

         эсрэг дахин тохируулах - тоологч утгыг хадгалах хувьсагчийг тохируулна;

         эсрэг өсөлт - тоолуурын утгыг заасан тоогоор нэмэгдүүлэх буюу багасгах;

         контент - тоолуур(хувьсагч) аргументыг ашиглах үед тоологч утгыг хэвлэнэ. Дараа нь эсвэл өмнөх псевдо-элементүүдтэй хамт ажилладаг.

         Эхний түвшний жагсаалтын хувьд тоологч хувьсагчийг list1 гэж нэрлэе, хоёрдугаар түвшний хувьд - list2 . Дараа нь жагсаалтын тоолуурыг эхлүүлэх нь дараах байдалтай байна.

         OL (эсрэг дахин тохируулах: жагсаалт1; ) /* Нэгдүгээр түвшний жагсаалт */
         OL OL (эсрэг дахин тохируулах: жагсаалт2; ) /* Хоёрдугаар түвшний жагсаалт*/

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

         , гэхдээ энэ нь өөр таг дотор байрлах үед л
         .

         Тоолуурын утгыг OL LI:before сонгогчоор дамжуулан нэмэгдүүлж, эсрэг өсөлт болон агуулгын хэв маягийн шинж чанаруудыг нэмдэг. Жагсаалт1 утга бүхий сөрөг өсөлтийн атрибут нь энэ тоолуурын утгыг нэгээр нэмэгдүүлж, контент: counter(list1) "." жагсаалтын зүйлийн өмнөх тоологчийн утгыг харуулна. Эдгээр шинж чанарууд нь хос хосоороо ажилладаг тул нэгэн зэрэг идэвхжүүлсэн байх ёстой.

         ОЛ ЛИ:өмнө ( /* Нэгдүгээр түвшний жагсаалт */
         эсрэг өсөлт: жагсаалт1;
         /* Утгыг 1., 2.* гэж гаргана.
         }
         ОЛ ОЛ ЛИ:өмнө ( /* Хоёрдугаар түвшний жагсаалт */
         эсрэг өсөлт: жагсаалт2; /* Тоолуурын утгыг нэмэгдүүлэх */
         }

         Оруулсан жагсаалтын хувьд бид контент сонгогчийг (OL OL) дахин ашигладаг бөгөөд үүний зэрэгцээ тоологч жагсаалт1 ба жагсаалт2-ын гаралтыг ашигладаг бөгөөд энэ тохиолдолд бид шаардлагатай төрлийн дугаарыг авах болно.

         Эцсийн кодыг 2-р жишээнд үзүүлэв.

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

         
         
         
         
         
         
         
         
         

         
         
         1. Догол мөр
            
            
            
            1. дэд зүйл
            
            
            2. дэд зүйл
            
            
            3. дэд зүйл
            
            
            
            
         
         
         2. Догол мөр
            
            
            
            1. дэд зүйл
            
            
            2. дэд зүйл
            
            
            
            
         
         
         
         
         
         
         

         Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 2.

         

         Цагаан будаа. 2. Opera хөтөч дээрх жагсаалтын автомат дугаарлалтын төрөл

         Сэтгэгдэл

         Өгөгдсөн загварын шинж чанаруудын аль нэгийг дэмждэггүй тул өгөгдсөн жишээ нь Internet Explorer хөтөч дээр 7 хүртэлх хувилбар хүртэл ажиллахгүй.

         Internet Explorer хөтөч нь загварчлалын олон сонирхолтой шинж чанаруудыг дэмждэггүй тул жагсаалт дахь ердийн дугаарлалт, ялангуяа үүнд хамаарахгүй байх ёстой. Үүнийг хийхийн тулд list-style-type: none-ыг устгана уу. Гэхдээ энэ нь жишээ нь зөв ажилладаг бусад хөтчүүдэд ч нөлөөлнө, тиймээс та хакердах хэрэгтэй болно - энэ нь өөр өөр хөтчүүдэд өөр өөр загварын код өгөх арга техник гэсэн үг юм. Жишээлбэл, та !important хаягийг ашиглаж болно. Загварын атрибутын үнэ цэнэд !important-ийг нэмэх нь түүний ач холбогдлыг нэмэгдүүлдэг. Хэрэв та ижил шинж чанарыг !important -гүйгээр дахин тодорхойлох юм бол хөтчүүд үүнийг үл тоомсорлох болно. Гэхдээ Intenet Explorer-ийн 6 ба түүнээс доош хувилбарт биш.

         LI (
         list-style-type: none !important; /* Opera, Safari, Firefox хөтчүүдийн дугаарыг арилгах */
         жагсаалтын хэв маягийн төрөл: аравтын аравтын; /* IE6 болон түүнээс доош хөтөч дээр дугаарлалт үлдээнэ үү */
         }

         2-р жишээн дээрх LI сонгогчоор эдгээр кодыг стрингээр орлуулснаар бид бүх хөтөч дээр зөв ажилладаг үүрлэсэн жагсаалтыг авах болно.

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

         Элементтэй

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

           Зураг 1-д тэмдэглэгдсэн жагсаалтын дээрх шинж чанаруудыг харуулсан жишээний үр дүнг харуулав.

           Цагаан будаа. 1. Сум жагсаалтын харагдац

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

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

           • диск - дүүргэсэн дугуй хэлбэртэй тэмдэглэгээ;
           • тойрог - нээлттэй дугуй хэлбэртэй тэмдэглэгээ;
           • дөрвөлжин - дөрвөлжин тэмдэглэгээ.

           Жишээ 1: Тэмдэглэгээний харагдах байдлыг өөрчлөх

           • Сепулки
           • Сепулкариа
           • Сулленация
           
           
           

           Жишээ нь сумны дүрс болгон жижиг, цул өнгийн дөрвөлжин ашиглан тэмдэглэгдсэн жагсаалтыг хэрхэн үүсгэхийг харуулж байна. Хэдийгээр утгын тоо гурваар хязгаарлагдаж байгаа ч энэ нь бидний мэдэлд зөвхөн гурван төрлийн тэмдэглэгээ байна гэсэн үг биш юм. Тэмдэглэгээний дүрсийн үүргийг амжилттай гүйцэтгэж чадах олон тусгай тэмдэгтүүд байдаг. Тэдгээрийг шууд шургуулна

         • Энэ нь ажиллахгүй тул та үүнийг тойрон ажиллах хэрэгтэй болно. Үүнийг хийхийн тулд жагсаалтын тэмдэглэгээг жагсаалтын хэв маягийн шинж чанарыг ашиглан "none" гэсэн утгатай ба агуулгын өмнөх бичвэрт нуу.
         • Бид ::before псевдо-элементийг ашиглан өөрийн дүрийг нэмдэг. Жишээ 2-т гурвалжин ийм тэмдэглэгээний үүрэг гүйцэтгэдэг.

           Жишээ 2: Өмнө нь :: ашиглах

           • Сепулки
           • Сепулкариа
           • Сулленация
           
           
           

           Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 2. Жагсаалтын маягийн шинж чанарыг none утгатай ашиглах нь тэмдэглэгээг огт арилгахгүй, зөвхөн харагдахаас нуудаг тул жагсаалт баруун тийш шилжсэн харагдана. Энэ онцлогоос ангижрахын тулд жишээ нь сөрөг утгатай текстийн доголын шинж чанарыг нэмдэг. Түүний даалгавар бол текстийг зүүн нэг тэмдэгт рүү шилжүүлэх явдал юм.

           

           Цагаан будаа. 2. Жагсаалтанд дурын тэмдэглэгээ

           Тэмдэгт нь арван зургаан тоот форматтай байх албагүй; үүнийг текстэд шууд оруулах боломжтой. Хамгийн гол нь баримт бичгийг UTF-8 кодчилолд хадгалах бөгөөд засварлагч үүнийг дэмждэг байх явдал юм. Тэмдэгтүүдийг өөрсдөө болон тэдгээрийн кодыг жишээ нь LibreOffice Writer-ээс авч болно (Зураг 3).

           

           Цагаан будаа. 3. LibreOffice дээр тэмдэг сонгох

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

           Загварууд нь list-style-image шинж чанараар дамжуулан ямар ч тохиромжтой зургийг тэмдэглэгээ болгон тохируулах боломжийг олгодог. Утга нь жишээ 3-т үзүүлсэн шиг график файлд хүрэх харьцангуй буюу үнэмлэхүй зам юм.

           Жишээ 3: Зургийг тэмдэглэгээ болгон ашиглах

           • Сепулки
           • Сепулкариа
           • Сулленация
           
           
           

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

           

           Цагаан будаа. 4. Маркер болгон зурах

           Жагсаалт маягийн дүрсийг ашиглах нь зарим сул талуудтай:

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

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

         • Бид анхны тэмдэглэгээг арилгаж, арын дэвсгэр зургийг давталгүйгээр тохируулна. Зургийн дээд талд текст гарч ирэхгүй байхын тулд бид зүүн талд padding-left ашиглан баруун тийш шилжүүлнэ (жишээ 4).

           Жишээ 4: Арын дэвсгэр ашиглах

           Ul (зүүн захаас: -1em; ) li (жагсаалтын хэв маяг: байхгүй; дэвсгэр: url(images/bullet.png) давтагдахгүй 0 2px; дэвсгэр зүүн: 20px; )

           Текст болон сумны байрлал

           Тексттэй харьцуулсан тэмдэглэгээг байрлуулах хоёр арга байдаг: тэмдэглэгээг жагсаалтын элементүүдийн хилийн гадна талд шилжүүлэх эсвэл текстийг ороосон (Зураг 5).

           дотор	гадна

           Цагаан будаа. 5. Тексттэй харьцуулахад тэмдэглэгээг байрлуулах

           Тэмдэглэгээний байрлалыг хянахын тулд list-style-position шинж чанарыг ашиглана уу. Энэ нь хоёр утгатай: гадна талд - сумыг текст блокийн гадна талд байрлуулсан (энэ нь анхдагч утга) ба дотор - сум нь текстийн блокийн нэг хэсэг бөгөөд жагсаалтын зүйлд харагдана (жишээ 5).

           Жишээ 5: Тэмдэглэгээний байрлалыг өөрчлөх

           • Эхлэхээсээ өмнө 3BM иж бүрдэлд багтсан тоног төхөөрөмж байгаа эсэхийг шалгаарай.
           • Хэрэв нэг буюу хэд хэдэн захын төхөөрөмж байхгүй бол та CC-ийн техникийн ажилтнуудтай шууд холбоо барина уу.
           • Ажлын талбайгаа нүдээр шалгасны дараа та 3BM-ийн хүчийг сайтар асааж болно.
           
           
           

           Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 6.

           

           Жагсаалтыг вэб хуудсанд ихэвчлэн ашигладаг тул энэ асуудал маш их хамааралтай юм. HTML-д дугаарлагдсан ба дугааргүй (сумтай) гэсэн хоёр төрлийн жагсаалт байдаг. Жагсаалт үүсгэхийн тулд тусгай шошго ашигладаг. Энэ хичээл дээр бид үндсэн шошготой танилцах болно. HTML хэл дээрх жагсаалтын төрлүүдийг дарааллаар нь авч үзээд бодит жишээнүүдийг ашиглан тэдгээр нь хэрхэн ялгаатай, хэрхэн гарсныг ойлгох болно.

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

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

           1. Жагсаалтын эхний элемент
           2. Жагсаалтын хоёр дахь элемент
           3. Жагсаалтын гурав дахь элемент
           4. Жагсаалтын дөрөв дэх элемент
           5. Жагсаалтын тав дахь элемент

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

           1. "I" эсвэл "i" шинж чанарууд - жагсаалтыг ром үсгээр дугаарласан (том эсвэл жижиг үсгээр);
           2. "A" эсвэл "a" шинж чанарууд - Латин үсгээр дугаарлах (том эсвэл жижиг);
           3. Эхний зүйлээс дугаарлалт эхлэхгүй байхын тулд "эхлэх" шинж чанарыг ашиглан жагсаалт үүсгэх шаардлагатай серийн дугаарыг параметр болгон зааж өгсөн;

           Жишээ. Ром үсгээс бүрдсэн, хоёрдугаар элементээр эхэлсэн дугаарласан жагсаалт:

           2. Жагсаалтын эхний элемент
           3. Жагсаалтын хоёр дахь элемент
           4. Жагсаалтын гурав дахь элемент
           5. Жагсаалтын дөрөв дэх элемент
           6. Жагсаалтын тав дахь элемент

           HTML дээр тэмдэглэгдсэн жагсаалт

           Эрэмбэгүй жагсаалтыг мөн эрэмбэгүй эсвэл тэмдэглэгдсэн жагсаалт гэж нэрлэдэг. Ийм жагсаалтын элементүүдийг тодруулахын тулд тусгай тэмдэгтүүдийг (тэмдэглэгээ) ашигладаг. Жагсаалтын тэмдэглэгээний төрлийг тусгай шинж чанаруудыг ашиглан HTML кодонд зааж өгсөн болно. HTML дээрх тэмдэглэгдсэн жагсаалтын жишээ:

           • Жагсаалтын эхний элемент
           • Жагсаалтын хоёр дахь элемент
           • Жагсаалтын гурав дахь элемент
           • Жагсаалтын дөрөв дэх элемент
           • Жагсаалтын тав дахь элемент

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

           1. "диск" - дүүргэсэн тойрог хэлбэртэй тэмдэглэгээ
           2. “тойрог” - хоосон тойрог хэлбэртэй тэмдэглэгээ
           3. "дөрвөлжин" - дүүргэсэн дөрвөлжин хэлбэртэй тэмдэглэгээ

           Жагсаалтад тодорхой тэмдэглэгээг зааж өгөх жишээ:

           • Жагсаалтын эхний элемент
           • Жагсаалтын хоёр дахь элемент
           • Жагсаалтын гурав дахь элемент
           • Жагсаалтын дөрөв дэх элемент
           • Жагсаалтын тав дахь элемент

           Та мөн график дүрсийг жагсаалтын тэмдэглэгээ болгон ашиглаж болох бөгөөд энэ нь HTML баримтаа гоё загварчлах боломжийг олгодог. Практикт үүнийг маш олон удаа ашигладаг. Энэ даалгаврыг хэрэгжүүлэхийн тулд та кодонд тэмдэглэгээ болох зурганд хүрэх замыг бичих хэрэгтэй.

           Жагсаалтын эхний элемент
           Жагсаалтын хоёр дахь элемент
           Жагсаалтын гурав дахь элемент
           Жагсаалтын дөрөв дэх элемент
           Жагсаалтын тав дахь элемент

           Жагсаалтууд нь хэд хэдэн жагсаалтаас бүрдэнэ.

           1. Жагсаалтын эхний элемент
           2. Жагсаалтын хоёр дахь элемент
           • Жагсаалтын эхний дэд зүйл
           • Жагсаалтын хоёр дахь дэд зүйл
           3. Жагсаалтын гурав дахь элемент
           4. Жагсаалтын дөрөв дэх элемент
           5. Жагсаалтын тав дахь элемент

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

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

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

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

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

         • Жагсаалтын эхний зүйл
         • Жагсаалтын хоёр дахь зүйл
         • Жагсаалтын гурав дахь зүйл

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

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

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

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

         

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

         

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

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

         

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

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

         

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

         

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

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

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

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

         

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

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

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

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

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

         

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

         

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

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

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

         

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

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

         

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

         

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

         

         

         

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

         

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

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

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

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

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