Списки HTML

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

1)   маркированный список — тег ul — каждый элемент списка (тег li) отмечается маркером,

2)   нумерованный список — тег  ol — каждый элемент списка (тег li) отмечается цифрой,

3)   список определений — тег  dl — состоит из пары: термин (тег dt) и определение (тег dd).

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

1. Маркированный список

Маркированный список представляет собой неупорядоченный список. Создаётся с помощью парного тега ul. В качестве маркера элемента списка выступает метка, например, закрашенный кружок. Например:

<ul>

  <li>Информационные технологии</li>

  <li>Программирование</li>

  <li>Технологии баз данных</li>

  <li>Компьютерная графика</li>

</ul>

выглядит в браузере:

Рис. 10

2. Нумерованный список

Нумерованный список создаётся с помощью парного тега ol. Каждый пункт списка также создаётся с помощью тега li. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Пример:

<ol>

  <li>Информационные технологии</li>

  <li>Программирование</li>

  <li>Технологии баз данных</li>

  <li>Компьютерная графика</li>

</ol>

выглядит в браузере:

Рис. 11

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

Списки определений создаются с помощью парного тега dl. Для добавления термина применяется парный тег dt, а для вставки определения — парный тег dd.

<dl>

  <dt> Информационные технологии </dt>

    <dd>изучает как работать с информацией с помощью компьютера</dd>

  <dt> Программирование </dt>

    <dd>Системное</dd>

    <dd>Офисное</dd>

    <dd>Web-программирование</dd>

    <dd>Логическое</dd>

    <dd>Функциональное</dd>

</dl>

Рис. 12

4. Вложенный список

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

<ul>

 <li>Информационные технологии</li>

  <li>Программирование

    <ul>

      <li>Системное</li>

       <li> Web-программирование   

        <ul>

          <li>Клиентский язык программирования</li>

          <li> Серверный язык программирования </li>

          </ul>

       </li>         

      <li>Офисное</li>

    </ul>

  </li>

 <li>Технологии баз данных</li>

</ul>

Рис. 13

5. Многоуровневый нумерованный список

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

<ol>

  <li>Системное программное обеспечение</li> <!-1.->

  <li>Прикладное программное обеспечение           

    <ol>

      <li>Электронная таблица</li> <!-2.1.->

      <li>Текстовый редактор и процессор</li> <!-2.2.->

      <li>Графический редактор

        <ol>

          <li>Paint</li> <!-2.3.1.->

          <li>PhotoShop</li> <!-2.3.2.->

          <li>Corel Draw</li> <!-2.3.3.->

        </ol>

      </li> <!-2.3.->

      <li>Система управления базой данных</li> <!-2.4.-> 

    </ol>

  </li> <!-2.->

  <li>Искусственный интеллект</li> <!-3.->       

  <li>Теория информации</li> <!-4.->       

</ol>

Рис. 14