alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


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

Категория: Уроки HTML Просмотров: 786 Коментариев: 0 Дата: 2017-04-02 Добавил: admin

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

И так, мы идем дальше, как создавать параграфы и заголовки мы рассмотрели и следующий момент который мы изучим это Упорядоченные списки. Для создания в HTML упорядоченных списков используются отдельные теги, это <ol> </ol> которые создают некий контейнер для списка и указывают тип списка. Тег <ol> это сокращение с английского языка Ordered List и в переводе означает Упорядоченный список. Все элементы списка находятся между тегами <li> </li>, который в свою очередь находится в контейнере <ol>. Упорядоченный список в HTML используется достаточно часто, поэтому первый урок про списки начнем именно, про него.


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

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

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. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка
</body> </html>
 Нумерованный список

На примере выше мы видим, что сформировался нумерованный список от 1 до 4. Если в списке не указать ни каких атрибутов для тега <ol>, то по умолчанию нумерованный список создается с арабскими цифрами. Если же для тега <ol> задать атрибут type то можно изменить маркеры нумерации списка.

В качестве маркеров могут применятся следующие элементы.

  • Арабские цифры (1, 2, 3, ...);
  • Заглавные латинские буквы (A, B, C, ...);
  • Строчные латинские буквы (a, b, c, ...);
  • Прописные римские цифры (I, II, III, ...);
  • Строчные римские цифры (i, ii, iii, ...).

Так же есть возможность начать нумерацию элементов списка с определенного значения (не с единицы). Реализуется это с помощью другого атрибута start в теге <ol>. Использование атрибута start не зависит от указанного типа списка 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. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Указываем атрибут type="1". Использовать маркеры в виде Арабских цифр.

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

Указываем атрибут type="A". Использовать маркеры в виде Прописных букв латинского алфавита.

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

Указываем атрибут type="a". Использовать маркеры в виде Строчных букв латинского алфавита.

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

Указываем атрибут type="I". Использовать маркеры в виде Римских цифр в верхнем регистре.

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

Указываем атрибут type="i". Использовать маркеры в виде Римских цифр в нижнем регистре.

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

Указываем атрибут type="I" и start="4". Использовать маркеры в виде Римских цифр в верхнем регистре и начинается счет в списке с 4.

  1. Я 1-й элемент у списка
  2. Я 3-й элемент у списка
  3. Я 4-й элемент у списка
  4. Я 5-й элемент у списка
</body> </html>

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


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов