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

Содержание

Ненумерованные списки. Тег

И так, продолжаем работу со списками, в прошлом уроке мы рассмотрели Упорядочнные списки и применение атрибутов для них. В этом уроке мы продолжим изучать списки и поговорим о неупорядоченных списках (ненумерованные списки). Этот вид списка используется так же достаточно часто, как и упорядочные списки. Разница между этими списками в том, что вместо цифр указываются черные маркеры для каждого элемента списка. Существует три вида маркеров это круг, диск и квадрат.

Для создания ненумерованного списка используется тег <ul> и его пара — закрывающийся тег </ul>, а элементы внутри так же заключаются в теги <li>. Тег <ul> является сокращением с английского языка Unsorted List и в переводе означает неупорядоченный список.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
    
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 4-й элемент у списка

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

Для изменения вида маркера используется атрибут type для тега <ul>. Ниже показаны варианты изменения вида маркеров.

  • Элементы списка с маркером в виде круга type=»disc»
  • Элементы списка с маркером в виде окружности type=» circle»
  • Элементы списка с маркером в виде квадратов type=» square»

Нужно помнить, что вид маркеров может, манятся при смене шрифта или текста, а также может, отображается по-разному в разных браузерах. Ниже создадим пример всех вариантов ненумерованных списков, а результат и Вы сможете просмотреть, нажав на ссылочку

демо.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
    

Ненумерованный список по умолчанию без указания атрибута "Type"

  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 4-й элемент у списка

Указвываем атрибут type=»disc».

  1. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Указвываем атрибут type=»circle».

  1. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Указвываем атрибут type=»square».

  1. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Мы и рассмотрели еще один вид списков, который очень часто используется при верстке шаблонов сайта. На этот вид списка рекомендую уделить немного больше внимания, чем на остальные. Возможно, дочитав до конца этот урок, у Вас возник вопрос, а если мне нужен совсем другой маркер, например: какая-то «птичка». Это так же возможно реализовать. Для этого берется заранее подготовленная картинка в виде нужного маркера и уже с помощь

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


Ненумерованный список — Студопедия

Списки

Список (list)отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты.

В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists <UL>), нумерованный список (упорядоченный) (Ordered Lists <OL>) и список определений (<DL>).

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

Самым простым является маркированный (ненумерованный) список.

Ненумерованный список предназначен для создания текста типа:

§ первый элемент списка;

§ второй элемент списка;

§ третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

<LI>Последний элемент списка</LI>

</UL>

Теги <UL> и </UL> являются своеобразным обрамлением списка. Он позволяет отделить один список от другого. Тег <LI> (List Item) обозначает каждый из пунктов списка. Конечный тег </LI> не является обязательным.


Для тега <UL> предусмотрен атрибут type, определяющий вид маркера, который браузер помещает перед каждым элементом списка. Этот атрибут может отсутствовать или принимать одно из трех значений:

Начальный тег Вид метки на экране
<UL> Обычный диск (зависит от браузера)
<UL type=circle> Окружность
<UL type=disc> Диск
<UL type=square> Квадрат

Пример:

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

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

Нумерованный список задается при помощи команды <OL>:

<OL>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

<LI>Последний элемент списка</LI>

</OL>

Конечный тег </LI> не является обязательным.


Вид номера определяется значением атрибута type в теге <OL>:

Начальный тег Вид номера на экране
<OL> Нумерация выполняется арабскими цифрами (1, 2, 3 и т.д.)
<OL type=1> Нумерация выполняется арабскими цифрами (1, 2, 3 и т.д.)
<OL type=А> Нумерация выполняется прописными буквами (А, В, С и т.д.)
<OL type=а> Нумерация выполняется строчными буквами (a, b, c и т.д.)
<OL type=I> Нумерация выполняется большими римскими цифрами (I, II, III)
<OL type=i> Нумерация выполняется малыми римскими цифрами (i, ii, iii)

Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).

Пример:

Для элемента <LI> может быть использован атрибут value, который определяет номер для текущего пункта списка:

value=номер

Соответственно, следующий пункт списка будет иметь очередной номер и т.д. При помощи атрибута value, если использовать его для первого в списке элемента <LI>,можно добиться такого же эффекта, что и при помощи атрибутаstart, или нарушить последовательность номеров, если переопределить другие элементы списка.

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

Теги списка (Definition List: <DL>, <DT>, <DD>) используют для создания списка терминов и их определений. Схема использования тега следующая.

Задается тегом <DL> и имеет следующую структуру:

<DL> <DT>Пункт 1 <DD>Определение пункта 1 <DD>Другое определение пункта1 <DT>Пункт 2 <DD>Определение пункта 2 </DL>

Определяемый термин записывается на одной строке, а его определение — на следующей, с небольшим отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег </DL>. Помните, что тег <DL> сдвигает только левую границу абзаца.

Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение – произвольный текст под заголовком.

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

Вложенные списки

Еще один способ создания сложных списков – использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список.

Пример:

В примере нумерованные списки размещены внутри пунктов ненумерованного списка.

Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка?
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 7.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 1 или нечто подобное.

Рис. 1. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью стилевых свойств content и counter-increment. Вначале для селектора OL требуется задать counter-reset: item, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счетчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none.

Свойство content само по себе не используется, как правило, оно работает в сочетании с псевдоэлементами :after и :before. Так, конструкция li:before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 1).

Пример 1. Создание своей нумерации

li:before {
  content: counter(item) ') '; /* Добавляем к числам скобку */
  counter-increment: item; /* Задаём имя счетчика */
}

content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. Свойство counter-increment необходимо для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код приведен в примере 2.

Пример 2. Изменение вида списка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   ol {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset:  item; /* Обнуляем счетчик списка */
   }
   li:before {
    content: counter(item) ') '; /* Добавляем к числам скобку */
    counter-increment: item; /* Задаём имя счетчика */
   }
  </style>
  <!--[if lt IE 8]> 
  <style>
   ol {
    list-style-type: decimal;
   }
  </style
  <![endif]--> 
 </head>
 <body>
  <ol>
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ol>
 </body>
</html>

Браузер Internet Explorer до версии 8.0 не поддерживает свойство content. Чтобы не получилось явного различия при выводе списка в разных браузерах, специально для Internet Explorer в данном примере через условные комментарии добавлено свойство list-style-type со значением decimal. Эта запись выводит традиционную нумерацию строк.

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

content: ‘[‘ counter(item) ‘] ‘;

Как начать нумерацию заново или продолжить нумерацию в нумерованном списке

Как начать нумерацию заново с единицы

Если вы хотите, чтобы нумерация в каждом разделе двух списков, которые находятся рядом, начиналась с единицы, то правой кнопкой мыши кликните на первый номер в начале раздела и в контекстном меню выберите «Начать заново с 1».

В результате нумерация начнётся заново.

Но как вы можете видеть на скриншоте, сбилось форматирование первого пункта (изменился отступ). Чтобы это исправить кликните правой кнопкой мыши на втором пункте и выберите в контекстном меню «Формат по образцу».

Затем кликните левой кнопкой мыши по первому пункту и он получит точно такое же форматирование, как и последующие пункты.

Как в другом списке продолжить нумерацию

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

И в контекстном меню выберите «Продолжить нумерацию».

Как можно увидеть, опять изменился отступ.

Чтобы привести оба списка к одному отступу кликните правой кнопкой мыши на часть текста, которая будет использоваться за образец и выберите в контекстном меню «Формат по образцу». Затем наведите курсор на начала текста, чьё форматирования нужно исправить, зажмите левую кнопку и проведите по всему тексту, будто бы вы его выбираете.

В результате формат двух фрагментов текста станет идентичным.

Как начать нумерацию не с единицы

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

В этом контекстном меню кликните «Задать начальное значение».

Введите в «Начальное значение» нужное вам число и нажмите ОК.

В результате нумерация начнётся с нужного вам числа.

Связанные статьи:

Изменение нумерации в нумерованном списке

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

Значок подсказки

If you want numbered headings, use the Tools — Chapter Numbering menu command to assign a numbering to a paragraph style. Do not use the Numbering icon on the Formatting toolbar.


Удаление номера из абзаца в нумерованном списке

  1. Установите курсор перед первым символом абзаца, из которого требуется удалить номер.

  2. Выполните одно из следующих действий.

  • Для удаления номера с сохранением абзацного отступа нажмите клавишу BACKSPACE.

  • To remove the number and the indent of the paragraph, click the Numbering on/off icon on the Formatting Bar. If you save the document in HTML format, a separate numbered list is created for the numbered paragraphs that follow the current paragraph.

Изменение номера, с которого начинается список

  1. Щёлкните в любом месте нумерованного списка.

  2. Выберите команду Формат — Маркеры и нумерация и откройте вкладку Параметры.

  3. Введите номер, с которого должен начинаться список, в поле Начать с.

  4. Нажмите кнопку ОК.

Wiki page about numbering paragraphs by styles

Impressum (Legal Info) | Privacy Policy | Statutes (non-binding English translation) — Satzung (binding German version) | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the Mozilla Public License v2.0. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our trademark policy. LibreOffice was based on OpenOffice.org.

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

Microsoft Word 2016 имеет много нумерованных списков. Они могут принимать форму цифр или букв, которые следуют друг за другом, но они также могут быть предметом настройки. Узнайте, как создать индивидуальный список, который будет соответствовать вашим потребностям в структурировании контента.

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

Шаг 1. Выделите текст который хотите промаркировать если текста еще нет просто поставьте курсор в, то место где хотите видеть список;

Шаг 2. Перейдите на вкладку «Главная» ленты word и в группе «Абзац» найдите маркеры, кликните радом с ними на стрелочку и выберите нужный вид маркера;

Списки в ворде

Шаг 3. Возле появившегося маркера введите нужный текст, для создания следующего маркера просто нажмите Enter.

Шаг 4. Если вы хотите уменьшить или увеличить отступ между маркером и текстом, просто поставьте курсор в ваш маркированный список и сверху на линейке переместите ползунки как вам необходимо. Если линейки сверху нет, то перейдите на вкладку «Вид» и поставьте галочку напротив «Линейка»

Списки в ворде

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

Шаг 1. Выделите текст который хотите пронумеровать, если текста еще нет просто поставьте курсор в, то место где хотите видеть список;

Шаг 2. Перейдите на вкладку «Главная» ленты word и в группе «Абзац» найдите нумерация, кликните радом с ними на стрелочку и выберите нужный тип нумерации;

Списки в ворде

Шаг 3. Возле появившегося цифры введите текст, для создания следующего нумерованной строки просто нажмите Enter.

Многоуровневый список в word

Многоуровневый список в ворде может состоять из цифр, алфавитов и маркеров, расположенных на разных уровнях. Вы можете использовать многоуровневые списки, чтобы разбить список на его иерархии или подпункты. Word 2016 предоставляет нам специальную кнопку на ленте для создания многоуровневого списка.

Шаг 1. Установите курсор в документ где хотите видеть многоуровневый список, перейдите в ленту на вкладку «Главная» и выберете там «Многоуровневый список»;

Списки в ворде

Шаг 2. Заполните первую строчку, перейдите на следующую использую Enter появится вторая промаркированная строчка чтобы сделать ее многоуровневой нажмите клавишу «TAB» таким способом можно создать столько уровней сколько вам необходимо.

Шаг 3. Нажмите «Shift + Tab», чтобы отменить и перейти на элемент более высокого уровня.

Списки в ворде

Примечание: вы также можете написать весь список заранее. Выделите его, а затем нажмите кнопку Многоуровневый список. Для выравнивания используйте клавиши Tab и Shift + Tab, чтобы упорядочивать список. 

Продолжить нумерацию списка в ворде

Если вы хотите продолжить нумерацию списка word с того места, где вы остановились в предыдущем списке просто добавить новый список и кликните правой кнопки мыши по этому списку далее в контекстном меню выберите «Продолжить нумерацию»

Списки в ворде

Изменение нумерации в нумерованном списке

Изменение последовательности нумерации в списке может привести к беспроблемной работе, но использовать указанные ниже действия, и вы не сможете позднее.

  1. Дважды щелкните номера в списке. Текст не будет выбран.

    Выделенные номера

  2. Щелкните правой кнопкой мыши номер, который вы хотите изменить.

  3. Нажмите кнопку Set value (нумерация).

    Команда

  4. В поле задать значение для: используйте стрелки, чтобы изменить значение на нужное число.

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

Начните с 1.

Если вы хотите изменить число в списке на 1, выполните указанные ниже действия.

  1. Дважды щелкните номера в списке. Текст не выводится на выборку.

    Выделенные номера

  2. Щелкните правой кнопкой мыши номер, с которого вы хотите начать новый список.

  3. Нажмите кнопку перезапустить на 1.

Дополнительные сведения о списках

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

К началу страницы

: Элемент неупорядоченного списка — веб-технология для разработчиков

