16. Списки html

Рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили

Введение

Списки используются для объединения в группу связанных объектов информации, чтобы облегчить их ассоциирование друг с другом и чтение. В современной разработке Web списки являются основополагающими элементами, часто используемыми для навигации, а также обычного контента.

Списки хорошо подходят со структурной точки зрения, так как они помогают создать хорошо структурированный, более доступный, и простой в обслуживании документ. Они полезны также с чисто практических соображений — они предоставляют дополнительные элементы для соединения со стилями CSS для целого множества стилей оформления.

В этой лекции будут рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили. Лекция имеет следующее содержание (кстати — список):

Три типа списков

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

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

  • Разметка упорядоченного списка

  • Начало упорядоченные списков с числа, отличного от 1

• Списки определений

Выбор типа списка

Различие между списками HTML и текстом

Вложенные списки

Пошаговый пример

• Разметка основной страницы

• Добавление некоторых стилей

• Страница рецептов

• Разметка страницы рецептов

• Оформление страницы рецептов

Заключение

Дополнительное чтение

Контрольные вопросы

Три типа списков

В HTML имеется три типа списков:

• Неупорядоченный список - используется для объединения в группу множества связанных объектов без определенного порядка.

• Упорядоченный список - используется для объединения в группу множества связанных объектов в определенном порядке.

• Список определений - используется для вывода пар имя/значение, таких как термины и их определения, или время и события.

Каждый из них имеет определенное назначение - они не являются взаимозаменяемыми!

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

Неупорядоченные списки, или маркированные списки, используются, когда множество объектов может быть размещено в любом порядке. Примером является список покупок:

• молоко

• хлеб

• сливочное масло

• кофейные зерна

Однако все эти объекты являются частью одного списка, можно разместить объекты в любом порядке и список будет по-прежнему иметь смысл:

• хлеб

• кофейные зерна

• молоко

• сливочное масло

Можно использовать CSS для изменения маркера на один из нескольких используемых по умолчанию стилей, использовать свое собственное изображение, или даже вывести список без маркеров - мы посмотрим, как сделать это, немного позже в этой лекции, и расширим немного дальше в будущей лекции.

Разметка неупорядоченного списка

Неупорядоченные списки используют одну пару тегов <ul></ul>, охватывающих множество пар тегов <li></li>:

<ul>

<li>хлеб </li>

<li>кофе в зернах </li>

<li>молоко </li>

<li>масло </li>

</ul>

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

Упорядоченные списки, или нумерованные списки, используются для вывода списка объектов, которые необходимо разместить в определенном порядке. Примером могут быть кулинарные инструкции по приготовлению, которые должны быть выполнены в определенном порядке рецепта:

1. Собрать ингредиенты

2. Смешать ингредиенты

3. Поместить ингредиенты в форму для выпечки

4. Выпекать в духовке в течение часа

5. Вынуть из духовки

6. Дать постоять десять минут

7. Подать

Если список позиций переставить в другом порядке, то информация больше не будет иметь смысл:

1. Собрать ингредиенты

2. Выпекать в духовке в течение часа

3. Вынуть из духовки

4. Подать

5. Поместить ингредиенты в форму для выпечки

6. Дать постоять десять минут

7. Смешать ингредиенты

Упорядоченные списки могут выводиться с помощью одной из нескольких цифровых или алфавитных систем — то есть с буквами или числами. По умолчанию в большинстве браузеров используются десятичные числа, но имеется большее количество возможностей.

Буквы

• Буквы ascii нижнего регистра (a, b, c…)

• Буквы ascii верхнего регистра (A, B, C…)

• Классические греческие буквы нижнего регистра: (, β, γ…)

Числа

• Десятичные числа (1, 2, 3…)

• Десятичные числа с ведущим нулем (01, 02, 03…)

• Римские числа в нижнем регистре (i, ii, iii…)

• Римские числа в верхнем регистре (I, II, III…)

• Традиционная грузинская нумерация (an, ban, gan…)

• Традиционная армянская нумерация (mek, yerku, yerek…)

Здесь также можно использовать CSS для изменения стиля списков.