Итак, мы идем дальше и следующий момент, который нам нужно изучить – это списки. Если мы взглянем на статью, то увидим, что у нас в ней есть список, который отличается от параграфов, т.е. он выглядит именно как список. В нашем случае мы сделали ему четыре отдельных параграфа, и здесь как список он не совсем проходит. Дело в том, что в HTML для создания списков есть отдельные теги, причем их бывает три вида.
Упорядоченный список
Начнем мы с самого основного вида – это обычный упорядоченный список, т.е. там нам не нужно будет указывать единичку, двойку и т.д. там все будет сделано автоматически (упорядоченный означает, что он будет иметь маркеры в виде цифр, букв или других символов о которых мы поговорим позже). Так что цифры в этом списке сразу уберите. Также уберите параграфы, они нам больше не нужны, потому что мы будем использовать специальные теги. У нас должно остаться четыре предложения, которые должны быть в виде списка. Первый тег, который нужно знать – это парный тег <ol> (англ. Ordered list, т.е. упорядоченный список). Здесь мы говорим браузеру, что эти четыре предложения будут элементами упорядоченного списка:
Теперь каждую строку нам нужно закрепить в свой парный тег, который пишется <li>. Вот таким образом мы с вами создали список:
Сначала мы открыли контейнер <ol> - сказали, что мы будем делать упорядоченный список, а затем указали, что каждая строка должна быть элементом списка. Сохраняем, проверяем. Видите, что мы получаем готовый список, причем цифры браузер подставил автоматически, в тексте мы их не указывали. Вот таким образом работает тег <ol> - он создает упорядоченный список.
Неупорядоченный список
Теперь поговорим про второй тип списка – это неупорядоченный список, я думаю, вы их тоже неоднократно видели – это когда вместо цифр указывается черный маркер для каждого элемента списка. Там единственное отличие что вместо тега <ol> указывается <ul> - неупорядоченный список (англ. Unordered list), и каждый элемент списка создается также с помощью тега <li>. Скопируйте наш список, и просто поменяйте букву «о» на букву «u»:
Сохраняем, проверяем. Вот у нас под списком появился еще один список, уже в виде маркеров, т.е. он неупорядоченный, здесь каждый элемент равноправен.
Список определений
И последний вид списков, который используется достаточно редко, но все равно он может вам где-то встретиться, поэтому вы должны его знать. Это так называемый список определений. До этого мы использовали списки, где каждый элемент списка самодостаточный, ему больше ничего не нужно – это просто элемент списка, допустим список городов, актеров и т.п. Иногда бывает так, что для каждого элемента списка требуется описание, т.е. элемент – за ним идет описание, элемент – описание. Для таких списков определений нужен третий вид списков, который создается с помощью тега <dl> (англ. Definition List). Здесь уже отличается создание пунктов этого списка, т.е. они уже создаются не с помощью тега <li>, а с помощью тега <dt> (англ. Definition Term), а под ним еще создается описание <dd> (англ. Definition Definition), и здесь мы напишем «Описание 1», «2» и т.д.
Сохраним, обновим. Вот мы видим – идет элемент – за ним описание, элемент – описание. Вот таким образом это работает. На этом мы с вами остановимся. Три вида списков мы с вами изучили. На этом все, увидимся в следующем уроке.