Ранее мы затронули блочные и строчные элементы, также вкратце узнали про атрибуты. Сегодня я расскажу вам про списки, их виды и свойства. Вообще списки нам нужны, чтобы как-то структурировать информацию, например, в прошлом уроке я показал на примере ингредиентов торта, как сделать маркированный список. Иными словами список - это перечень пунктов. Существует три вида списков
- маркированный
- нумерованный
и список определений
Любой список образуется двумя видами тегов:
- общий контейнер списка
- контейнер разделения пунктов
Самый простой представитель этой группы тегов - маркированный список, у такого списка перед каждым пунктом имеется, так называемый маркер, который представляет собой закрашенный кружок или другими словами - жирную точку. Контейнером этого списка является тег <ul>, а пункты заключаются в тег<li>.
Для задания внешнего вида маркеров предназначен атрибут type
- type = "disk" - маркер в виде закрашенного круга (по умолчанию)
- type = "circle" - маркер в виде не закрашенного круга
- type = "square" - маркер в виде закрашенного квадрата
Следующим видом списков идет нумерованный список, обозначающийся тегoм <ol> , а пункты также заключаются в тег <li>. В простейшем (по умолчанию) случае получим список пронумерованный арабскими цифрами, причем нумерация начинается с единицы.
Если требуются другие варианты нумерации, то применяется снова атрибут type со следующими значениями:
type = "A" - пункты обозначаются заглавными латинскими буквами
type = "a" - то же самое, но маленькие буквы
type = "I" - нумерация римскими цифрами в верхнем регистре
type = "i" - то же самое, но в нижнем регистре
Если требуется начать счет нумерации списка не с единицы, а с какой-то определенного числа, то применяется атрибут start = " "
Последний вид списков сложнее, он состоит не просто из отдельный пунктов, но также каждому пункту дается соответствующее определение. <dl> - тег контейнер, <dt> - тег пункта, <dd> - тег определения пункта. Такой вид списка удобно использовать, например, для анекдотов.
На этом я закончу урок по спискам, в следующий раз будем изучать таблицы html.