HTML Урок 2. Создание списков

Создание списков в HTML

В HTML поддерживается работа со всеми вилами списков, рассмотрим их

Неупорядоченный список HTML

Неупорядоченный или ненумерованный список HTML содержит следующие теги:

Синтаксис:

<ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ul>

<ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ul>

Т.е. каждый пункт списка должен начинаться тегом li и завершаться его закрывающей парой, вместо которого будет отображаться маркер (диск, окружность или квадрат — зависит от предустановок браузера)

Чтобы задать вид маркера, необходимо использовать атрибут type:

<ul type="disk"> заполненный диск
<ul type="circle"> окружность 
<ul type="square"> квадрат

Упорядоченный список HTML

Упорядоченный список в HTML или нумерованный список практически такой же, как и ненумерованный, за исключением первого главного тега:

Синтаксис:

1 2 3 4 5 6 7

<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ol>

<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ol>

Для нумерованного списка тоже есть различные варианты нумерации:

<ol type = "a">
<ol type = "A">
<ol type = "I">
<ol type = "1">

Можно также применять к отдельному пункту:

<li type = "a">

Для того, чтобы продолжить список с определенного номера:

<ol start = "5">

Многоуровневый список HTML

Списки с определениями или многоуровневые списки в HTML создаются следующим образом:

1 2 3 4 5 6 7 8 9

<dl> <dt>Пункт 1 <dd>Элемент пункта 1 <dd>Элемент пункта 1 <dt>Пункт 2 <dd>Элемент пункта 2 <dt>Пункт 3 <dd>Элемент пункта 3 </dl>

<dl> <dt>Пункт 1 <dd>Элемент пункта 1 <dd>Элемент пункта 1 <dt>Пункт 2 <dd>Элемент пункта 2 <dt>Пункт 3 <dd>Элемент пункта 3 </dl>

Результат:

Красивый список html или смешанный список

Чтобы сделать список максимально красивым, можно использовать в одном списке разные виды списков. Рассмотрим пример:

1
2
3
4
5
6
7
8
9
10

<dl><strong>Смешанный список</strong>
	<dt><i>Новость дня</i>
		<dd>
			<li>Сегодня идет дождь</li>
			<li>Дождь будет идти весь день</li>
	<dt><i>Новость ночи</i>
		<dd>
			<li>Ночью будет идти дождь</li>
			<li>Завтра начнется новый день</li>
</dl>

Результат: