начало → тема 1 → кодирование списков

09. Кодирование списков

На этой странице:

HTML позволяет задавать на страницах списки двух типов — нумерованный и маркированный. Кроме того, каждый пункт списка может иметь подчинённый, вложенный список.

Примеры маркированного и нумерованного списков:

Маркированный список Нумерованный список
Вопросы Пятачка
  • Какой он, этот Слонопотам?
  • Неужели очень злой?
  • Идёт ли он на свист? И если идёт, то зачем?
  • Любит ли он поросят или нет?
  • И как он их любит?
Словечки Эллочки
  1. Хамите.
  2. Хо-хо!
  3. Знаменито.
  4. Мрачный.
  5. Мрак.
  6. Жуть.

Вверх Маркированный список

Каждый элемент маркированного списка браузер предваряет меткой (маркером списка), а сами элементы смещает вправо.

Блочный элемент UL, задающий маркированный список, записывается в следующем виде:

Внутри блока UL содержатся блоки LI, задающие пункты списка.

Закрывающий тег </UL> является обязательным, а теги </LI> можно опускать.

Вид маркера, помещаемого браузером перед каждым элементом списка, настраивается при помощи атрибута type. Этот атрибут может отсутствовать или принимать одно из трёх значений:

Начальный тег Вид Описание
<UL>
  1.  
 Обычно круг (зависит от браузера)
<UL type=circle>
  1.  
 Окружность
<UL type=disc>
  1.  
 Круг
<UL type=square>
  1.  
 Квадрат 

  
Посмотреть

Вверх Нумерованный список

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

Нумерованный список задается блочным элементом OL:

Внутри блока OL содержатся блоки LI, задающие пункты списка.

Закрывающий тег </OL> является обязательным, а теги </LI> можно опускать.

Вид номера определяется значением атрибута type:

Начальный тег Вид Описание
<OL>
  1.  
 Нумерация арабскими цифрами (1, 2, 3,…)
<OL type=1>
  1.  
 Нумерация арабскими цифрами (1, 2, 3,…)
<OL type=A>
  1.  
 Нумерация прописными буквами (A, B, C,…)
<OL type=a>
  1.  
 Нумерация строчными буквами (a, b, c,…)
<OL type=I>
  1.  
 Нумерация большими римскими цифрами (I, II, III,…)
<OL type=i>
  1.  
 Нумерация малыми римскими цифрами (i, ii, iii,…)

Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение номера. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, n = 4 означает D или IV). 

  
Посмотреть

Браузеры делают фиксированный отступ для вывода элементов списка на экран (примерно 40 пикселов). Нумерация при этом смещается к левому краю окна. Когда номер достаточно большой, места не хватает. Для исключения этого неприятного эффекта в коде примера пришлось задать смещение списка вправо на 100 пикселов при помощи стилевого указания style="margin-left:100px" в теге OL.

Вверх Вложенные списки

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

Пример вложенных маркированных списков: 

  
Посмотреть

Пример вложенных нумерованных списков: 

  
Посмотреть

Пример смешанного списка — элементы нумерованного списка содержат вложенные маркированные списки: 

  
Посмотреть
Правила дизайна

О важности выравнивания элементов страницы уже говорилось.

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

Посмотрите на такой список:

А теперь на такой:

Последний список получен центрированием. Разница заметна, правда?

Вверх вверх

начало → тема 1 → кодирование списков