Маркіраваны і нумараваны спіс HTML

У мове HTML існуе два віды спісаў: нумараваныя і Ненумераваны. Іх стварэнне практычна аднолькавае. Нават тэгі адрозніваюцца на адзін знак. Таксама можна ствараць шматузроўневыя спісы, якія могуць ўключаць у сябе як нумараваныя, так і маркерная.

Гэтыя спісы можна пераўтвараць як заўгодна. Усё залежыць ад вашай фантазіі. Спачатку мы разгледзім стандартныя спісы, такія ж як у рэдактары Word, а затым будзем іх паляпшаць і афармляць да непазнавальнасці.

Нумараваны спіс HTML

Звычайны нумараваны спіс HTML можна стварыць пры дапамозе наступных тэгаў:

1. Першы пункт спісу

2. Другі пункт спісу

3. Трэці пункт спісу

   Простыя спісы выглядаюць вось так

   Паводле стандартаў, кожны пункт спісу павінен быць унутры які адкрывае і закрывае тэга li. Але калі вы не паставіце які зачыняе тэг, то вынік будзе дакладна такім жа. Апрацоўшчык вельмі разумны. Падчас пераўтварэння спісу ён аналізуе якія адкрываюць тэгі. Калі ён бачыць новы

4. , то аўтаматычна перад ім ставіць .

   Такім чынам, спісы можна рабіць так, як паказана ніжэй.

   Але з пункту гледжання прафесіяналаў гэта некарэктна.

   маркіраваныя спісы

   Ненумераваны (ці ж маркерная) спісы ствараюцца сапраўды гэтак жа, толькі замест тэга ol, пішацца ul.

   У маркіраваных спісах няма лічбаў або літар - толькі розныя сімвалы, якія называюцца маркерамі.

   Шматузроўневы нумараваны спіс HTML

   Многіх карыстальнікаў цікавіць такая магчымасць. Таму варта адзначыць, што любы нумараваны спіс HTML можна зрабіць шматузроўневым. Дадатковыя ўзроўні могуць быць такімі ж ці маркіраванымі.

   Для таго каб стварыць спіс, паказаны ў прыкладзе вышэй, трэба напісаць наступнае.

   Звярніце ўвагу, што ў гэтым кодзе, у адрозненне ад першых прыкладаў, дададзены атрыбут type. Дзякуючы яму можна паказаць выгляд сартавання як для нумараваных, так і для маркерных спісаў.

   Для нумараваных паказваем алфавіт або тып лічбаў, а для астатніх выпадкаў - тып маркера.

   Варыянты сартавання спісаў

   Калі выкарыстоўваць спецыяльны HTML-тэг, нумараваны спіс можа стаць любым, якім вы хочаце.

   Можна паказаць атрыбут type з любым значэннем з табліцы. Або ў класе стылю css ўказаць list-style-type з жаданым тыпам сартавання.

   Пераклад значэнняў даволі просты. Хопіць базавых ведаў ангельскай мовы. Але нават калі вы не можаце перавесці словы "кола", "квадрат" і т. П., То можна візуальна зразумець, які будзе вынік пры ўказанні гэтых значэнняў у атрыбуце type.

   Для нумараваных спісаў трэба выкарыстоўваць наступныя варыянты:

   • 1 - арабскія лічбы;
   • A - загалоўныя лацінскія літары ;
   • a - малыя лацінскія літары;
   • I - загалоўныя рымскія лічбы;
   • i - малыя рымскія лічбы.

   Па змаўчанні заўсёды выкарыстоўваецца спіс з арабскімі лічбамі. Гэта значыць, калі вы нічога не ўпісалі ў, гэта раўнасільна type = "1".

   Акрамя гэтага, нумараваныя спісы можна пачынаць з любой жаданай пазіцыі. Па змаўчанні - выснова ад 1. Але пры жаданні можна пачаць хоць са ста. Для гэтага трэба паказаць атрыбут start з любым значэннем.

   Акрамя гэтага, можна зрабіць выснову ў зваротным парадку. Для гэтага трэба напісаць reversed.

   афармленне спісаў

   Нумараваны спіс HTML можна аформіць настолькі прыгожа, што не адразу можна здагадацца, што гэта звычайны спіс, а не малюнак, зробленая ў Photoshop.

   Вось прыклады прыгожых спісаў.

   Як відаць з прыкладу, можна змяняць знешні выгляд нумарацыі і саміх элементаў.

   Стварыць звычайны спіс можна вось так.

   У стылях css трэба паказаць афармленне для тэгаў ol. Звярніце ўвагу, што ў гэтым выпадку налады будуць ужытыя да ўсіх спісах ўсяго сайта, дзе выкарыстоўваецца гэты файл стыляў.

   Разгледзім спачатку варыянт з круглым афармленнем спісу. Вярніцеся да кода спісу. Там паказаны клас rounded-list. Вось менавіта з гэтым класам зараз трэба папрацаваць, каб зрабіць такую прыгажосць. Назваць клас вы можаце як хочаце.

   Зараз разгледзім квадратнае афармленне.

   Стылі вельмі падобныя. Розніца ў тым, што ў першым выпадку адбываецца акругленне элемента з дапамогай магчымасцяў css.

   падтрымка браўзэраў

   Важна разумець, што не ўсе браўзэры падтрымліваюць усе атрыбуты css.

   Напрыклад, вы захацелі зрабіць нумараваны спіс па цэнтры. HTML-код будзе аднолькавы, але вось вынік у старых браўзэрах можа быць зусім іншым.

   Тое ж самае тычыцца і афармлення нумарацыі.

   Як бачыце, квадрацікі вакол лічбаў у старых версіях браўзэра IE ня з'явіліся, паколькі апрацоўшчык не вядомыя новыя атрыбуты, якія дазваляюць зрабіць падобнае афармленне.

   Прафесійны вярстальнік павінен прадбачыць і разумець, што не ўсе карыстальнікі выкарыстоўваюць сучасныя кампутары. Не ва ўсіх ўстаноўлены Windows 7, 8, 10. Існуе працэнт карыстальнікаў, хто да гэтага часу сядзіць на Windows XP і выкарыстоўвае старыя версіі браўзэра Internet Explorer.

   Як правіла, амаль усе сучасныя дызайнерскія паляпшэння элементаў імі не падтрымліваюцца. Карыстачу будзе здавацца, што над дызайнам сайта наогул не працавалі. Што ўсё з'ехала. Элементы наязджаюць адзін на аднаго. Каб гэтага пазбегнуць, трэба пралічваць усе варыянты.

   Некаторыя вэб-майстры заплюшчваюць вочы на іх, паколькі іх доля на сучасным рынку становіцца ўсё менш і менш. Але для прафесіянала важны кожны наведвальнік, асабліва калі гэта камерцыйны сайт.

   Рабіце што-то падыходнае для ўсіх або улічвайце усе варыянты браўзэраў.