Тег ol задает. Нумерованный список

Описание

Атрибуты

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

Start: Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке. Пример » type: Определяет вид маркера, который будет использоваться для элементов списка:

• 1 - десятичные числа (1, 2, 3, 4 ...).
• A - латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D ...).
• a - латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d ...).
• I - римские цифры в верхнем регистре (I, II, III, IV ...).
• i - римские цифры в нижнем регистре (i, ii, iii, iv ...).
Пример »

Тег

так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }

Пример

1. Кофе
2. Чай
3. Молоко
50. Кофе
51. Чай
52. Молоко

В языке разметки гипертекста HTML имеется тег

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

Синтаксис тега

• Элемент #1
• Элемент #2
• Элемент #3
• ...

Этот код преобразуется в маркированный список на сайте:

• Элемент #1
• Элемент #2
• Элемент #3

Тег

требует обязательного использования закрывающего тега
.

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

Что может являться содержимым маркированного списка?

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

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

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

Например

• Элемент #1
• • Элемент #2-1
  • Элемент #2-2
  • Элемент #2-3
• Элемент #3
• ...

Атрибуты и свойства тега

Широко распространённым атрибутом тега

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

1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.

2. type="circle" - маркер в виде прозрачного кружка

Например:

• Элемент #1
• Элемент #2

• Элемент #1
• Элемент #2

3. type="square" - маркер в виде квадратика

Например:

• Элемент #1
• Элемент #2

А вот как это выглядит на странице:

• Элемент #1
• Элемент #2
Примечание 1

В CSS тип маркера задается с помощью атрибута list-style-type :

• ...

Рассмотрим какие значения может принимать list-style-type :

• disc - маркер в виде кружка (пример был выше)
• circle - маркер в виде прозрачного кружка (пример был выше)
• square - маркер в виде квадратика (пример был выше)
• decimal - маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
• decimal-leading-zero - маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
• lower-roman - маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
• upper-roman - маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
• lower-latin - маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
• upper-latin - маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
• lower-greek - маркер в виде списка греческим алфавитом маленькими буквами
• upper-greek - маркер в виде списка греческим алфавитом большими буквами
Примечание 2

Атрибут можно назначить как самому тегу

, так и тегам
• . При задании атрибута тегу
  все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:

  Код при этом выглядит так:

  • Элемент #1
  • Элемент #2
  • Элемент #3

  • Элемент #1
  • Элемент #2
  • Элемент #3

  Изменение маркеров тега

  с помощью CSS

  Элементы маркированного списка, создаваемые тегом

  , могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например

  • Элемент #1
  • Элемент #2
  • Элемент #3

  А так это выглядит на странице:

  • Элемент #1
  • Элемент #2
  • Элемент #3

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

  , он распространяется на все элементы списка.

  Элемент

  (от англ. "unordered list" ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент
  применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.

  Тег

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

  Пункты для нумерованных списков определяются с помощью тега

  • , который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

    Примечание: Если к

    применяется CSS свойство, то элементы
    • наследуют эти свойства.

      Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image , позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег

      .

      Синтаксис

      ...
      • ...
      ...

      Закрывающий тег

      Обязателен.

      Атрибуты

      compactУстарел в HTML5 Сокращает отступы и расстояния между строками. type HTML5 Устанавливает вид маркера списка.

      Для этого элемента доступны глобальные атрибуты и события .

      Стилизация по умолчанию

      Большинство браузеров отобразит элемент

      со следующими значениями CSS по умолчанию:

      Ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }

      Различия между HTML 4.01 и HTML5

      Атрибуты compact и type не поддерживаются в HTML5.

      Пример использования:

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

      Пример HTML:

      Попробуй сам
      • Кофе
      • Чай
      • Какао

      Спецификации

      Спецификация	Статус
      WHATWG HTML Living Standard (WHATWG)	Живой стандарт
      HTML 4.01 (W3C)	Рекомендация
      HTML5 (W3C)	Рекомендация
      HTML 5.1 (W3C)	Рекомендация

      Поддержка браузерами

      Попробуйте сами - Примеры

      Как сделать, чтобы список начинался с номера, отличного от 1.

      Задача

      Отобразить маркированый список горизонтально без маркеров.

      Решение

      Тег маркированного списка

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

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

        или

        Так вот, тег

      • также является блочным элементом.

        Чтобы тег

      • не вёл себя как блочный элемент, можно при помощи CSS сделать его строчным.

        За то, как элемент будет отображён в документе отвечает CSS свойство display . Рассмотрим три его значения (хотя их больше):

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

        Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline .

        • Пункт 1
        • Пункт 2
        • Пункт 3

        Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка:

        Рисунок 1. Работа примера №1.

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

        Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px и высоту 40px . Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:

        Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block . Изменим код нашего примера:

        • Пункт 1
        • Пункт 2
        • Пункт 3

        Этот код работает и изменения видны:

        
        Рисунок 2. Работа примера №2.

        Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:

        • Правка
          • Отменить
          • Вырезать
          • Копировать
          • Вставить
        • Начертание
          • Жирное
          • Курсивное
          • Подчеркнутое
        • Размер
          • Маленький
          • Нормальный
          • Средний
          • Большой

        Вот результат работы этого кода:

        
        Рисунок 3. Работа примера №3.

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

        А собственно, почему так происходит?

        Наши блоки имеют свойство display со значением inline-block . Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем - это качество строчных элементов.

        Давайте рассмотрим строку с символами "А" разной величины:

        А А А А А А А

        Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое.

        Для выравния текста по вертикали служит свойство vertical-align . В нашем примере №3 нужно использовать значение top , которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.

        Пока применим его к строке с символами "А" разной величины:

        А А А А А А А

        Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А".

        Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align .

        После этого отступления продолжим размещать элементы списка горизонтально.

        Второй способ

        Разместить элементы списка горизонтально можно используя свойство float . Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right .

        Вот пример с использованием этого кода:

        • Пункт 1
        • Пункт 2
        • Пункт 3

        Вот результат работы кода:

        Рисунок 4. Работа примера.

        Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float :

        • Пункт 1
        • Пункт 2
        • Пункт 3
        • Пункт 1
        • Пункт 2
        • Пункт 3

        Вот результат работы кода:

        Рисунок 5. Работа примера.

        В этих примерах контейнеры списка

        имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display , включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float выпадают из своего контейнера.

        При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

        Вот что мы получим в результате:

        Рисунок 6. Работа примера.

        Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float никто не отменял и оно распространяется на все последующие элементы.

        Как решить эту проблему?

        Для этого нужно использовать свойство clear , оно отменяет обтекание элементом другого элемента, если у того установлено свойство float .

        Вот изменённый пример с использованием свойства clear :

        • Пункт 1
        • Пункт 2
        • Пункт 3
        • Пункт 1
        • Пункт 2
        • Пункт 3

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

        • всё ещё располагаются вне контейнера
          .
          Рисунок 7. Работа примера.

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

          Это делается при помощи псевдоэлемента. Вот код:

          • Пункт 1
          • Пункт 2
          • Пункт 3
          • Пункт 1
          • Пункт 2
          • Пункт 3

          Теперь у нас 100% рабочий код.

          Рисунок 8. Работа примера.

          Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами

          . Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display : inline-block } в этих случаях вполне оправдано.

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

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

          маркированный список —

          — каждый элемент списка
          • отмечается маркером,
            нумерованный список —
            — каждый элемент списка
            1. отмечается цифрой,
               список определений — — состоит из пар термин
               —
               определение.

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

               Создание HTML-списков

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

               Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега

               . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

               Браузеры по умолчанию добавляют следующее форматирование блоку списка:

               Каждый элемент списка создаётся с помощью парного тега

            2. (от англ. List Item) .
            доступны .
            • Microsoft
            • Google
            • Apple
            Рис. 1. Маркированный список

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

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

          • . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

            Блок списка также имеет стили браузера по умолчанию:

          • доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
          • , то остальная нумерация будет пересчитана относительно нового значения.

            Для тега

            доступны следующие атрибуты:
            Таблица 1. Атрибуты тега

            Атрибут	Описание, принимаемое значение
            reversed	Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
            start	Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, .
            type	Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv).

            1. Microsoft
            2. Google
            3. Apple
            Рис. 2. Нумерованный список

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

            Списки определений создаются с помощью тега

            . Для добавления термина применяется тег
            , а для вставки определения — тег
            .

            Блок списка определений имеет следующие стили браузера по умолчанию:

            Для тегов

            ,

            и

            доступны .

            Режиссер:

            Петр Точилин

            В ролях:

            Андрей Гайдулян

            Алексей Гаврилов

            Виталий Гогунский

            Мария Кожевникова

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

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

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

            • Пункт 1.
            • Пункт 2.
              • Подпункт 2.1.
              • Подпункт 2.2.
                • Подпункт 2.2.1.
                • Подпункт 2.2.2.
              • Подпункт 2.3.
            • Пункт 3.

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

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

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

            1. пункт
            2. пункт
               1. пункт
               2. пункт
               3. пункт
                  1. пункт
                  2. пункт
                  3. пункт
               4. пункт
            3. пункт
            4. пункт

            Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
            counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
            counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
            content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

            Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
            Рис. 5. Многоуровневый нумерованный список