Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML Коды языков

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

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

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

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

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

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

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

<html>
  <body>

    <h4>Нумерованный список:</h4>
    <ol>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ol>

  </body>
</html>
Попробовать »

Примечание: тег <ol> в качестве дочерних элементов может содержать только теги <li>, то есть всё содержимое нумерованного списка должно размещаться внутри элементов <li>. Тег <li>, в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

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

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

Для создания маркированных списков в HTML применяется тег <ul>, внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег <li>, который содержит в себе всё отображаемое содержимое списка):

<html>
  <body>

    <h4>Маркированный список:</h4>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>

  </body>
</html>
Попробовать »

Виды маркеров

Виды маркеров нумерованного списка можно изменить с помощью атрибута type. Данный атрибут поддерживает пять видов маркеров:

ЗначениеОписание
1Десятичные числа (1, 2, 3..)
aСписок в алфавитном порядке, строчные буквы (a, b, c..)
AСписок в алфавитном порядке, заглавные буквы (A, B, C..)
iРимские цифры, строчные (i, ii, iii, iv..)
IРимские цифры, заглавные (I, II, III, IV..)

Маркированные списки не имеют атрибута type, поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>	
  <body>

    <h4>Нумерованный список c атрибутом type="a":</h4>
    <ol type="a">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>

    <h4>Нумерованный список c атрибутом type="I":</h4>
    <ol type="I">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
	
	<h4>Виды маркеров маркированных списков:</h4>
	
    <ul style="list-style-type: circle;">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>
	
	<ul style="list-style-type: square;">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>

  </body>
</html>
Попробовать »

CSS свойство list-style-type, помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.

Горизонтальный список

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

Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block, в зависимости от того, какие ещё свойства вы собираетесь использовать.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
	<style>li { display: inline; }</style>
  </head>	
  <body>

    <h4>Нумерованный список</h4>
    <ol>
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
	
	<h4>Маркированный список:</h4>
	
    <ul>
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>

  </body>
</html>
Попробовать »

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

Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть здесь.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen