что такое маркированные списки
Списки — Основы вёрстки контента
Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:
В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своём представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки
Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.
Нумерованные списки
Структура нумерованных списков повторяет маркированные списки. Имея свою специальную обёртку возможно вкладывать пункты списка. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.
Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.
Списки определений
С точки зрения HTML списки определения являются самыми сложными для вёрстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.
Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:
Стилизация списков
Изменять маркер можно одним из двух способов:
В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.
Картинка в качестве маркера списка
Помимо встроенных в браузер значений маркеров списка, CSS даёт возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.
Важно: вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Что такое маркированные и многоуровневые списки
Вы можете настроить внешний вид списка, определив собственный нумерованный, маркированный или многоуровневый список. После этого можно сохранить его параметры в качестве стиля и использовать их повторно.
Задачи
Определение нового формата маркера
Выполните одно из указанных ниже действий.
Изменение маркера на символ
Выделите текст или маркированный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список 
и выберите пункт Определить новый маркер.
Нажмите кнопку Символ и щелкните нужный символ.
Изменение маркера на рисунок
Выделите текст или маркированный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.
Щелкните Рисунок и выберите изображение из файла или с помощью поиска изображений Bing.
Нажмите кнопку Вставить.
Просмотрите, как будет выглядеть рисунок в качестве маркера, и нажмите кнопку ОК, чтобы добавить его, либо замените рисунок, повторив шаги 3–5.
Изменение шрифта маркера
Выделите текст или маркированный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.
Нажмите кнопку Шрифт и измените свойства шрифта, который будет использоваться для маркера. Вы можете выбрать параметры на вкладках Шрифт и Дополнительно:
Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
Изменение выравнивания маркера
Выделите текст или маркированный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.
В группе «Выравнивание» выберите Слева, По центру или Справа.
Определение нового формата номера
Выделите текст или нумерованный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Нумерованный список 
и выберите пункт Определить новый формат номера.
Чтобы изменить стиль, щелкните стрелку вниз рядом с полем Нумерация и выберите числа, буквы или другой формат последовательности.
Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:
Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
Чтобы добавить к номеру дефис, круглую скобку или другой символ, введите его в поле Формат номера.
Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе «Выравнивание».
Определение нового многоуровневого списка
Выделите текст или нумерованный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список 
и выберите пункт Определение нового многоуровневого списка.
Разверните диалоговое окно «Многоуровневый список», щелкнув Дополнительно в левом нижнем углу.
Выберите уровень списка, который нужно изменить, щелкнув его в списке. По умолчанию выбрано значение 1.
Укажите, к чему вы хотите применить изменения, щелкнув ко всему списку, до конца документа или к текущему абзацу.
Чтобы использовать существующий стиль в Word для каждого уровня в списке, выберите стиль в разделе «Связать уровень со стилем».
Выберите номер для отображения в коллекции. По умолчанию отображается Уровень 1.
Присвойте многоуровневому списку имя в разделе «Имя списка поля ListNum». Оно будет отображаться для всех полей ListNum.
Чтобы добавить к нумерованному списку дефис, круглую скобку или другой символ, введите его в поле Формат номера.
Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:
Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
Чтобы изменить стиль, щелкните стрелку вниз рядом с полем Нумерация и выберите числа, буквы или другой формат последовательности. Укажите номер уровня, начиная с которого нужно это включать.
Выберите начальный номер для списка. Значение по умолчанию — 1. Чтобы заново начать нумерацию после определенного уровня, установите флажок Нумеровать заново и выберите уровень в списке.
Выберите Заменить римские цифры арабскими для использования этого стиля в многоуровневом списке.
Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе «Выравнивание».
Укажите, откуда нужно начать выравнивание, и задайте отступ.
Чтобы применить эти значения ко всему списку, выберите Параметры для всех уровней.
Укажите, что должно следовать после каждого номера: знак табуляции, пробел или ничего. Установите флажок Добавить позицию табуляции и введите значение.
Определение нового стиля списка
Выделите текст или нумерованный список, который вы хотите изменить.
На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список и выберите пункт Определение нового стиля списка.
Введите имя для нового стиля списка.
Выберите начальный номер для списка. Значение по умолчанию — 1.
Выберите уровень в списке, к которому нужно применить форматирование.
Укажите начертание, размер и цвет шрифта для стиля списка.
Щелкните стрелку вниз, чтобы изменить стиль нумерованного или маркированного списка.
Выберите символ для списка.
Выберите изображение для списка.
Сместите отступ влево или вправо.
Укажите, нужно ли применить эти изменения Только в этом документе или же В новых документах, использующих этот шаблон.
Чтобы настроить дополнительные параметры форматирования, щелкните Формат и выберите Шрифт, Нумерация, Текстовые эффекты или другие настройки.
Отключение автоматической нумерации списков
Следуйте инструкциям для используемой версии Word
Word 2016, Word 2013 или Word 2010
Выберите Файл, а затем в левой области выберите Параметры.
Нажмите кнопку Microsoft Office и выберите Параметры Word.
В диалоговом окне Параметры Word выберите Правописание.
В правой области в разделе Параметры автозамены нажмите кнопку Параметры автозамены.
Откройте вкладку Автоформат при вводе.
В разделе Применять при вводе снимите флажок стили маркированных списков и нажмите кнопку ОК.
Изучаем нумерованные и маркированные списки в HTML
Списки встречаются везде. Они используются для:
Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?
Что такое маркированный список (или ненумерованный список)
Маркированный список это первый вид списка, который мы рассмотрим.
Как создать маркированный список — ul что это за тег?
Атрибут type
Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя нумерованный список CSS позволяет задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и создавая нумерованный список HTML ):
Элементы списка — тегОтступ маркированного списка
Как создать нумерованный список — тег ol
Если вы хотите упорядочить элементы списка, тогда тег
- поможет в этом. По умолчанию он задает нумерованный список HTML :
что на выходе дает нам:
A. Элемент 1
B. Элемент 2
C. Элемент 3
Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.
Как сделать нумерованный список в HTML с определенного номера
Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.
Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 ( или буквы А ). Это бы внесло неразбериху в ваше руководство!
Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шесть
Нумерованный список HTML — обратный порядок
Если вы хотите вывести номера ( или буквы ) в обратном порядке, то это можно сделать, добавив в тег, создающий нумерованный список HTML ключевое слово reversed :
В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.
Многоуровневый маркированный список HTML
С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать маркированный многоуровневый список HTML. Это достигается за счет встраивания одного списка в другой:
• Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
• Элемент верхнего уровня
Вы можете использовать комбинацию тегов
- и
- . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.
1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровня
Используйте нумерованные списки HTML на своих страницах.
Нумерованные и маркированные списки в HTML- заключение
Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях!
Как и для чего используются маркированные и нумерованные списки
Создавая статьи, блоги, оформляя страницы на сайтах, нередко приходится писать тексты большого объёма. Любой автор стремится к тому, чтобы его текст выглядел привлекательно, был понятен, и читатель хотел дочитать до конца.
Чтобы более понятно преподнести информацию, придать тексту привлекательность, рекомендуем в оформлении использовать нумерованный или маркированный списки. Это полезно, когда в тексте большой абзац, в котором перечисляются данные, объекты или порядок действий. Информация, оформленная в виде перечней, становится понятной и легко воспринимаемой. Ниже объясним, как их создавать, оформлять, и какой правильнее применить в том или ином случае.
Чем отличаются маркированные списки от нумерованных
В зависимости от того, чем обозначаются элементы, списки делятся на нумерованные и маркированные. Визуально они отличаются друг от друга способами оформления. Главное же их отличие в том, что элементы нумерованного списка располагаются в определённом логическом порядке, а в маркированном пункты можно менять как угодно, без потери смысла.
Автор вправе сам решать, к какому варианту прибегнуть в том или ином случае.
Маркированные списки уместны:
Маркированные списки применяют там, где идёт простое перечисление и не важен порядок расположения элементов. К примеру, фразу: «Школа закупила спортивный инвентарь — скакалки, волейбольные мячи, гантели», будет лучше оформить в виде маркированного списка.
Например, так:
В каких случаях нумерованный список предпочтительнее маркированного? Нумерованные уместны там, где важен порядок расположения его элементов. Когда составляете описание задание, последовательность действий важна и ее лучше составить логическим перечнем.
Для получения вознаграждения за задание вам необходимо:
Текстовые редакторы предоставляют возможность организовывать в текстах разные виды списков. Так на SEOSPRINT при создании нового задания в панели «Описание задания» вставить список можно, кликнув на третью иконку с конца. После этого в развернувшемся подменю выбрать, какой именно хотите создать список, нумерованный или маркированный.
Почему списки лучше, чем просто написание с новой строки
Создание нумерованного и маркированного списка формирует в коде страницы специальные теги. Для поисковика эти теги помогают понять структуру документа и показывают, что материал систематизирован.
