Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML Коды языков

HTML: Вложенные (многоуровневые) списки

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

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

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

Список определений создается с помощью тега <dl> (Definition List), внутри которого указывается тег <dt> (Definition Term), выделяющий термин, и тег <dd> (Definition Description), содержащий описание к данному термину:

<html>
  <body>

    <h4>Список определений:</h4>
    <dl>
      <dt>Кофе</dt><dd>Бодрящий горячий напиток</dd>
      <dt>Молоко</dt><dd>Полезный холодный напиток</dd>
    </dl>

  </body>
</html>
Попробовать »

Внутри элемента <dd> вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т.д.

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

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

Для создания вложенного списка, надо в родительский список поместить дочерний список так, чтобы все элементы дочернего списка были вложены в элемент <li> родительского списка:

<html>
  <body>

    <h4>Вложенный список:</h4>
    <ul>
      <li>Кофе</li>
      <li>Чай
        <ol>
          <li>Черный чай</li>
          <li>Зеленый чай</li>
        </ol>
      </li>
      <li>Молоко</li>
    </ul>

  </body>
</html>
Попробовать »

Таким образом можно создавать многоуровневые списки.

Примечание: обычно вложенный список отображается с небольшим отступом вправо от родительского списка.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen