Как сделать список в списке

Добавил пользователь Alex
Обновлено: 04.10.2024

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

Нумерованный (упорядоченный) список.
Маркированный (неупорядоченный) список.
Список описаний.
Список контекстных меню.

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

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега (сокращенное от английского ordered list - упорядоченный список). Каждый элемент списка начинается с тега (элемент списка).

Давайте рассмотрим примеры использования:

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

Ещё один интересный атрибут - type, который позволит Вам задать буквенную нумерацию ( "A" – большие, "a" – строчные), либо нумерацию из римских цифр ( "I" – в верхнем регистре, "i" – в нижнем регистре).

Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

Результат нашего примера:

Рис. 14 Виды нумерованных списков.

Еще один нюанс: при использовании атрибута start с буквами (type = "A" и type = "a" ), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = "4" , будет соответствовать букве "D" и список начнётся именно с неё. При использовании значения start = "27" счетчик обнуляется, при этом список становится двухзначным ( "27" = "AA", "28" = "AB", "29" = "AC". ). Значения должны быть целочисленными, допускается использование отрицательных значений.

Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка ):

Выглядеть на странице это будет соответственно так:

Первый пункт.

Первый пункт.
Второй пункт.
Третий пункт.

Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

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

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

Давайте рассмотрим примеры использования:

Выглядеть на странице это будет соответственно так:

Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style. Более подробно этот атрибут будет рассмотрен в следующей статье "HTML стили".

Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:

Атрибут	Значение
list-style-type:none	Убирает маркер.
list-style-type:disc	Маленький черный круг. Это значение по умолчанию.
list-style-type:circle	Круг пустой внутри.
list-style-type:square	Маркер в виде квадрата.

Ниже приведен пример использования стилей CSS внутри маркированного списка:

Результат нашего примера:

Рис. 15 Маркированные списки.

Обращаю Ваше внимание, что допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка ) при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:

Первый пункт
- Первый пункт
  - Первый пункт
    - Первый пункт
    - Второй пункт
    - Третий пункт
    Список описаний
    
    Тэг (HTML Description List Element) определяет список, тэг (HTML Definition Term Element) определяет его имя, а тег (HTML Description Element) описывает его значение.
    
    Рассмотрим пример использования:
    
    Как вы можете заметить значение списка описаний (элемент ) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:
    
    Рис. 16 Список описаний.
    
    Обращаю Ваше внимание, что допускается формировать списки описаний, вложенные в другие списки описаний (внутри элемента значения списка ).
    
    Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.
    
    Список контекстных меню
    
    Тег используется для контекстных меню, панелей инструментов и для включения элементов управления формы.
    
    Тег определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.
    
    В настоящее время теги и имеют очень ограниченную поддержку браузерами и практически не используется по этой причине:
    
    Тег
    Chrome
    Firefox
    Opera
    Safari
    IExplorer
    Edge
    
    Нет 8.0 Нет Нет Нет Нет
    
    Рассмотрим пример для расширения кругозора:
    
    Для тех у кого браузер не отображает результат:
    
    Использование глобального атрибута contextmenu, тегов и .
    
    , который был использован в этом примере будет подробно рассмотрен в статье учебника "Теги разметки страницы".
    
    Вопросы и задачи по теме
    
    Перед тем как перейти к изучению следующей темы выполните практические задания.
    
    Практическое задание № 6.
    
    Практическое задание № 7.
    
    Практическое задание № 8.
    
    Практическое задание № 9.
    
    Если у Вас есть затруднения в составлении какого-то списка, то внимательно перечитайте статью еще раз, если вы не найдете ответа на ваш вопрос, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
    
    Как создавать списки в HTML знают почти все. Это просто.
    
    Для маркированного списка используются теги UL и LI.
    
    Вот, к примеру, самый простой маркированный список:
    
    В браузере это выглядит следующим образом:
    
    Маркер списка можно изменять с помощью атрибута TYPY тега UL.
    
    - окружность;
    - круг;
    - квадрат.
    
    Нумерованные списки создаются с помощью тегов OL и LI.
    
    Смотрим в браузере:
    
    Точно так же, как и маркеры в маркированном списке, вид номера в нумерованном можно изменить с помощью атрибута TYPE тега OL.
    
    - римские большие цифры;
    - римские маленькие цифры;
    - большие буквы английского алфавита;
    - маленькие буквы английского алфавита.
    
    Можно попробовать сделать многоуровневый список из разных видов номеров:
    
    Неплохо, но хотелось бы иметь классический вид.
    
    Если попытаться сделать вложенный нумерованный список с обычными цифрами мы должны написать вот такой код:
    
    Проверяем. Получается вот так:
    
    Совсем не то что нужно. А хотелось бы иметь правильный многоуровневый список, который выглядит следующим образом:
    
    1. Первый элемент списка
    
    2. Первый элемент списка
    
    2.1. Второй уровень вложенности
    2.2. Второй уровень вложенности
    2.3. Второй уровень вложенности
    
    3. Первый элемент списка
    
    4. Первый элемент списка
    
    5. Первый элемент списка
    
    Так вот, для того,чтобы это сделать, нужно прописать следующий стиль для списков:
    
    Та-да-да-дам!
    Получилось то, что нужно!
    
    Вот они! Волшебные строчки, которые нужно добавить в описание стилей:
    
    Эти строчки обеспечивают вывод любой вложенности списков, а не только второй.
    Пишем, к примеру, вот так:
    
    Получаем вот такой список в браузере:
    
    Многоуровневый список — это список, в котором содержатся элементы с отступами разных уровней. В программе Microsoft Word присутствует встроенная коллекция списков, в которой пользователь может выбрать подходящий стиль. Также, в Ворде можно создавать новые стили многоуровневых списков самостоятельно.
    
    Выбор стиля для списка со встроенной коллекции
    
    1. Кликните в том месте документа, где должен начинаться многоуровневый список.
    
    2. Кликните по кнопке “Многоуровневый список”, расположенной в группе “Абзац” (вкладка “Главная”).
    
    3. Выберите понравившийся стиль многоуровневого списка из тех, что представлены в коллекции.
    
    4. Введите элементы списка. Для изменения уровней иерархии элементов, представленных в списке, нажмите “TAB” (более глубокий уровень) или “SHIFT+TAB” (возвращение к предыдущему уровню.
    
    Создание нового стиля
    
    Вполне возможно, что в числе многоуровневых списков, представленных в коллекции Microsoft Word, вы не найдете того, который бы вас устроил. Именно для таких случаев в этой программе предусмотрена возможность создания и определения новых стилей многоуровневых списков.
    
    Новый стиль многоуровневого списка может быть применен при создании каждого последующего списка в документе. Кроме того, новый стиль, созданный пользователем, автоматически добавляется в доступную в программе коллекцию стилей.
    
    1. Кликните по кнопке “Многоуровневый список”, расположенной в группе “Абзац” (вкладка “Главная”).
    
    2. Выберите “Определить новый многоуровневый список”.
    
    3. Начиная с уровня 1, введите желаемый формат номера, задайте шрифт, расположение элементов.
    
    4. Повторите аналогичные действия для следующих уровней многоуровневого списка, определив его иерархию и вид элементов.
    
    Примечание: Определяя новый стиль многоуровневого списка, в этом же списке вы можете использовать и маркеры и номера. К примеру, в разделе “Нумерация для этого уровня” вы можете пролистать перечень стилей многоуровневого списка, выбрав подходящий стиль маркера, который и будет применен к конкретному уровню иерархии.
    
    5. Нажмите “ОК” для принятия изменения и закрытия диалогового окна.
    
    Примечание: Стиль многоуровневого списка, который был создан пользователем, будет автоматически установлен в качестве стиля, используемого по умолчанию.
    
    Для перемещения элементов многоуровневого списка на другой уровень, воспользуйтесь нашей инструкцией:
    
    1. Выберите элемент списка, который нужно переместить.
    
    2. Кликните по стрелке, расположенной около кнопки “Маркеры” или “Нумерация” (группа “Абзац”).
    
    3. В выпадающем меню выберите параметр “Изменить уровень списка”.
    
    4. Кликните по тому уровню иерархии, на который нужно переместить выбранный вами элемент многоуровневого списка.
    
    Определение новых стилей
    
    На данном этапе необходимо пояснить, в чем заключается разница между пунктами “Определить новый стиль списка” и “Определить новый многоуровневый список”. Первую команду уместно использовать в ситуациях, когда необходимо изменить стиль, созданный пользователем. Новый стиль, созданный с помощью этой команды, обнулит все его вхождения в документе.
    
    Параметр “Определить новый многоуровневый список” крайне удобно использовать в случаях, когда нужно создать и сохранить новый стиль списка, который в дальнейшем не будет изменяться или же будет использоваться только в одном документе.
    
    Ручная нумерация элементов списка
    
    В некоторых документах, содержащих нумерованные списки, необходимо обеспечить возможность ручного изменения нумерации. При этом, необходимо, чтобы MS Word правильно изменял номера следующих элементов списка. Один из примеров документов такого типа — юридическая документация.
    
    Для ручного изменения нумерации необходимо воспользоваться параметром “Задание начального значения” — это позволит программе корректно изменить нумерацию следующих элементов списка.
    
    1. Кликните правой кнопкой мышки по тому номеру в списке, который нужно изменить.
    
    2. Выберите параметр “Задать начальное значение”, а затем выполните необходимое действие:
    3. Порядок нумерации списка будет изменен согласно заданным вами значениям.
    
    Вот, собственно, и все, теперь вы знаете, как создавать многоуровневые списки в Ворде. Инструкция, описанная в данной статье, применима ко всем версиям программы, будь то Word 2007, 2010 или его более новые версии.
    
    Мы рады, что смогли помочь Вам в решении проблемы.
    
    Отблагодарите автора, поделитесь статьей в социальных сетях.
    
    Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
    
    Списки — важная составляющая контента, так как они помогают упорядочить информацию. Текст в списках лучше воспринимается и проще запоминается.
    
    Маркированный список
    
    Самый простой - перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.
    
    Чтобы его создать, нужно использовать всего два тега: и . — это контейнер, содержащий список, элементы которого задаются тегом .
    
    По умолчанию в качестве маркера списка используется чёрный кружок (disk). Добавив в тег атрибут type и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle) или чёрный квадрат (square).
    
    Нумерованный список
    
    От маркированного отличается тем, что порядок элементов в нём важен, а потому вместо маркера здесь используются последовательно идущие цифры или буквы. О порядке в списке заботиться не нужно: эту задачу берёт на себя браузер. Если изменить список (удалить или добавить элемент, нарушив порядок), обозреватель пересчитает его и отобразит правильно.
    
    Для создания нумерованных списков используются теги и . Контейнер определяет начало и конец списка, тег задаёт начало и конец его элемента — всё, как в маркированном списке, только заменено на .
    
    Так как с нумерованными списками не всегда всё так просто, для тега создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):
    
    1. type. Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).
    
    2. start. Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение — номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.
    
    3. reversed. Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.
    
    Для того, чтобы задать произвольный номер элементу в середине списка, нужно использовать в теге атрибут :
    
    Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов — отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.
    
    Список определений
    
    Не такой известный тип списка, как рассмотренные выше. Состоит из терминов и их определений. Создаётся с помощью тегов:
    
    — контейнер, содержащий список.
    
    Вот пример списка определений:
    
    Многоуровневый список
    
    Список, состоящий из списков, вложенных друг в друга. Может включать в себя списки разных типов. Сложность создания заключается в соблюдении правильной вложенности тегов, так как в многоуровневой структуре легко запутаться.
    
    Читайте также: