Как сделать пронумерованный список в html

HTML :: Cписки

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

формируется парным тегом <ol> (от англ. ordered list – упорядоченный список). Сам элемент «ol» используется, как контейнер для пунктов списка, которые формируются парными тегами <li> (от англ. list item – пункт списка) и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start , который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed , который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE .

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type , который может принимать значения «A | a | I | i | 1» , которые, соответственно, означают:

• заглавные латинские буквы,
• строчные латинские буквы,
• заглавные римские цифры,
• строчные римские цифры,
• арабские цифры.

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS , использование атрибута type , по мнению автора, не целесообразно, хотя и допускается в HTML 5 .

Использование нумерованного списка показано в примере №1 .

Пример №1. Использование элемента «ol»

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

Маркированные html-списки

формируется парным тегом <ul> (от англ. unordered list – неупорядоченный список). Сам элемент «ul» используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными списками, парными тегами <li> и располагаются друг за другом.

Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS . Что касается атрибута type , то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

Код, содержащий элемент «ul» , показан в примере №2 .

Пример №2. Использование элемента «ul»

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

формируется парным тегом <dl> (от англ. definition list – ). Сам элемент «dl» используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов «dt» (от англ. definition term – определяемый термин) и «dd» (от англ. definition description – подробное описание), сформированных, соответственно, парными тегами <dt> и <dd>. Первый из них содержит определяемый термин, а второй – определение термина.

Давайте для наглядности посмотрим пример №3 .

Пример №3. Использование элемента «dl»

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

Иногда возникает необходимость создания , которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере №4 .

Пример №4. Использование вложенных списков

Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом <li> и закрывающим тегом </li> для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом <dd> и закрывающим тегом </dd> . Это может понадобиться, например, если нужно дать термину несколько определений.

<ol>: The Ordered List element

HTML-элемент <ol> используется для упорядоченного списка — в частности для пронумерованного списка.

Интерактивный пример

Категории контента (en-US)	Основной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент <li> , явный контент.
Допустимое содержимое	Ноль или больше <li> элементов, которые, в свою очередь, содержат вложенные элементы <ol> или <ul> .
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любой элемент, который принимает основной поток.
Допустимые ARIA-роли	directory (en-US) , group (en-US) , listbox (en-US) , menu (en-US) , menubar (en-US) , radiogroup (en-US) , tablist (en-US) , toolbar (en-US) , tree (en-US) , presentation (en-US)
DOM-интерфейс	HTMLOListElement (en-US)

Свойства

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

Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация type в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», используйте start=»4″ .

Задаёт тип нумерации:

• a для строчных букв
• A для заглавных букв
• i для строчной Римской нумерации
• I для заглавной Римской нумерации
• 1 для цифр (по умолчанию)указанный тип используется для всего списка, если только не указан любой другой атрибут type в элементе <li> .

Примечание: Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS list-style-type (en-US).

Примечания об использовании

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

Элементы <ol> и <ul> могут быть вложены (nested) на любом уровне, чередуясь между элементами <ol> и <ul> .

Оба элемента <ol> и <ul> используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение, как в данных примерах:

• Инструкции рецепта
• Направление по заданному маршруту
• Список ингредиентов на информации о питании, в убывающих пропорциях.

Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <ol> — в противном случае <ul> .

Как создать нумерованные и маркированные списки в HTML – Урок 4 (Для начинающих)

Продолжим изучать основы html. В этом уроке мы разберем, как создать нумерованные и маркированные списки.
Отличие между нумерованными и маркированными списками незначительное. В нумерованном списке каждому пункту присваивается номер, а в маркированном — в каждом пункте выводятся символы-буллеты (bullets), например, закрашенный черный кружок, окружность и квадратик.

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

Для того, чтобы создать маркированный список, следует применить теги:
<ul> <li>……</li> </ul> .

<ul> — начало списка

<li> — начало отдельного элемента списка

</li> — конец отдельного элемента списка

</ul> — конец списка

Результат :

Атрибут TYPE для маркированных списков

Если к тегу <ul> добавить атрибут TYPE, можно изменить стиль маркирования:

ENGINE= «disc» – черный кружочек
type= «circle» – белый кружочек
type= «square» – черный квадратик

