Html многоуровневый нумерованный список: Нумерованный список | htmlbook.ru

Списки в HTML странице. Основное применение списков.

 

 

 

Основное применение списков:

• Нумерованные — для перечисления элементов, следующих в строго определенном порядке.
• Маркированные — для перечисления элементов, следующих в произвольном порядке.
• Многоуровневые — для конкретизации информации определенных элементов.
• Список определений — используется для форматирования словарей.

Нумерованный список html страницы

Для создания нумерованных списков используются тэги <OL> <LI>

Тэгом <OL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации.

Значение  Нумерация

  TYPE

 

  A       A, B, C..

  a       a, b, c..

  I       I, II, III..

  i       i, ii, iii. .

  1       1. 2. 3..  

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

При помощи атрибутов START VALUE можно изменить порядок нумерации списка.

START — служит для задания начального номера списка, отличного от 1.

VALUE — дает возможность назначить произвольный номер любому элементу списка.

HTML-код:

 

<ol>

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol type=»A»>

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol start=»5″>

<li>элемент 1</li>

<li value=»9″>элемент 2</li>

<li>элемент 3</li>

</ol>

 

Маркированный список html страницы

Для создания маркированных списков применяют тэги <UL <LI>

Тэгом <UL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования.

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

Пример:

HTML-код:

<ul type=»circle»>

<li>элемент 1</li>

<li>элемент 2</li>

<li type=»disc»>элемент 3</li>

<li type=»square»>элемент 4</li>

</ul>

                        Многоуровненвый список html страницы

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

Списки определений html страницы

Для создания списков определений используют три тэга:

<DL> — начало/конец списка.

<DT> — начало/конец конкретного термина.

<DD> — начало/конец поясняющей статьи термина.

Тэги <DT> и <DD> не обязательно чередовать. Т.е. можно «привязать» к одному определению несколько терминов, и, наоборот.

HTML-код:

 

<dl>

<dt>Термин 1</dt>

<dd>Аннотация1 к термину 1</dd>

<dd>Аннотация2 к термину 1</dd>

</dl>

HTML-списки | Web-sovety.ru

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

маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
список определений — <dl> — состоит из пар термин <dt> — <dd> определение.

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

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

• Содержание:
• 1. Маркированный список <ul>
• 2. Нумерованный список <ol>
• 3. Список определений <dl>
• 4. Вложенный список
• 5. Многоуровневый нумерованный список

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

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

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul>

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>

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

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

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

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

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value=”10″>, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol> Атрибут
Описание, принимаемое значение

reversed	Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start	Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start=”10″> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type=”I” 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).

<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>

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

3.

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

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

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

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd>

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>

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

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

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

<ul>
 <li>Пункт 1. </li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>

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

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

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

<ol>
  <li>пункт</li> <!-1.->
  <li>пункт           
    <ol>
      <li>пункт</li> <!-2.1.->
      <li>пункт</li> <!-2.2.->
      <li>пункт
        <ol>
          <li>пункт</li> <!-2. 3.1.->
          <li>пункт</li> <!-2.3.2.->
          <li>пункт</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>пункт</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>пункт</li> <!-3.->        
  <li>пункт</li> <!-4.->        
</ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
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. Многоуровневый нумерованный список

Источник

Добавление вложенных списков (вложенных маркированных списков) в Webflow CMS

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

Как следует из их названия, это списки, которые вложены в другой список и обычно используются для указания дополнительной информации о конкретном элементе списка. Во многих текстовых процессорах и некоторых CMS веб-сайтов создание вложенного списка так же просто, как нажатие клавиши табуляции на клавиатуре (или нажатие кнопки отступа), когда ваш курсор находится на элементе списка. При работе с Webflow CMS, особенно с Rich Tech Element, создание вложенных списков не так просто, как вы можете ожидать. К счастью, есть обходные пути, хаки и собственные методологии кода, которые могут вам помочь.

• Элемент списка
  • Вложенный элемент списка

1. Элемент списка
   1. Вложенный элемент списка

На момент написания этой статьи не существовало официального способа добавления вложенных списков (подсписков, подпунктов) через элемент RTE Webflow из CMS Webflow. Однако существуют доступные решения/обходные пути, сложность которых варьируется от использования простого сочетания клавиш до установки хака, который обрабатывает стиль вашего списка.

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

Метод 1. Обходной путь с помощью сочетания клавиш (пользовательский код не требуется)

Подобно тому, как вложенные списки работают в Medium, Webflow также позволяет «вкладывать» элементы списка, сохраняя тот же отступ, что и предыдущий элемент списка.

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

Если у вас есть более одного элемента списка, который вам нужен вложенным, вы можете поместить курсор в конец вашего элемента списка с отступом (или вложенного), а затем нажать «Shift + Enter» на клавиатуре, чтобы сделать следующий элемент списка сохраняет отступ.

Пример:

• Это пример маркера
  — И это пример элемента списка с отступом (вложенного), созданного с использованием этого метода

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

Способ 2: HTML с помощью элемента пользовательского кода

Этот метод является «официальным браузером» для обработки вложенных списков, поскольку вы будете использовать HTML, язык, который браузер понимает и использует постоянно. Этот метод поддерживает как вложенные списки, так и вложенные списки внутри вложенных списков, что удобно, если у вас есть сложный многоуровневый список, который необходимо разместить в вашем контенте.

