Урок 8. Списки в HTML
Списки в HTML
Список — связанный между собой перечень элементов данных.Списки помогают упорядочить данные для удобного использования пользователем.
В HTML в основном используются два типа списков: нумерованный список и маркированный список.
Нумерованный список
Для создания нумерованного списка в HTML необходим тег <ol> (ordered list), а для создания пунктов в списке тег <li>. Пункты списка будут пронумерованы автоматически.
<html> <head> <title>Название сайта</title> </head> <body> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol> </body> </html>
В качестве нумерации по умолчанию стоят арабские числа ( 1, 2, 3, 4 и тд.), так же можно использовать: прописные и строчные латинские буквы, прописные и строчные римские числа. Чтобы указать необходимый тип нумерующих элементов используйте атрибут type. Например:
<ol type="1"> - Будут использованы числа <li>...</li> </ol> <ol type="A" - Будут использованы прописные латинские буквы <li>...</li> </ol>
Маркированный список
Маркированный список создается при помощи тега <ul> (unordered list), пункты списка создаются также при помощи тега <li>. Все пункты списка будут отмечены маркером автоматически.
<html> <head> <title>Название сайта</title> </head> <body> <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ul> </body> </html>
По умолчанию список маркируется закрашенным кругом (disc), так же в качестве маркировки можно использовать пустой круг (circle) или квадрат (square). Тип указываем при помощи атрибута type.
<ul type="circle"> - пустой круг <li>...</li> </ul> <ul type="square"> - квадрат <li>...</li> </ul>
Список описаний
Очень редко встречается "Список описаний", отличие от нумерованного и маркированного списка в том, что для каждого пункта списка можно добавить описание. Список описаний создается при помощи тега <dl> (description list), пункты при помощи тега <dt>, а описание пунктов при помощи тега <dd>.
<html> <head> <title>Название сайта</title> </head> <body> <dl> <dt>Первый</dt> <dd>Описание 1</dd> <dt>Второй</dt> <dd>Описание 2</dd> <dt>Третий</dt> <dd>Описание 3</dd> </dl> </body> </html>