В этой статье вы узнаете какие типы списков есть в HTML и как с ними работать, но здесь не будет написано что это такое, так как об этом было в части про блочные элементы в HTML.
Типы списков HTML:
Всего их есть три типа, вот какие они бывают.
- Маркированные список;
- Нумерованный список;
- Список определений;
Как вы заметили их всего три типа, сейчас покажу как с ними работать.
Маркированный список:
Для начала посмотрим, как создать маркированный список в HTML, это делается очень просто, и мы уже это делали.
1 2 3 4 5 | <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ul> |
Вам надо просто использовать тег <ul> и внутри него прописать <li>, они то и будут элементы списка, вот результат.
То есть не чего сложного.
Нумерованный список:
Теперь посмотрим на создание нумерованного списка в HTML, это делается почти точно также, как с маркированным списком.
1 2 3 4 5 | <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol> |
Как видите, тут только одно различие от маркированного списка, вместо тега <ul>, пишется тег <ol>, вот результат.
Как видите всё работает, так как надо.
Список определений:
Я долго думал, стоит ли рассказывать про них, так как, по сути список определений в HTML, тоже самое, что и вложенные списки (о них чуть ниже), но в итоге как заметили решил написать, потому что это как минимум полезно для само развития.
1 2 3 4 5 6 7 8 9 10 11 | <dl> <dt>Первый:</dt> <dd>Первый</dd> <dd>Второй</dd> <dd>Третий</dd> <dt>Второй:</dt> <dd>Первый</dd> <dd>Второй</dd> <dd>Третий</dd> <dd>Четвёртый</dd> </dl> |
Давайте разберём, все элемента списка пишутся внутри тега <dl>, <dt>, по сути просто заголовок, </dd>, вложенные элементы, вот результат.
Как можете заметить, у тех которые не заголовки, есть левые отступы, а у заголовок их нет.
Но списки определения практически не используются, так как, их можно заманить вложенными списками, поэтому это можно забыть, только для само развития разве что знать.
Вложенные списки:
Последние что стоит узнать, это как сделать вложенный список в HTML, делается это очень просто.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul> <li>Первый: <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ul> </li> <li>Второй: <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвёртый</li> </ul> </li> </ul> |
То есть, если вы заметили, то что бы сделать вложенные список, надо просто внутри тега <li>, ещё добавить список, например, тегом <ul>, вот результат.
Как видите всё работает, почти тоже самое, что и список определений, только добавились точки, ещё точно так же можно делать и с нумерованными списками, даже можно их комбинировать.
Вывод:
В части учебника, вы узнали какие есть типы списков в HTML, да и вообще как с ними работать, надеюсь для вас они были полезны.
Подписываетесь на соц-сети:
Оценка:
Загрузка...