Ненумерованный список: Нумерованный список | 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 и отправьте нам запрос на извлечение.

    Категории контента Потоковое содержимое, и если дочерние элементы
      включают в себя хотя бы один элемент
    • , ощутимое содержимое.
    Разрешенное содержание Ноль или более
  • ,