Обратите внимание на пункт 9, вы там заметите, как к тегу <ul> был добавлен атрибут type= «square» – закрашенный квадратик в черный цвет.

Пронумерованный список HTML страницы.

Для того, чтобы создать нумерованный список следует применить теги:
<ol> <li>……</li> </ol> .

<ol> — начало списка

<li> — начало отдельного элемента списка

</li> — конец отдельного элемента списка

</ol> — конец списка

По умолчанию нумерованный список нумеруется по порядку 1,2,3.

Атрибут TYPE и START для нумерованных списков .

Если к тегу <ol> добавить атрибут TYPE, можно добавить стиль нумерации пунктов списка

«A» – заглавные буквы A, B, C .
«a» – строчные буквы a, b, c .
«I» – большие римские числа I, II, III .
«i» – маленькие римские числа i, ii, iii .
«1» – арабские числа 1, 2, 3 .

Если к тегу <ol> добавить атрибут START, можно задать любое число, с которого будет идти нумерация.

Списки в HTML (XHTML)

Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML.

Код и видимая часть списков HTML

Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.

Виды списков в HTML

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

Теги списков в HTML

Для создания кода списков в HTML используются теги:
<ul>, <ol> и <li>, а также <dl>, <dt> и <dd>
Все теги парные – закрывающий тег обязателен.
Теги списков в HTML создают и обозначают:

• <ul> – маркированный список
• <ol> – нумерованный список
• <li> – элементы (строки) маркированного и нумерованного списков
• <dl> – список определений
• <dt> – элемент-термин в списке определений
• <dd> – элемент-описание в списке определений

Как создать список в html

Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).

Существует множество визуальных html-редакторов, облегчающих работу по созданию разнообразных списков. В этой статье, речь – непосредственно про коды списка на веб-странице. Выбор способа создания кода, в Notepad-е (блокноте) или в хитрющем html-редакторе – личное дело юзера. Практически все текстовые html-редакторы слишком упрощённо подходят к созданию html-списков.

Маркированный html-список | Теги <ul> и <li>

Код маркированного списка начинается с открывающего тега <ul>. Потом идут элементы, обрамлённые парными тегами <li></li>. Код маркированного списка заканчивается закрывающим тегом </ul>. Пример кода маркированного списка:

• Раз элемент
• Два элемент
• Три элемент

Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – <ul> (Unordered List). Написание тега <ul> заглавными литерами – <UL>. В спецификации HTML нет верхнего регистра. Правильно писать – <ul>

Нумерованный html-список | Теги <ol> и <li>

Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги <ul> заменяются на <ol> (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег <ol>. Внутри находятся элементы, обрамлённые парными тегами, вида <li>элемент</li>. Закрывается код нумерованного списка тегом </ol>. Пример кода нумерованного списка:

1. Первый элемент
2. Второй элемент
3. Третий элемент

Многоуровневые (вложенные списки)

Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами <li></li>. Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):

1. Первый элемент основного списка
   1. Раз (вложенный список)
   2. Два (вложенный список)
   3. Три (вложенный список)
      • 1 (второй вложенный)
      • 2 (второй вложенный)
      • 3 (второй вложенный)

   Список определений | Теги <dl>, <dt> и <dd>

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

   Код списка определений начинается открывающим тегом <dl> (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом <dt></dt>. Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом <dd></dd>. Код списка определений заканчивается закрывающим тегом </dl>. Пример кода списка определений:

   В браузере список определений выглядит красиво:
   HTML HTML – язык гипертекстовой разметки веб-страницы CSS CSS – каскадные таблицы стилей javascript javascript – язык сценариев веб-страницы

   Для усиления визуального эффекта использован CSS,
   который к данному коду не имеет никакого отношения.

   Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.

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

   Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;

   Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: hidden;, которое обрезает выступающую за пределы списка маркировку (нумерацию, или что там у него есть). Прим. Обрезание маркеров (overflow: hidden;) работает только за пределами списка – свойство list-style-position: outside; Это свойство устанавливается дефолтными настройками по-умолчанию для всех видов браузеров и, если специально нигде не указано другое ( list-style-position:inside; ) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (<ul> или <ol>, не важно):

   Похожие публикации:

   1. Ajax как подключить к html
   2. Html как добавить пробел в строку
   3. Id в html для чего нужен
   4. Trojan win32 wacatac html что это