Вот как это сделать: 

• Когда вы находитесь на новой строке в Webflow CMS, нажмите появившийся значок «+», а затем символ «<>» (см. фото ниже для справки)

• В появившемся окне вам нужно будет ввести свой список в HTML. В HTML есть немало того, что вы можете сделать для настройки своих списков, мы рассмотрим основные HTML-теги, которые вам нужно знать, ниже с примерами для подражания.
   –
   – это HTML-теги, окружающие неупорядоченный список (маркированные точки)
   –
   – HTML-теги, используемые для окружения упорядоченного списка (нумерованные точки)
   –
• < /li> — это HTML-теги, которые окружают элемент списка 9

  Метод 3: Finsweet Hack

  Люди из Finsweet создали хак, который дает вам возможность вложенных списков с использованием специального кода. Этот метод поддерживает как подпункт (вложенный список), так и подпункт подпункта (вложенный список внутри другого вложенного списка). Он использует некоторые CSS и JavaScript для управления тем, что вы ввели в свой элемент Rich Text. У них есть видео и описание на их сайте прямо здесь.

  Соответствующие ссылки

  • Вложенные списки в форматированном тексте | Список желаний веб-потока
    
  • Создание вложенных списков внутри элемента Rich Text (finsweet. com)

  Списки | Dev Cheatsheets

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

  Basic

  Дефис предпочтительнее.

  Код:

   - Первая позиция.
  - Второй пункт.
   

  Результат:

  • Первый элемент.
  • Второй предмет.

  Вложенный

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

  Код:

    - Вложенный
      * Пуля
          + Список
  - Вложенный
      - Пуля
          - Список
   

  Результат:

  • Вложенный
    • Пуля
      • Список
  • Вложенный
    • Пуля
      • Список

  Многострочный текст

  В маркированном списке (но не в нумерованном списке) можно использовать разрывы строк.

  Код:

   - Здесь начинается первая точка.
      Следующая линия той же точки. 
      И третья линия.
  - Второй пункт начинается здесь.
      И продолжает идти сюда.
   

  Результат:

  • Здесь начинается первая точка.

    Следующая строка той же точки.

    И третья строка.

  • Здесь начинается вторая точка.

    И продолжает здесь.

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

  Код:

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

  Результат:

  1. Номер
  2. Список

  Обратите внимание, нумерацию можно оставить как все 1. и она все равно будет работать.

  Код:

   1. Фу
  1. Бар
  1. Баз
   

  Результат:

  1. Фу
  2. Бар
  3. Баз

  Обратите внимание, что стиль форматирования чисел будет меняться сам по себе на каждом уровне отступа.

  Код:

   1. Вложенный
      1. Пуля
          1. Список
   

  Результат:

  1. Вложенный
     1. Пуля
        1. Список

  Смешанный список

  Код:

   1.  Номер
  2. Номер
      * Пуля
      * Пуля
  3. Номер
   

  Результат:

  1. Номер
  2. Номер
     • Пуля
     • Пуля
  3. Номер

  Цитаты в списках

  Цитата под пунктом

  Код:

   - Высший уровень
      - Точка А
          > С отступом, поэтому аккуратно показывает **внутри** точки.
   

  Результат:

  Многострочная цитата под маркером

  Код:

   - Верхний уровень
      - Точка А
          > Первая строка.
          >
          > Следующая строка.
   

  Результат:

  • Верхний уровень
    • Точка А

      Первая строка.

      Следующая строка.

  Цитата как маркер

  Код:

   - Верхний уровень
      -> Точка А, которая является цитатой.
   

  Результат:

  Неправильное форматирование

  Не смешивайте цитату и маркер на одном уровне.

  Код:

   - Верхний уровень
      - Точка А
      > Здесь нет отступа, наверное, не то, что вы хотите.
      - Точка Б
   

  Результат:

  Кодовые блоки в списках

  Базовый

  Код:

   - Верхний уровень
      - Фу
      - Вот код, с отступом, чтобы было видно под точкой.
          ```питон
          print("Привет, мир!")
          ```
      - Бар
   

  Результат:

  • Верхний уровень

  Многострочный

  Код:

   - Вот код, с отступом, чтобы он отображался под точкой.
      ```питон
      print("Привет, мир!")
      ```
  Больше текста в том же месте.
      ```питон
      print("Снова привет, мир!")
      ```
  - Бар.
   

  Результат:

  Таблицы внутри маркированного списка

  Я обнаружил это случайно и не видел на практике, но тем не менее, если это полезно. Обратите внимание, что стандартная уценка не поддерживает это (как на GitHub), но Jekyll поддерживает.

  Таблицы с одной строкой

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

   - абв | деф
  - привет | jkl
  - первая | второй | третий | четвертый
   

  • абв

    по

  • гхи

    джкл

  • первый

    секунд

    третий

    четвертый

  Многострочный стол

   - abc | деф
    деф | ghj
   

  • абв	по
    по умолчанию	гхдж

  Изображения в списках

  Обратите внимание, что HTML дает вам больше возможностей для управления, например изменение размера изображения, но вы можете использовать HTML или Markdown для изображения.