Как создаются маркированные и нумерованные списки

В данной статье мы с вами рассмотрим возможность создания маркированных и нумерованных списков на языке HTML.

Маркированные списки создаются тегом <ul>. Каждый элемент списка создается тегом <li>. Кстати, сразу скажу, что элементы списков создаются тегом <li> не только для маркированных списков, но и для нумерованных списков.

Вот пример HTML-кода маркированного списка:

<ul>

     <li>Январь</li>

     <li>Февраль</li>

     <li>Март</li>

     <li>Апрель</li>

     <li>Май</li>

     <li>Июнь</li>

     <li>Июль</li>

     <li>Август</li>

     <li>Сентябрь</li>

     <li>Октябрь</li>

     <li>Ноябрь</li>

     <li>Декабрь</li>

   </ul>

Результат в браузере:

Результат маркированного списка в браузере

Как создаются нумерованные списки

Нумерованные списки создаются тегом <ol>.

Вот пример HTML-кода нумерованного списка:

<ol>

   <li>Запустить программу</li>

   <li>Нажать кнопку «Старт»</li>

   <li>Нажать кнопку «Готово»</li>

 </ol>

Результат в браузере:

Результат нумерованного списка в брузере

По умолчанию, нумерованные списки отображаются с помощью порядковых цифр (1,2,3 и т.д.). Но это можно изменить с помощью параметра type тега <ol>. Например, сделаем так, чтобы элементы списков отображались по алфавиту. Для этого  присвоим атрибуту type тега <ol> значение «a»:

Результат в браузере:

маркированный список с атрибутом type

Если Вам нужно, чтобы нумерация в списке начиналась не с единицы, а с какой-нибудь другой цифры, то это можно сделать, присвоив атрибуту start тега <ol> соответствующую цифру в качестве значения. Например, сделаем так, чтобы список начал нумероваться с цифры 7.

Для этого присвоим атрибуту start тега <ol>  значение «7»:

<ol start= "7 ">

   <li>Запустить программу</li>

   <li>Нажать кнопку «Старт»</li>

   <li>Нажать кнопку «Готово»</li>

</ol>

Результат в браузере:

нумерованный список с атрибутом start

Запись опубликована в рубрике HTML.
Теги: , , , , . Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>