2.11. Нумерованные и маркированные списки
Иногда при создании сайта может потребоваться упорядочить какую-либо информацию в виде списка. В принципе, тех знаний по HTML, которыми вы обладаете вполне достаточно, чтобы сымитировать практически любой список. Но зачем, если для этого существуют специальные теги. Самое большое распространение В HTML-верстке получили два вида списков — упорядоченные (нумерованные) и неупорядоченные (маркированные). В этом уроке мы поговорим именно о них.
Нумерованные списки (упорядоченные)
Для создания упорядоченных или нумерованных списков используется тег <OL>...</OL>, который является блочным и может содержать только теги <LI>...</LI>, отвечающие за создание пунктов списка. А вот <LI> может содержать и блочные, и встроенные теги, и, конечно, обычный текст (все почти как у HTML-таблиц, правда?).
По умолчанию браузеры нумеруют списки арабскими числами (1, 2, 3,...), но в старых версиях HTML у тегов <OL> и <LI> существовал атрибут type, который изменял тип нумерации для всего списка или его отдельных элементов. Как вы уже поняли, вместо устаревшего type мы снова будем применять стили (CSS) и атрибут style.
style="list-style:decimal" — нумерация арабскими числами (по умолчанию).
style="list-style:upper-alpha" — нумерация заглавными буквами латинского алфавита (A, B, C,...).
style="list-style:lower-alpha" — строчнымибуквамилатиницы (a, b, c,...).
style="list-style:upper-roman" — римскими числами написанными заглавной латиницей (I, II, III,...).
style="list-style:lower-roman" — римскими числами написанными строчной латиницей (i, ii, iii,...).
Пример создания нумерованных списков в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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.
style="list-style:disc" — маркеры в виде кружков (по умолчанию).
style="list-style:circle" — макеры в виде окружностей.
style="list-style:square" — маркеры-квадратики.
Пример создания маркированных списков в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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>
Результат в браузере