Элемент HTML

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

    Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

    Категории контента Потоковое содержимое, и если дочерние элементы
      включают в себя хотя бы один элемент
    • , ощутимое содержимое.
    Разрешенное содержание Ноль или более
  • , неупорядоченных списков Разрешенный контекст: % Body.Content,% flow,% block
    Модель содержимого: Необязательный заголовок списка (LH), за которым следует один или несколько элементов списка (LI)

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

    Тег списка открытия должен быть

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

       
        Столовые фрукты
      • яблоки
      • апельсины
      • бананы

      , который может быть представлен как:

      Стол Фруктовый

      Примечание: Некоторые устаревшие документы могут содержать заголовки или простой текст перед первым элементом LI. Разработчики пользовательских агентов HTML 3.0 Рекомендуется обслуживать эту возможность, чтобы справиться с плохо сформированным устаревшие документы.

      Элементы МЕНЮ и DIR

      Эти элементы заменены расширениями элемента UL.пользователь агентам рекомендуется продолжать поддерживать их ради наследия документы. И MENU, и DIR состоят из одного или нескольких элементов LI, аналогичных в UL. Списки МЕНЮ обычно отображаются без маркеров в более компактный стиль, чем UL. Вы можете получить тот же эффект с

        . Списки DIR используются для представления списков элементов, содержащих до 20 персонажи каждый. Элементы в списке DIR расположены в столбцах. Ты можешь получить тот же эффект с
          .

          разрешенных атрибутов для элемента UL

          ID
          Идентификатор SGML, используемый в качестве цели для гипертекста ссылки или для именования определенных элементов в связанных таблицах стилей.Идентификаторы являются токенами NAME и должны быть уникальными в рамках текущий документ
          LANG
          Это одно из сокращений языка стандарта ISO, например «en.uk» для варианта английского языка, на котором говорят в Великобритании. Он может быть использован парсерами для выбора языка для кавычки, лигатуры и правила гипенации и т. д. Язык атрибут составлен из двухбуквенного кода языка из ISO 639, по желанию следует точка и двухбуквенный код страны от ИСО 3166.
          КЛАСС
          Этот список токенов SGML NAME разделен пробелами и является используется для подкласса имен тегов. По соглашению имена классов интерпретируется иерархически, с наиболее общим классом слева и наиболее конкретный справа, где классы разделены период. Атрибут CLASS чаще всего используется для прикрепления другой стиль для некоторого элемента, но рекомендуется, чтобы где практические имена классов должны быть выбраны на основе элемента семантика, так как это разрешит другое использование, такое как ограничение поиска через документы, сопоставляя имена классов элементов.Конвенции для выбора имен классов выходят за рамки данной спецификации.
          CLEAR
          Этот атрибут является общим для всех блочных элементов. когда текст обтекает фигуру или таблицу на полях, иногда вы хотите чтобы начать элемент как заголовок, абзац или список под рисунком а не рядом с ним. Атрибут CLEAR позволяет вам двигаться вниз безусловно:
          очистить = влево
          двигаться вниз до тех пор, пока не освободится левое поле
          очистить = вправо
          двигаться вниз, пока не освободится правое поле
          очистить = все
          двигаться вниз, пока не исчезнут оба поля

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

          clear = "40 en"
          двигаться вниз, пока не освободится как минимум 40 единиц
          clear = "100 пикселей"
          двигаться вниз, пока не будет хотя бы 100 пикселей свободно

          Таблица стилей (или настройки браузера по умолчанию) может предоставлять минимум по умолчанию ширина для каждого класса блочных элементов.

          PLAIN
          Наличие этого атрибута подавляет отображение пули, например
            .
          SRC
          Указывает изображение для использования в качестве маркера. Изображение указан как URI. Этот атрибут может появиться вместе с MD атрибут.
          MD
          Указывает дайджест сообщения или криптографическую контрольную сумму для связанный графический объект, указанный атрибутом SRC. Он используется, когда вы хочу быть уверен, что связанный объект действительно тот же, что автор задумал, и не был изменен в любом случае. Например, MD = "md5: jV2OfH + nnXHU8bnkPAad / mSQlTDZ", который указывает контрольную сумму MD5 закодирован как строка символов base64.Атрибут MD обычно разрешено для всех элементов, которые поддерживают ссылки на основе URI.
          DINGBAT
          Указывает иконическое изображение для использования в качестве маркера. Значок указывается как имя объекта. Список стандартных значков Имена сущностей для HTML 3.0 приведены в приложении к спецификация, например папка - это имя объекта для иконки обозначает каталог или папку.
          WRAP
          Атрибут WRAP используется для многоколоночных списков. Используйте wrap = vert, если вы хотите расположить элементы списка по страница перед переносом на следующий столбец.Используйте Wrap = Horiz, если вы хочу расположить элементы по всей странице (менее полезно). Пользовательский агент отвечает за определение количества подходящих столбцов.
          COMPACT
          Наличие этого атрибута указывает на пользовательский агент следует использовать уменьшенный интервал между интервалами. На практике существует несколько способов повысить компактность списков: уменьшено расстояние между вертикальными интервалами, меньший размер шрифта, или даже чтобы избежать разрывов строк между элементами. Это лучше всего обрабатывать через связанные таблицы стилей и атрибут класса.
          ,
          HTML упорядоченный и неупорядоченный список. Маркерные типы списков

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

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

          Упорядоченный список

          Упорядоченный список - это набор элементов (элементов списка), которые имеют определенную последовательность.Каждый элемент в упорядоченном списке имеет уникальный маркер, указывающий порядок элемента относительно других элементов в списке. По умолчанию числа являются маркерами упорядоченных элементов списка. Первый элемент - это номер 1, второй - под номером 2 и т. Д.

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

          Для создания упорядоченных списков в HTML используйте тег

            (упорядоченный список), внутри которого находятся его элементы с данными, за которые отвечает специальный тег
          1. :

            
              <Голова>
                
                 Заголовок страницы </ title>
              </ HEAD>
              <Тело>
            
                <h5> Упорядоченный список: </ h5>
                <Ол>
                  <Li> Кофе </ li>
                  <Li> Чай </ li>
                  <Li> Молоко </ li>
                </ Ол>
            
              </ Body>
            </ Html>
             </pre>
            Попытайся "
            
            <p> Примечание: тег <code> <ol> </code> может содержать только <code> тегов <li> </code> в качестве дочерних элементов, то есть все содержимое упорядоченного списка должно быть помещено внутри элементов <code> <li> </code>.В свою очередь, тег <code> <li> </code> не имеет ограничений по содержанию, поэтому вы можете размещать в нем абзацы, рисунки, ссылки, таблицы, другие списки и т. Д. </p>
            
            <h3><span class="ez-toc-section" id="i-31"> Неупорядоченный список </span></h3>
            
            <p> Неупорядоченный список не нумерован, то есть неупорядоченные списки элементов, чья последовательность не имеет значения. Все элементы имеют одинаковые маркеры, и по умолчанию они отображаются в виде маленьких черных кружков. </p>
            
            <p> Для создания неупорядоченных списков в HTML используется тег <code> <ul> </code> (неупорядоченный список), в котором расположены элементы списка (как в случае упорядоченных списков, используется тег <code> <li> </code>) : </p>
            
             <pre>
            <! DOCTYPE html>
            <HTML>
              <Голова>
                <meta charset = "utf-8">
                <title> Заголовок страницы </ title>
              </ HEAD>
              <Тело>
            
                <h5> Неупорядоченный список: </ h5>
                <UL>
                  <Li> Кофе </ li>
                  <Li> Чай </ li>
                  <Li> Молоко </ li>
                </ UL>
            
              </ Body>
            </ Html>
             </pre>
            
            Попытайся "
            
            <h3><span class="ez-toc-section" id="i-32"> Маркерные типы списков </span></h3>
            
            <p> Типы маркеров нумерованного списка можно изменить с помощью атрибута <code> type </code>.Этот атрибут поддерживает пять типов маркеров: </p>
            
            <table>
            <tr> <th> Стоимость </th> <th> Описание </th> </tr>
            <tr> <td> 1 </td> <td> Десятичные числа (1, 2, 3 ..) </td> </tr>
            <tr> <td> a </td> <td> Список в алфавитном порядке, строчные буквы (a, b, c ..) </td> </tr>
            <tr> <td> A </td> <td> Список в алфавитном порядке, заглавные буквы (A, B, C ..) </td> </tr>
            <tr> <td> i </td> <td> Римские цифры, строчные (i, ii, iii, iv..) </td> </tr>
            <tr> <td> I </td> <td> Римские цифры, заглавные (I, II, III, IV ..) </td> </tr>
            </table>
            
            <p> Неупорядоченные списки не имеют атрибута <code> type </code>, поэтому инструменты HTML не смогут изменить тип маркера из неупорядоченного списка. Чтобы изменить тип маркера, в этом случае вы можете использовать CSS-свойство <code> list-style-type </code>, с помощью которого, помимо значения по умолчанию, вы можете выбрать еще два типа маркера: <code>, круг </code> или <code>. площадь </code>.</p>
            
            <p> Замена пуль в списках: </p>
            
             <pre>
            <! DOCTYPE html>
            <HTML>
              <Голова>
                <meta charset = "utf-8">
                <title> Заголовок страницы </ title>
              </ HEAD>
              <Тело>
            
                <h5> Упорядоченный список с атрибутом type = "a": </ h5>
                <ol type = "a">
                  <Li> Яблоки </ li> <li> Бананы </ li> <li> Лимоны </ li>
                </ Ол>
            
                <h5> Упорядоченный список с атрибутом type = "I" </ h5>
                <ol type = "I">
                  <Li> Яблоки </ li> <li> Бананы </ li> <li> Лимоны </ li>
                </ Ол>
            
            <h5> Типы маркеров неупорядоченных списков: </ h5>
            
                <UL>
                  <Li> Яблоки </ li> <li> Бананы </ li> <li> Лимоны </ li>
                </ UL>
            
            <UL>
                  <Li> Яблоки </ li> <li> Бананы </ li> <li> Лимоны </ li>
                </ UL>
            
              </ Body>
            </ Html>
             </pre>
            
            Попытайся "
            
            <h3><span class="ez-toc-section" id="i-33"> Горизонтальный список </span></h3>
            
            <p> Если вы используете список HTML для создания горизонтального меню, вам нужно расположить элементы списка один за другим в одной строке.С HTML вы не можете этого сделать, поэтому вам нужно будет использовать CSS. </p>
            
            <p> Чтобы создать горизонтальный список, необходимо написать свойство отображения CSS <code> CSS со значением <code> inline </code> или <code> inline-block </code> для элементов списка, в зависимости от того, какие другие свойства вы собираетесь использовать. </p>
            
             <pre>
            <! DOCTYPE html>
            <HTML>
              <Голова>
                <meta charset = "utf-8">
                <title> Заголовок страницы </ title>
            <style> li {display: inline; } </ Стиль>
              </ HEAD>
              <Тело>
            
                <h5> Упорядоченный список: </ h5>
                <Ол>
                  <Li> Яблоки </ li> <li> Бананы </ li> <li> Лимоны </ li>
                </ Ол>
            
            <h5> Неупорядоченный список: </ h5>
            
                <UL>
                  <Li> Яблоки </ li> <li> Бананы </ li> <li> Лимоны </ li>
                </ UL>
            
              </ Body>
            </ Html>
             </pre>
            Попытайся "
            
            <p> После этого все элементы в списке будут выстроены в одну строку.Обратите внимание, что элементы списка потеряют маркеры, и между ними даже не будет пробела, но левый край списка останется. </p>
            
            <p> Как горизонтальный список превращается в горизонтальное меню, вы можете увидеть здесь. </p>
            
            
            
            
            ,<h2><span class="ez-toc-section" id="HTML_ul_tag"> HTML ul tag </span></h2><div class="advv">
            <ins class="adsbygoogle"
                 style="display:inline-block;width:336px;height:280px"
                 data-ad-client="ca-pub-1812626643144578"
                 data-ad-slot="9935184599"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
            </div>
                  
            
            
            
             <br/>
            
            
             <h4><span class="ez-toc-section" id="i-34"> Пример </span></h4>
             <p> Ненумерованный список HTML: </p>
             <p>
                <ul> <br/>
                  
                  <li> Кофе </ li> <br/>
                  
                  <li> Чай </ li> <br/>
                  
                  <li> Молоко </ li> <br/>
                  </ UL>
             </p>
            Попробуй сам "
            
             <p> Ниже приведены примеры "Попробуйте сами". </p>
             <hr/>
            
             <h3><span class="ez-toc-section" id="i-35"> Определение и использование </span></h3>
             <p> Тег <code> <ul> </code> определяет неупорядоченный (маркированный) список.</p>
             <p> Используйте тег <code> <ul> </code> вместе с тегом <li> для
            создавать неупорядоченные списки. </p>
             <p> <b> Подсказка: </b> Используйте CSS для стилизации списков. </p>
            
             <p> <b> Подсказка: </b> Для упорядоченных списков используйте <ol>
            тег. </p>
             <hr/>
            
             <h3><span class="ez-toc-section" id="i-36"> Поддержка браузера </span></h3>
             <table>
               <tr>
                 <th> Элемент </th>
                 <th title="Chrome"/>
                 <th title="Internet Explorer / Edge"/>
                 <th title="Firefox"/>
                 <th title="Safari"/>
                 <th title="Opera"/>
               </tr> <tr>
                 <td> <ul> </td>
                 <td> да </td>
                 <td> да </td>
                 <td> да </td>
                 <td> да </td>
                 <td> да </td>
               </tr>
               </table>
             <hr/>
            
             <h3><span class="ez-toc-section" id="i-37"> Глобальные атрибуты </span></h3>
             <p> Тег <code> <ul> </code> также поддерживает глобальные атрибуты в HTML.</p>
             <hr/>
             <h3><span class="ez-toc-section" id="i-38"> Атрибуты события </span></h3>
             <p> Тег <code> <ul> </code> также поддерживает атрибуты событий в HTML. </p>
             <hr/>
            
             <hr/>
            
             <h3><span class="ez-toc-section" id="i-39"> Дополнительные примеры </span></h3>
            
             <h4><span class="ez-toc-section" id="i-40"> Пример </span></h4>
             <p> Установите разные типы стилей списка (с помощью CSS): </p>
            
                 <br/> Кофе <br/>
                Чай <br/> Молоко <p> <ul> <br/>
                <li> Кофе </ li> <br/> <li> Чай </ li> <br/> <li> Молоко </ li> <br/> </ ul> </p> <p> <ul> <br/>
                <li> Кофе </ li> <br/> <li> Чай </ li> <br/> <li> Молоко </ li> <br/> </ ul> </p>
            Попробуй сам "
            
            
            
             <h4><span class="ez-toc-section" id="i-41"> Пример </span></h4>
             <p> Расширение и уменьшение высоты строки в списках (с помощью CSS): </p>
            
                 <br/> Кофе <br/>
                Чай <br/> Молоко <p> <ул
               > <br/> <li> Кофе </ li> <br/> <li> Чай </ li> <br/>
                <li> Молоко </ li> <br/> </ ul> </p>
            Попробуй сам "
            
            
            
             <h4><span class="ez-toc-section" id="i-42"> Пример </span></h4>
             <p> Создать список внутри списка (вложенный список): </p>
             <p>
                <ul> <br/> <li> Кофе </ li> <br/> <li> Чай <br/> <ul> <br/>
                <li> Черный чай </ li> <br/> <li> Зеленый чай </ li> <br/>
                </ ul> <br/> </ li> <br/> <li> Молоко </ li> <br/> </ ul> </p>
            Попробуй сам "
            
            
            
             <h4><span class="ez-toc-section" id="i-43"> Пример </span></h4>
             <p> Создать более сложный вложенный список: </p>
             <p>
                <ul> <br/> <li> Кофе </ li> <br/> <li> Чай <br/> <ul> <br/>
                <li> Черный чай </ li> <br/> <li> Зеленый чай <br/>
                <ul> <br/>
                <li> Китай </ li> <br/>
                <li> Африка </ li> <br/> </ ul> <br/>
                </ li> <br/> </ ul> <br/> </ li> <br/> <li> Молоко </ li> <br/>
                </ ul> </p>
            Попробуй сам "
            
             <hr/>
            
             <h3><span class="ez-toc-section" id="i-44"> Связанные страницы </span></h3>
             <p> Учебник по HTML: Списки HTML </p>
             <p> HTML DOM ссылка: Ul Object </p>
             <p> Учебник CSS: списки стилей </p>
            
             <hr/>
             <h3><span class="ez-toc-section" id="_CSS"> Настройки CSS по умолчанию </span></h3>
             <p> Большинство браузеров отображают элемент <code> <ul> </code> со следующими значениями по умолчанию: </p>
            
             <h4><span class="ez-toc-section" id="i-45"> Пример </span></h4>
             <p>
                ul {<br/> display: block; <br/> list-style-type: disc; <br/> margin-top: 1em; <br/>
                нижнее поле: 1 эм; <br/> поле слева: 0; <br/> margin-right: 0; <br/> отступ слева: 40 пикселей; <br/>} </p>
            Попробуй сам "
            
            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ,<div class='yarpp-related yarpp-related-none'>
            <p>No related posts.</p>
            </div>
            	</div><!-- .entry-content -->
            
            	<footer class="entry-footer">
            		<span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span>	</footer><!-- .entry-footer -->
            	</div>
            </article><!-- #post-6483 -->
            
            	<nav class="navigation post-navigation" role="navigation" aria-label="Записи">
            		<h2 class="screen-reader-text">Навигация по записям</h2>
            		<div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/kakaya-rabota-na-domu-realnaya-udalennaya-rabota-na-domu-bez-obmana-sushhestvuet-li-realnaya-rabota-na-domu-otzyvy-lyudej.html" rel="prev">Какая работа на дому реальная: Удаленная работа на дому без обмана. Существует ли реальная работа на дому? Отзывы людей</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/chto-znachit-kovorking-kovorking-chto-eto-takoe-prostymi-slovami-uslugi-kovorking-centrov-plyusy-i-minusy-ceny-kovorking-kak-biznes-kultura-top-10-ofisnyx-ploshhadok-moskvy.html" rel="next">Что значит коворкинг: Коворкинг – что это такое простыми словами? Услуги коворкинг центров, плюсы и минусы, цены – Коворкинг как бизнес-культура: топ-10 офисных площадок Москвы | ForbesLife</a></div></div>
            	</nav>
            <div id="comments" class="comments-area">
            
            		<div id="respond" class="comment-respond">
            		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/nenumerovannyj-spisok-numerovannyj-spisok-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p>
            <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p>
            <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
            <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6483' id='comment_post_ID' />
            <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
            </p></form>	</div><!-- #respond -->
            	
            </div><!-- #comments -->
            
            		</main><!-- #main -->
            	</div><!-- #primary -->
            
                    </div>
                </section>
               <footer class="wrapper wrap-footer">
             
                     <section class="wrapper footer-widget">
                        <div class="container">
                            <div class="row">                    
                                                    
                            </div>
                        </div>
                    </section>
               
                <!-- footer site info -->
            <section id="colophon" class="wrapper site-footer" >
                <div class="container">
                    <div class="row">
                        <div class="xs-12 col-sm-6 col-md-6">
                            <div class="site-info">
                            <p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong>
                     Использование материалов сайта разрешено и
                     <br>всячески приветствуется при одном условии:<br>
                     <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс!
                     </p>
                              </div><!-- .site-info -->
                            </div>
                            <div class="xs-12 col-sm-6 col-md-6">
                                <div class="footer-menu">
                                    <nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu">
                                        <div class="menu-footer-menu-container"> 
                                                                        
                                        </div> 
                                    </nav><!-- #site-navigation --> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section><!-- #colophon -->    
               
               </footer><!-- #colophon -->
            <!-- *****************************************
            Footer section ends
            ****************************************** -->
            <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a>
            </div><!-- #page -->
            <div style="display:none">
            </div>
            		<style type="text/css">
            							.pgntn-page-pagination {
            					text-align: left !important;
            				}
            				.pgntn-page-pagination-block {
            					width: 60% !important;
            					padding: 0 0 0 0;
            									}
            				.pgntn-page-pagination a {
            					color: #1e14ca !important;
            					background-color: #ffffff !important;
            					text-decoration: none !important;
            					border: 1px solid #cccccc !important;
            									}
            				.pgntn-page-pagination a:hover {
            					color: #000 !important;
            				}
            				.pgntn-page-pagination-intro,
            				.pgntn-page-pagination .current {
            					background-color: #efefef !important;
            					color: #000 !important;
            					border: 1px solid #cccccc !important;
            									}
            			.archive #nav-above,
            					.archive #nav-below,
            					.search #nav-above,
            					.search #nav-below,
            					.blog #nav-below,
            					.blog #nav-above,
            					.navigation.paging-navigation,
            					.navigation.pagination,
            					.pagination.paging-pagination,
            					.pagination.pagination,
            					.pagination.loop-pagination,
            					.bicubic-nav-link,
            					#page-nav,
            					.camp-paging,
            					#reposter_nav-pages,
            					.unity-post-pagination,
            					.wordpost_content .nav_post_link,.page-link,
            					.page-links,#comments .navigation,
            					#comment-nav-above,
            					#comment-nav-below,
            					#nav-single,
            					.navigation.comment-navigation,
            					comment-pagination {
            						display: none !important;
            					}
            					.single-gallery .pagination.gllrpr_pagination {
            						display: block !important;
            					}		</style>
            	<link rel='stylesheet' id='yarppRelatedCss-css'  href='https://forjobathome.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.8' type='text/css' media='all' />
            <link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://forjobathome.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.8' type='text/css' media='all' />
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/modernizr.js?ver=2.8.3' id='greenturtle-mag-jquery-modernizr-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.easing.js?ver=0.3.6' id='greenturtle-mag-jquery-easing-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.waypoints.js?ver=4.0.0' id='greenturtle-mag-jquery-waypoints-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.cycle.js?ver=2.1.6' id='greenturtle-mag-jquery-cycle-script-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/greenturtle-mag-custom.js?ver=5.8' id='greenturtle-mag-custom-js-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/navigation.js?ver=20151215' id='greenturtle-mag-navigation-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/skip-link-focus-fix.js?ver=20151215' id='greenturtle-mag-skip-link-focus-fix-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/comment-reply.min.js?ver=5.8' id='comment-reply-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/wp-embed.min.js?ver=5.8' id='wp-embed-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
            <script type='text/javascript' id='ez-toc-js-js-extra'>
            /* <![CDATA[ */
            var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
            /* ]]> */
            </script>
            <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
            </body>
            </html>