Ну вот, мы и подошли к завершающей стадии в изучении списков. Мы уже узнали, как создавать нумерованные списки, а также ненумерованные списки. И в этом уроке мы рассмотрим самый редко используемый вид списков это списки - определения. Такие списки используются, когда для каждого элемента списка требуется какое-то описание. Для таких списков определений и нужен данный вид списков, который мы дальше и рассмотрим.
Для создания списков определения создается контейнер из тега <dl> и его пары закрывающегося тега </dl>. С английского <dl> это сокращение от description list список описаний. Описательный список создается совсем по-другому и отличается от ранее изученных списков. Внутри контейнера <dl> с помощью тега <dt> и его закрывающего тега </dt> создается, элемент списка “термин”. Затем для каждого элемента списка мы еще должны создать описание с помощью тега <dd> и его закрывающегося тега </dd>. Ниже рассмотрим наглядно, как такой список создается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
- Я 1-й элемент у списка
- Описание первого элемента
- Я 2-й элемент у списка
- Описание второго элемента
- Я 3-й элемент у списка
- Описание третьего элемента
- Я 4-й элемент у списка
- Описание четвертого элемента
- CCCP
- Союз Советских Социалистических республик
- США
- Соединенные Штаты Америки
- ФБР
- Федеральное Бюро Расследований
</body> </html>
Выше мы видим следующую картину: идет элемент списка, ниже идет к нему описание, затем следующий элемент и снова к нему описание и так ко всем элементам. Такой список может применяться для расшифровки каких-то терминов или в словарях.
На этом мы завершаем уроки со списками. Мы рассмотрели три вида списков это нумерованные списки, ненумерованные списки ну и списки определения. В демо можно наглядно просмотреть, как это все выглядит и заметить, что термин остается в начале строки с левого края, а определение сдвигается вправо.
CSS