Здравейте, скъпи читатели на сайта на блога. Днес, като част от този раздел, искам да говоря за различни Html списъци, които могат да бъдат създадени въз основа на специално проектирани UL, OL, LI и DL тагове. Двойките UL и LI създават списъци с водещи символи, двойките OL и LI създават номерирани списъци, а елементите DL, DT и DD създават така наречените дефиниционни списъци. Ще разгледаме накратко и принципите за създаване на вложени структури.
Бих искал да ви напомня, че вече успяхме да говорим за основите на модерното, както и за таблично оформление (). Освен това се докоснахме до основите и научихме.
Списъци с водещи точки, базирани на UL и LI тагове
UL тагът се използва за създаване на списъци с водещи символи, а OL тагът се използва за създаване на номерирани списъци. Тези тагове са по двойки и блокират тагове, точно като елемента LI.
Между отварящия и затварящия тагове има отделни елементи от списъка, които от своя страна са затворени в отварящ и затварящ LI елемент. Браузърът добавя едноредови отстъпи в горната и долната част на HTML списъците, подобно на отстъпа, създаден от абзац таг.
Нека да разгледаме например опция с водещи символи, която може да изглежда така:
- Първи ред
- Второ
- Последен елемент
Само LI елементи могат да бъдат вътре в отварящите и затварящите UL тагове, а в самите тези елементи (клаузи) можете да вмъкнете каквото и да е съдържание (текст, снимки, заглавия, параграфи, връзки и дори други списъци).
Тези. UL служи само за организиране на списък с водещи символи (не подреден) и всичко, което виждате на уеб страница в него, се реализира с помощта на съдържанието на LI елементите.
За UL можете да промените типа на маркера, като посочите различни стойности за атрибута „Тип“. Ако не е посочен „Тип“ (контролиращ външния вид на маркерите) за UL елемента, тогава ще се покаже външният вид на маркера по подразбиране (диск - кръг, запълнен с цвета на текста):
- — запълнен кръг (по подразбиране);
- - незапълнен кръг;
- - квадрат
В горните примери ние посочихме атрибута „Тип“ в елемента UL, използвайки този типмаркери за всички елементи. Но атрибутът „Тип“ може също да бъде указан за всеки отделен LI таг, задавайки свой собствен тип маркер за този елемент.
Пример за списък с водещи символи различни видовемаркер за всеки елемент:
- Маркер под формата на запълнен диск
- Маркер под формата на небоядисан диск
- Квадрат
Номерирани списъци в Html въз основа на OL тага
За създаване на номериран списък се използват OL тагове, в които отново ще бъдат разположени LI елементи. OL и LI, както вече споменах, са базирани на блокове (т.е. те са склонни да заемат цялото налично за тях пространство по ширина) и нищо освен LI елементи не може да бъде поставено в OL.
Оказва се, че OL и UL са сервизни тагове, които са необходими само за да покажат на браузъра какъв тип списък създаваме (маркиран или номериран). В случай на номериран елемент, отляво на всеки елемент ще видим не маркер, а число и точка зад него:
- Първи ред
- Втора точка
- Трети ред
Както споменах малко по-горе, елементите UL, OL и LI имат способността да използват атрибута TYPE. Позволява ви да конфигурирате типа на маркера или да посочите какви цифри или букви ще се използват за номериране на елементи от списъка. За номериран списък параметрите на този атрибут могат да приемат следните стойности:
- — номерирането ще се извършва с обикновени арабски цифри (същата опция ще се използва по подразбиране, при липса на атрибут „Тип“);
- — главни букви като номерация;
- - малки букви;
- - главни римски цифри;
- - малки римски цифри;
Пример за номериран списък с различни видове номериране за всеки елемент:
- номерирани с големи римски цифри
- Номерация с малки латински букви
- Номерация с малки римски цифри
При създаване на номерирани списъци също е възможно да започнете номерирането не от един, а от номера, посочен в атрибута START. Например:
- Първият елемент, чийто номер е посочен в OL тага с атрибута start="23".
- Следващият елемент с номер едно по-висок
- Още един
За OL можете също да започнете ново номериране от произволна стойност, започвайки от който и да е елемент, като напишете атрибута VALUE с необходимия номер в началния LI на този елемент. Например:
- Първа точка с номер едно
- Този елемент ще получи номера, посочен в атрибута value="32".
- Артикул с по-висок номер
Проектиране на външния вид на списъци в CSS (style sheets)
Но обикновено сега външен видмаркерите се задават не чрез атрибута TYPE, а чрез , за които са посочени съответните свойства.
Тук просто ще дам пример за различни водещи символи за неномерирани списъци, чийто външен вид се задава чрез отделен файлс каскадни стилови листове.
- Първа точка
- Второ
- Последно
Но ще говорим за това в следващите статии. Ето как се задава външният вид на UL маркерите в този блог. Картинките се използват като маркери: за обикновени елементи от неномериран списък - , за вложени елементи от неномериран списък - .
Специални и вложени списъци в HTML код
Третият и последен тип се нарича „списъци с дефиниции“ и се определят с помощта на три тагова - DL, DT и DD. DL казва на браузъра, че това, което следва, е списък с дефиниции.
Обикновено този тип се използва (или е предвидено да се използва) за писане на речникови записи, състоящи се от термини (оградени в DT тагове) и техните описания (оградени в DD тагове).
- Първи мандат
- Описание
- Втори мандат
- Описанието му
Ако погледнете примера по-горе, ще забележите, че елементът DD (описанието на термина) е изместен (с 40 пиксела) спрямо елемента DT (самият термин).
По принцип DL, DT и DD са блокови тагове и само съдържание с вградени тагове може да бъде вмъкнато в DT елемент (оказва се, че блоковите елементи на заглавия и параграфи не могат да се използват в DT). И вътре в DD таговете можете да вмъкнете всякакви елементи, както вградени, така и блокови.
Вложен списъкв Html се създава по аналогия с простия, но вътре в основния списък някои от елементите отново са затворени в отварящия и затварящия таг UL или OL.
Моля, обърнете внимание, че затварящият LI на елемента, в който ще бъде създаден вложеният елемент, се поставя само след целия код на вложения списък (това е много важно за правилното му показване на уеб страницата). Вложеният списък може да изглежда по следния начин:
- Първият параграф от основния номериран
- Втора точка
- Първи елемент от вложени водещи символи
- Второ
- Трета и последна точка
- Третият номериран елемент
Успех на теб! Ще се видим скоро на страниците на сайта на блога
Може да се интересувате
Как да вмъкнете в HTML връзкаи картинка (снимка) - IMG и A тагове Select, Option, Textarea, Label, Fieldset, Legend - Html тагове за формата на падащи списъци и текстови полета 
Html форми за сайта - тагове Form, Input and Select, Option, Textarea, Label и други за създаване на елементи от уеб формуляри 
Как се задават цветовете в Html и CSS кода, избор на RGB нюанси в таблици, Yandex изход и други програми 
Вграждане и обект - Html тагове за показване на медийно съдържание (видео, флаш, аудио) на уеб страници 
Етикети и атрибути на заглавия H1-H6, хоризонтален ред Hr, прекъсване на ред Br и параграф P според стандарта Html 4.01 
Таблици в Html - Table, Tr и Td тагове, както и Colspan, Cellpadding, Cellspacing и Rowspan за създаването им 
Какво представлява езикът за маркиране на хипертекст Html и как да видите списък с всички тагове в W3C валидатора 
Шрифт (лице, размер и цвят), Blockquote и Pre тагове - наследено текстово форматиране в чист HTML (не се използва CSS) 
Iframe и Frame – какво представляват и как най-добре да използвате рамки в Html 
Img - Html таг за вмъкване на картина (Src), подравняване и обвиване на текст около нея (align), както и настройка на фона (background)
С помощта на html списъци можете да създадете меню за вашия уебсайт различни точкии подт. С помощта на списъци се създава съдържанието (карта) на сайта, което е много удобно за търсачките.
И така, има тагове "" - те определят списък с водещи символи.
Етикети "" – дефинират елементи, т.е. елементи от списък с водещи символи.
Първо, нека създадем прост списък от няколко елемента:
<html > <глава > <заглавие >Прост HTML списък с водещи символизаглавие > глава > <тяло > <ul > <ли >единли > <ли >двели > <ли >трили > <ли >Четирили > ul > тяло > html >- три
За html маркировки можете да зададете някои типове, които са написани вътре
първи етикет "
- " В тип=" "
- Четири
- Четири
- Меркурий
- Венера
- Земята
- Юпитер
- Сатурн
- Нептун
- Плутон
- заглавие "вмъкнете друг списък и след това го затворете с втори етикет" "
- цигулка
- китара
- класически
- ритъм китара
- електрическа китара
- Барабани
- Дудочка
- както е показано по-долу.
- Първа точка
- Втора точка
- Трета точка
Списъкът трябва да съдържа затварящ таг
- Чебурашка
- Крокодила Гена
- Шапокляк
- Плъх Лариса
- Първо
- Второ
- трето
- Първо
- Второ
- трето
- Първо
- Второ
- трето
- промяна в религиозната вяра (по избор: будизъм, конфуцианство, хиндуизъм). Специална оферта- юдаизъм и ислям заедно;
- промяна на вярата в непогрешимостта на любимата страна;
- вярата, че съществуват извънземни;
- предпочитание към политическа система като най-добрата по рода си (за избор: феодализъм, социализъм, комунизъм, капитализъм).
- Първият елемент от списъка
- Втори елемент от списъка
- Третият елемент от списъка
- Четвъртият елемент от списъка
- Петият елемент от списъка
- Първият елемент от списъка
- Втори елемент от списъка
- Третият елемент от списъка
- Четвъртият елемент от списъка
- Петият елемент от списъка
- Първият елемент от списъка
- Втори елемент от списъка
- Третият елемент от списъка
- Четвъртият елемент от списъка
- Петият елемент от списъка
- Първият елемент от списъка
- Втори елемент от списъка
- Третият елемент от списъка
- Четвъртият елемент от списъка
- Петият елемент от списъка
- Първият елемент от списъка
- Втори елемент от списъка
- Първа подточка от списъка
- Втора подточка от списъка
- Третият елемент от списъка
- Четвъртият елемент от списъка
- Петият елемент от списъка
- , допълнителен пример как да създадете номериран списък:
Пример за създаване на номериран списък
- Точка едно
- Точка две
Номерираните списъци могат да бъдат вложени един в друг. Дълбочината може да бъде всяка. Този метод често се използва за създаване на меню на уебсайт. Следваща пример за вложен, номериран списък:
Пример за вложен, номериран списък
- Точка едно
- Първо посочете едно
- Първо точка две
- Точка две
За да промените типа на списъка, трябва да използвате атрибута type. Стойността на атрибута трябва да бъде първият знак от дадената последователност, например за арабски числа type = "1" , за римски главни букви type = "I" и т.н.
- Арабски цифри – 1, 2 и т.н.
- Главни латински букви - A, B и т.н.
- Малки латински букви - a, b и т.н.
- Главни римски цифри - I, II и т.н.
- Малки римски цифри - i, ii и т.н.
Нека вземем нашия предишен пример и уточним типовете на списъка:
- Точка едно
- Първо посочете едно
- Първо точка две
- Посочете едно на първо, на второ
- Точка две в първата, във втората
- Точка две
Използване на атрибута start
- Точка едно
- Точка две
Проектиране на номериран списък с CSS
Ще има много повече уроци за това, така че ще хвърлим бърз поглед върху оформянето на списък. Първо, нека преместим нашия номериран списък от левия край с 20 пиксела. За целта използваме свойството margin.
ол (
поле: 0 0 0 20px;
}Въпрос, който често се задава в интернет е: „Как да променя цвета на маркерите (за списък с водещи символи) или цвета на номерацията (за номериран списък)?“ Това е много лесно да се направи, например така:
Добавете таг span
- Точка едно
- Точка две
Смяна на цвета
Ли (
цвят: червен;
}
li span (
цвят: #000000;
}Номериран списък и SEO
Номерираните списъци също играят важна роля в SEO промоция, тъй като правят информацията в сайта по-структурирана. Това означава, че ако използвате списъци в на точните места, тогава информацията ще бъде по-разбираема за читателя, както и за роботите за търсене.
Нека създадем списък, в който вместо точки ще има малки кръгове (пунктирани точки). Този тип се нарича " кръг"
<html > <глава > <заглавие > HTML списък с водещи символизаглавие > глава > <тяло > <тип ul= "кръг"> <ли >единли > <ли >двели > <ли >трили > <ли >Четирили > ul > тяло > html >Сега, вместо тип "кръг", нека зададем "тип" квадрат“ (квадрати)
<html > <глава > <заглавие > HTML списък с водещи символизаглавие > глава > <тяло > <тип ul= "квадрат"> <ли > einли > <ли > zweiли > <ли >дрейли > <ли >виерли > ul > тяло > html >CSS уроците разглеждат подробно работата със списъци, от които можете да научите как да задавате цветове на елементите и текста в тях, както и как да задавате вида на самия маркер (той може да бъде не само квадрат).
или точка - може да бъде почти всеки символ).
| Номерирани списъци html |
Списъците могат не само да бъдат етикетирани, но и номерирани, тъй като понякога това е необходимо. Това могат да бъдат цифри (1, 2, 3...) и букви от английската азбука с малки и главни букви. Обмислете всичко описано по-горе.
За да зададете номерацията се използват таговете "".
Типът е посочен в първия таг.
Номериране по числа (от едно)
<html > <глава > <заглавие >Номериран списък htmlзаглавие > глава > <тяло > <ол > <ли >Веднъжли > <ли >двели > <ли >трили > <ли >Четирили > ол > тяло > html >Ако трябва номерацията да започне от нула (нула) или от три, например, тогава трябва да напишете етикети в първия начало=" "и необходимия брой.
<html > <глава > <заглавие >Номериран списък htmlзаглавие > глава > <тяло > <ол начало= "0" > <ли >нулали > <ли >единли > <ли >двели > <ли >трили > ол > тяло > html >Сега нека да разгледаме как да зададем "номериране на букви".
С малки букви:
<html > <глава > <заглавие >Номерирани списъци htmlзаглавие > глава > <тяло > <тип ol= "а"> <ли >Меркурийли > <ли >Венерали > <ли >Земятали > <ли >Марсли > ол > тяло > html >В главни букви:
<html > <глава > <заглавие >Номерирани HTML списъцизаглавие > глава > <тяло > <тип ol= "А"> <ли >Юпитерли > <ли >Сатурнли > <ли >Уранли > <ли >Нептунли > <ли ><b>Плутонb>ли > ол > тяло > html >В допълнение към обикновените списъци в html можете да създавате списъци на много нива, тоест подраздели за определени елементи. За да направите това, след етикета и заглавието "
Следващият урок ще разгледа създаването на просто меню въз основа на знанията, получени от този урок.
Списъкът с водещи символи се определя чрез добавяне на малък водещ символ, обикновено под формата на запълнен кръг, преди всеки елемент от списъка. Самият списък се формира с помощта на контейнер
- и всеки елемент от списъка започва с етикет
Пример 11.1 показва HTML кода за добавяне на списък с водещи символи към уеб страница.
Пример 11.1. Създайте списък с водещи символи
Резултатът от този пример е показан на фиг. 11.1.
ориз. 11.1. Изглед на списък с водещи символи
Обърнете внимание на подложката в горната, долната и лявата част на списъка. Такива отстъпи се добавят автоматично.
Маркерите могат да приемат една от трите форми: кръг (по подразбиране), кръг и квадрат. За да изберете стил на маркер, използвайте атрибута type на етикета
- . Допустимите стойности са дадени в табл. 11.1
| Тип списък | HTML код | Пример |
|---|---|---|
| Списък с кръгли маркери | ||
| Списък с кръгчета | ||
| Списък с квадратни водещи точки |
Появата на маркерите може леко да варира в зависимост от различни браузъри, както и при промяна на шрифта и размера на текста.
Създаването на списък с квадратни водещи символи е показано в Пример 11.2.
Пример 11.2. Тип маркери
Промяна на вярванията
Резултатът от този пример е показан на фиг. 11.2.
Списъците често се използват на уеб страници, така че този въпрос е много важен. В HTML има два типа списъци: номерирани и неномерирани (маркирани). За изграждане на списъци се използват специални тагове. Ще се запознаем с основните тагове в този урок. Нека да разгледаме типовете списъци в HTML по ред и да използваме реални примери, за да разберем как се различават и как се извеждат.
Номерирани списъци в HTML
Номерираните списъци в HTML са подредена последователност от елементи. В номериран списък всеки елемент автоматично се предхожда от сериен номер. Номерираният списък изглежда така:
В този пример списъкът ще бъде показан с арабски цифри. Номерираните списъци имат атрибути, които могат да се използват за задаване на формата за показване на номерирането на списъци:
1. Атрибути “I” или “i” - списъкът се номерира с латински букви (главни или малки);
2. Атрибути “А” или “а” - номерация с латински букви (главни или малки);
3. Атрибутът “start” се използва, за да се гарантира, че номерирането не започва от първия елемент, а като параметър се посочва поредният номер, от който трябва да се генерира списъкът.
Пример. Номериран списък, който се формира от латински букви и започва с втория елемент:
Списъци с водещи символи в HTML
Неподредените списъци се наричат още неподредени или списъци с водещи символи. За маркиране на елементи от такъв списък се използват специални знаци (маркери). Типът маркери на списъка се определя в HTML кода с помощта на специални атрибути. Пример за списък с водещи символи в HTML:
В този случай списъкът ще се формира от маркери под формата на удебелена точка. Атрибутите на неподреден списък са:
1. “диск” - маркери под формата на запълнен кръг
2. „кръг“ - маркери под формата на празен кръг
3. “квадрат” - маркери под формата на запълнен квадрат
Пример за посочване на конкретен маркер в списък:
Можете също да използвате графични изображения като списъчни маркери, което ви позволява да проектирате красиво своя HTML документ. На практика това се използва много често. За да изпълните тази задача, трябва да напишете в кода пътя до картината, която ще служи като маркер:
Първият елемент от списъка
Списъците също могат да бъдат вложени, те се състоят от няколко списъка:
Това е може би всичко, което исках да ви кажа за списъците в HTML. Списъците са много често срещани на уеб страниците. За да ги формирате, трябва да знаете определени правила за извод.
Какво е номериран списък в HTML?Номерираният списък е колекция от елементи с последователни номера. Предимството му е, че процесът на номериране на елементи е автоматизиран и следователно няма да се объркате. Можете също така да започнете да броите не от първия, а от сто и първия елемент. Можете да промените типа на списъка: арабски цифри, главни латински букви, малки латински букви, главни римски цифри, малки римски цифри. Добавят се отстъпи около номерирания списък: отгоре, отдолу и отляво. За да създадете номериран списък, използвайте етикета
- Всеки елемент в номерирания списък е маркиран със сдвоен етикет
