Списъци с водещи символи. Създаване на списъци в HTML Как да проследите избрания елемент от списък в html

Единствената разлика е, че този етикет е създаден само за номериране на списъци. Името на тага идва от английското съкращение "Ordered List" - номериран списък.

Синтаксис на тагове

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..);

Атрибутът start="value" указва началната стойност (начална стойност) на отчета.

Атрибутът reversed указва обратното броене (ако е необходимо).

Етикет

изисква задължително използване на затварящ таг

За формиране на елементи от списъка се използва сдвоен таг

1. . Между отварящите и затварящите тагове има отделни думи, фрази, абзаци, изображения, части от код и много други, които са съдържанието на списъка с водещи символи.

   Забележка

   Вътре в списъка можете да промените акаунта на свой собствен. За тази цел има специален атрибут value="" на етикета.

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 различна начална позиция

   Пример, който показва възможностите на атрибута start, който ви позволява да зададете началната стойност на брояча.

   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. Изглед на вложен списък

         Сега нека премахнем вграденото номериране на списъци и да създадем ново, но във формата, от която се нуждаем. За да направите това, имате нужда от три стилови атрибута: нулиране на брояча, увеличаване на брояча и съдържание.

         counter-reset - задава променлива, която ще съхранява стойността на брояча;

         контраинкремент - увеличава или намалява стойността на брояча с указаното число;

         съдържание - отпечатва стойността на брояча при използване на аргумента counter(variable). Работи във връзка с псевдоелементите след или преди.

         За списък от първо ниво нека извикаме променливата на брояча list1 , а за второ ниво - list2 . Тогава инициирането на броячи за списъци ще бъде както следва.

         OL (нулиране на контра: списък1;) /* Списък от първо ниво */
         OL OL ( нулиране на контра: списък2; ) /* Списък от второ ниво*/

         В този случай селекторите на съдържание помагат за отделянето на вложения списък от външния списък. Конструкцията OL OL означава прилагане на стил само към етикета

         , но само когато се намира в друг таг
         .

         Стойността на брояча се увеличава чрез селектора OL LI:before, към който се добавят атрибутите за увеличаване на брояча и стил на съдържание. Атрибутът counter-increment със стойност list1 увеличава стойността на този брояч с единица, а content: counter(list1) "." показва стойността на брояча преди елемента от списъка. Тези атрибути работят по двойки, така че трябва да бъдат активирани едновременно.

         OL LI: преди ( /* Списък от първо ниво */
         контра-увеличение: списък1;
         /* Изведе стойността като 1., 2.*/
         }
         OL OL LI: преди ( /* Списък от второ ниво */
         контра-увеличение: списък2; /* Увеличете стойността на брояча */
         }

         За вложен списък отново използваме селектори на съдържание (OL OL) и в същото време използваме изхода на брояча list1 и list2, в този случай ще получим номерирането на типа, от който се нуждаем.

         Крайният код е показан в пример 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: няма !важно; /* Премахване на номерирането в браузърите Opera, Safari, Firefox */
         list-style-type: десетичен; /* Оставете номерирането в браузър IE6 и по-долу */
         }

         Заменяйки тези кодове с низа с LI селектора в пример 2, получаваме вложен списък, който работи правилно във всички браузъри.

         Списъците с водещи символи ви позволяват да разделяте голям текст на отделни блокове, всеки от които започва с водещ символ - обикновено малка точка. Това привлича вниманието на читателя към текста и повишава неговата четивност.

         С елемент

         Следните функции са свързани:
         • на мястото, където се случва
           , браузърът автоматично добавя нов ред;
           • списъкът има отстъпи отгоре и отдолу;
           • По подразбиране маркерите се показват като запълнен кръг;
           • Всеки елемент от списъка е изместен надясно спрямо основния текст.

           Фигура 1 показва резултата от примера, илюстриращ горните характеристики на списъка с водещи символи.

           Ориз. 1. Изглед на списък с водещи символи

           Тип маркер

           Маркерите могат да приемат една от трите форми: запълнен кръг (по подразбиране), отворен кръг и квадрат. За да изберете типа на маркера, използвайте свойството list-style-type или универсалното свойство list-style (пример 1). Прилагат се следните стойности:

           • диск - маркери под формата на запълнен кръг;
           • кръг - маркери под формата на отворен кръг;
           • квадрат - квадратни маркери.

           Пример 1: Промяна на външния вид на маркер

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

           Примерът показва как да създадете списък с водещи символи, като използвате малък плътен квадрат като икона с водещи символи. Въпреки че броят на стойностите е ограничен до три, това не означава, че имаме само три вида маркери на наше разположение. Има много специални символи, които могат успешно да действат като икона на маркер. Завийте ги директно към

         • Няма да работи, така че ще трябва да го заобиколите. За да направите това, скрийте маркерите на списъка, като използвате свойството list-style със стойност none и в текста преди съдържанието
         • Добавяме собствен символ, използвайки псевдоелемента ::before. В пример 2 такъв маркер е триъгълник.

           Пример 2: Използване на::before

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

           Резултатът от този пример е показан на фиг. 2. Тъй като използването на свойството list-style със стойност none изобщо не премахва маркерите, а само ги скрива от изгледа, списъкът изглежда изместен надясно. За да се отървете от тази функция, примерът добавя свойство за отстъп на текста с отрицателна стойност. Неговата задача е да премести текста вляво с един знак.

           

           Ориз. 2. Произволни маркери в списъка

           Знакът не трябва да е в шестнадесетичен формат; той може да бъде вмъкнат директно в текста. Основното нещо е да запазите документа в кодиране UTF-8 и редакторът да го поддържа. Самите знаци и техните кодове могат да бъдат взети например от LibreOffice Writer (фиг. 3).

           

           Ориз. 3. Избиране на символ в LibreOffice

           Списък с ръчно нарисувани маркери

           Стиловете ви позволяват да зададете всяко подходящо изображение като маркер чрез свойството list-style-image. Стойността е относителен или абсолютен път към графичния файл, както е показано в пример 3.

           Пример 3: Използване на изображение като маркер

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

           Най-добре е да изберете малка снимка, за да не превърнете елементите на списъка в надписи. На фиг. Фигура 4 показва резултата от пример за използване на малки картини като маркери.

           

           Ориз. 4. Рисунката като маркер

           Използването на list-style-image има някои недостатъци:

           • моделът не може да се мести нагоре или надолу;
           • Позицията на картината спрямо текста може да е различна в различните браузъри.

           Тези недостатъци могат да бъдат избегнати с помощта на свойството background, което задава фоновото изображение. За всеки елемент от списъка

         • премахваме оригиналните маркери и задаваме фоновото изображение без повторение. И за да не се появи текстът в горната част на картината, ние го изместваме надясно с помощта на padding-left (пример 4).

           Пример 4: Използване на фон

           Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

           Позиция на текста и водещия символ

           Има два начина за поставяне на маркер спрямо текста: маркерът се премества извън границите на елементите на списъка или се обвива около текста (фиг. 5).

           вътре	навън

           Ориз. 5. Поставяне на маркери спрямо текста

           За да контролирате позицията на маркерите, използвайте свойството list-style-position. Има две значения: отвън - водещите символи се поставят извън текстовия блок (това е стойността по подразбиране) и вътре - водещите символи са част от текстовия блок и се показват в елемента от списъка (пример 5).

           Пример 5: Промяна на позицията на маркерите

           • Преди да започнете, проверете дали оборудването, включено в комплекта 3BM, е включено.
           • Ако едно или повече периферни устройства липсват, трябва незабавно да се свържете с техническия персонал на ЦК.
           • След визуална проверка на работното ви място, можете внимателно да включите захранването на 3BM.
           
           
           

           Резултатът от този пример е показан на фиг. 6.

           

           Списъците често се използват на уеб страници, така че този въпрос е много важен. В HTML има два типа списъци: номерирани и неномерирани (маркирани). За изграждане на списъци се използват специални тагове. Ще се запознаем с основните тагове в този урок. Нека да разгледаме типовете списъци в HTML по ред и да използваме реални примери, за да разберем как се различават и как се извеждат.

           Номерирани списъци в HTML

           Номерираните списъци в HTML са подредена последователност от елементи. В номериран списък всеки елемент автоматично се предхожда от сериен номер. Номерираният списък изглежда така:

           1. Първият елемент от списъка
           2. Втори елемент от списъка
           3. Третият елемент от списъка
           4. Четвъртият елемент от списъка
           5. Пети елемент от списъка

           В този пример списъкът ще бъде показан с арабски цифри. Номерираните списъци имат атрибути, които могат да се използват за задаване на формата за показване на номерирането на списъци:

           1. Атрибути “I” или “i” - списъкът се номерира с латински букви (главни или малки);
           2. Атрибути “А” или “а” - номерация с латински букви (главни или малки);
           3. Атрибутът “start” се използва, за да се гарантира, че номерирането не започва от първия елемент, а като параметър се посочва поредният номер, от който трябва да се генерира списъкът.

           Пример. Номериран списък, който се формира от латински букви и започва с втория елемент:

           2. Първият елемент от списъка
           3. Втори елемент от списъка
           4. Третият елемент от списъка
           5. Четвъртият елемент от списъка
           6. Пети елемент от списъка

           Списъци с водещи символи в HTML

           Неподредените списъци се наричат ​​още неподредени или списъци с водещи символи. За маркиране на елементи от такъв списък се използват специални знаци (маркери). Типът маркери на списъка се определя в HTML кода с помощта на специални атрибути. Пример за списък с водещи символи в HTML:

           • Първият елемент от списъка
           • Втори елемент от списъка
           • Третият елемент от списъка
           • Четвъртият елемент от списъка
           • Пети елемент от списъка

           В този случай списъкът ще се формира от маркери под формата на удебелена точка. Атрибутите на неподреден списък са:

           1. “диск” - маркери под формата на запълнен кръг
           2. „кръг“ - маркери под формата на празен кръг
           3. “квадрат” - маркери под формата на запълнен квадрат

           Пример за посочване на конкретен маркер в списък:

           • Първият елемент от списъка
           • Втори елемент от списъка
           • Третият елемент от списъка
           • Четвъртият елемент от списъка
           • Пети елемент от списъка

           Можете също да използвате графични изображения като списъчни маркери, което ви позволява да проектирате красиво своя HTML документ. На практика това се използва много често. За да изпълните тази задача, трябва да напишете в кода пътя до картината, която ще служи като маркер:

           Първият елемент от списъка
           Втори елемент от списъка
           Третият елемент от списъка
           Четвъртият елемент от списъка
           Петият елемент от списъка

           Списъците също могат да бъдат вложени, те се състоят от няколко списъка:

           1. Първият елемент от списъка
           2. Втори елемент от списъка
           • Първа подточка от списъка
           • Втора подточка от списъка
           3. Третият елемент от списъка
           4. Четвъртият елемент от списъка
           5. Пети елемент от списъка

           Това е може би всичко, което исках да ви кажа за списъците в HTML. Списъците са много често срещани на уеб страниците. За да ги формирате, трябва да знаете определени правила за извод.

           В HTML има два вида списъци: номерирани и неномерирани. Създаването им е почти същото. Дори таговете се различават с един знак. Можете също така да създадете, което може да включва както номерирани, така и маркерни.

           Тези списъци могат да се трансформират както желаете. Всичко зависи от вашето въображение. Първо ще разгледаме стандартните списъци, същите като в редактора на Word, а след това ще ги подобрим и проектираме до неузнаваемост.

           HTML номериран списък

           Обикновена номерирана единица може да бъде създадена с помощта на следните тагове:

         • Първи елемент от списъка
         • Втори елемент от списъка
         • Трети елемент в списъка

         Простите списъци изглеждат така

         Според стандартите всеки елемент от списъка трябва да бъде в отварящ и затварящ li таг. Но ако не поставите затварящия таг, резултатът ще бъде абсолютно същият. Процесорът е доста умен. По време на преобразуването на списъка той анализира отварящите тагове. Ако види нов

         • , след което автоматично се поставя пред него
         .

         Така могат да бъдат направени списъци, както е показано по-долу.

         

         Но от гледна точка на професионалистите това е неправилно.

         

         Неномерираните (или bullet) списъци се създават по абсолютно същия начин, само че вместо етикета ol се пише ul.

         Няма цифри или букви - само различни символи, наречени маркери.

         

         HTML многостепенен номериран списък

         Много потребители се интересуват от тази възможност. Следователно трябва да се отбележи, че всеки номериран HTML списък може да бъде направен на много нива. Допълнителните нива могат да бъдат еднакви или етикетирани.

         

         За да създадете списъка, показан в примера по-горе, трябва да напишете следното.

         

         Моля, обърнете внимание, че в този код, за разлика от първите примери, е добавен атрибутът тип. Благодарение на него можете да зададете вида на сортиране както за номерирани, така и за водещи списъци.

         За номерираните посочваме азбуката или вида на цифрите, а за останалите случаи - вида на маркера.

         Ако използвате специален HTML таг, номерираният списък може да стане всичко, което пожелаете.

         Можете да посочите атрибута тип с произволна стойност от таблицата. Или в класа на css style, задайте list-style-type с желания тип сортиране.

         

         Преводът на стойностите е доста прост. Основни познания по английски са достатъчни. Но дори и да не можете да преведете думите „кръг“, „квадрат“ и т.н., можете визуално да разберете какъв ще бъде резултатът, когато посочите тези стойности в атрибута type.

         За номерирани списъци използвайте следните опции:

         • 1 - арабски цифри;
         • А - главни букви;
         • а - малки латински букви;
         • I - главни римски цифри;
         • i - малки римски цифри.

         По подразбиране винаги е списък с Това е, ако не посочите нищо, това е същото като type="1".

         В допълнение, номерираните списъци могат да започват от всяка желана позиция. По подразбиране изходът започва от 1. Но ако желаете, можете да започнете поне от сто. За да направите това, трябва да посочите началния атрибут с произволна стойност.

         

         Освен това можете да направите заключението в обратен ред. За да направите това, трябва да напишете обърнато.

         

         Дизайн на списъци

         HTML номериран списък може да бъде проектиран толкова красиво, че може да не разберете веднага, че това е обикновен списък, а не снимка, направена във Photoshop.

         Ето примери за красиви списъци.

         

         Както се вижда от примера, можете да промените външния вид на номерацията и самите елементи.

         Можете да създадете обикновен списък като този.

         

         В css стиловете трябва да посочите дизайна за ol таговете. Моля, обърнете внимание, че в този случай настройките ще бъдат приложени към всички списъци в целия сайт, където се използва този стилов файл.

         

         Нека първо разгледаме варианта с дизайн на кръгъл списък. Върнете се към кода на списъка. Там е посочен кръглият списък на класа. Това е класът, с който трябва да бърникате, за да създадете такава красота. Можете да назовете класа както искате.

         

         

         

         Сега нека да разгледаме квадратния дизайн.

         

         Стиловете са доста сходни. Разликата е, че в първия случай елементът се закръгля с помощта на CSS възможности.

         Професионалният дизайнер на оформление трябва да предвиди и разбере, че не всички потребители използват съвременни компютри. Не всеки има инсталиран Windows 7, 8, 10. Има процент потребители, които все още използват Windows XP и използват стари версии на браузъра Internet Explorer.

         По правило почти всички модерни дизайнерски подобрения на елементи не се поддържат от тях. На потребителя ще изглежда, че изобщо не е работено по дизайна на сайта. Че всичко се е отдалечило. Елементите се сблъскват един с друг. За да избегнете това, трябва да обмислите всички опции.

         Някои уеб администратори си затварят очите за тях, тъй като делът им на съвременния пазар става все по-малък. Но за един професионалист всеки посетител е важен, особено ако е комерсиален сайт.

         Направете нещо подходящо за всеки или вземете предвид всички варианти на браузъра.