Нумерованные и маркированные списки
Иногда при создании сайта может потребоваться упорядочить какую-либо информацию в виде списка. В принципе, тех знаний по HTML, которыми вы обладаете вполне достаточно, чтобы сымитировать практически любой список. Но зачем, если для этого существуют специальные теги. Самое большое распространение В HTML-верстке получили два вида списков — упорядоченные (нумерованные) и неупорядоченные (маркированные). В этом уроке мы поговорим именно о них.
Нумерованные списки (упорядоченные)
Для создания упорядоченных или нумерованных списков используется тег <OL>...</OL>, который является блочным и может содержать только теги <LI>...</LI>, отвечающие за создание пунктов списка. А вот <LI> может содержать и блочные, и встроенные теги, и, конечно, обычный текст (все почти как у HTML-таблиц, правда?).
По умолчанию браузеры нумеруют списки арабскими числами (1, 2, 3,...), но в старых версиях HTML у тегов <OL> и <LI> существовал атрибут type, который изменял тип нумерации для всего списка или его отдельных элементов. Как вы уже поняли, вместо устаревшего type мы снова будем применять стили (CSS) и атрибут style.
Пример создания нумерованных списков в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Нумерованные списки в HTML</title>
</head>
<body>
<ol style="list-style:upper-alpha">
<li>Ниф-Ниф</li>
<li>Нуф-Нуф</li>
<li>Наф-Наф</li>
</ol>
</body>
</html>
Результат в браузере
- Ниф-Ниф
- Нуф-Нуф
- Наф-Наф
Маркированные списки (неупорядоченные)
Маркированные списки называются так потому, что напротив их элементов браузеры рисуют определенные значки (маркеры). Чтобы создать неупорядоченный или маркированный список, необходимо использовать тег <UL>...</UL>, естественно он тоже является блочным. А в создании элементов списка учавствует все тот же тег <LI>...</LI>, который может содержать встроенные и блочные теги.
Виды маркеров можно менять, раньше этим тоже занимался type, а сейчас это делает CSS.
Пример создания маркированных списков в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Маркированные списки в HTML</title>
</head>
<body>
<ul style="list-style:square">
<li>Бим</li>
<li>Бом</li>
<li>Бум</li>
</ul>
</body>
</html>
Результат в браузере
- Бим
- Бом
- Бум
Кроме нумерации, вокруг списков браузеры создают небольшие пустые поля (внешние отступы). Их размер зависит от типа и версии браузеров.
Домашнее задание.
- Возьмите задание одного из предыдущих уроков и дополните, как показано в результате этого домашнего задания.
Вложенные таблицы | ← Содержание → | Метатеги и их типы |