HTML списки. Создание и настройка

HTML списки. Создание и настройкаВслед за созданием ссылок, в html очень важным умением есть умение создавать html списки.

Ведь пользоваться этим элементом придется очень часто. Не важно создаете вы статический сайт или работает с CMS (система управления сайтом).

Собственно как говорилось в одном знаменитом фильме «Короче Склифосовский» 🙂

Поэтому перехожу к сути.

Разберем создание html списков более подробно.

Общий синтаксис списков html

1
2
3
4
<тип списка html>
    <li>элемент списка html</li>
        <li>элемент списка html</li>
</тип списка html>

Пример:

1
2
3
4
<ul>
<li>Первый</li>
<li>Второй</li>
</ul>

Результат:

  • Первый
  • Второй

Пример:

1
2
3
4
<ol>
<li>Первый</li>
<li>Второй</li>
</ol>

Результат:

  1. Первый
  2. Второй

Списки html по типу

В html есть два основных вида html списков:

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

Есть еще Списки определений – но он мало распространен.

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

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

Синтаксис создания нумерованного списка html выглядит так:

1
2
3
4
<ol>
    <li>элемент нумерованного списка html</li>
        <li>элемент нумерованного списка html</li>
</ol>

Пример:

1
2
3
4
<ol>
<li>Первый</li>
<li>Второй</li>
</ol>

Результат:

  1. Первый
  2. Второй

Как видите ничего сложного.

Но возникает резонный вопрос: «А если нужно начать нумерацию не с 1, а скажем с двенадцати?»

И это будет правильный вопрос. Нумерованный список html предоставляет нам такую возможность.

Указание начального номера нумерованного списка html

Синтаксис команды выглядит так:

1
2
3
4
<ol start="желаемые порядковый номер">
    <li>элемент нумерованного списка html</li>
<li>элемент нумерованного списка html</li>
</ol>

Пример:

1
2
3
4
<ol start="7">
<li>Первый</li>
<li>Второй</li>
</ol>

Результат:

  1. Первый
  2. Второй

Этот может пригодиться, если вы хотите разорвать нумерованный список html. Написать пару абзацев. А потом снова его продолжить с нужным порядковым номером.

Повышаем контроль и меняем порядок нумерации посреди нумерованного списка html

Синтаксис команды выглядит так:

1
2
3
4
5
<ol start="желаемые порядковый номер">
    <li>элемент нумерованного списка html</li>
<li value="желаемые порядковый номер">элемент нумерованного списка html</li>
<li>элемент нумерованного списка html</li>
</ol>

Пример:

1
2
3
4
5
<ol start="7">
<li>Первый</li>
<li value="12">Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

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

Нумерация html списка продолжиться с последнего указания.

Value – в переводе: значение. Именно этот параметр позволит внести изменение в процесс нумерации списка html.

Смена стиля нумерованного списка html

Нумерованный список позволяет нам поменять тип нумерации списка. Заменить цифры, например на буквы, либо на римские цифры.

Но чего зря воздух сотрясать, давайте на конкретных примерах посмотрим, что можно:

Меняется вся эта стилистика с помощью TYPE и указанием нужного значения.

Синтаксис команды смены стиля нумерованного списка html выглядит так:

1
2
3
4
5
<ol TYPE="тип нумерации">
<li>элемент нумерованного списка html</li>
<li>элемент нумерованного списка html</li>
<li>элемент нумерованного списка html</li>
</ol>

Пример:

1
2
3
4
5
<ol TYPE="A">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Пример:

1
2
3
4
5
<ol TYPE="a">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Пример:

1
2
3
4
5
<ol TYPE="I">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Пример:

1
2
3
4
5
<ol TYPE="i">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Пример:

1
2
3
4
5
<ol TYPE="1">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Конечно, с помощью css этот список можно расширить, но в этой статье ограничимся одним только HTML. Что бы не создавать путаницу.

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

На отмену от нумерованного списка, маркированный список не использует нумерацию, а возле каждого элемента ставиться маркер.

Маркер — в данном случае представляет собой небольшую фигурку или изображение.

Синтаксис создания маркированного списка выглядит так:

1
2
3
4
<ol>
    <li>элемент маркированного списка</li>
    <li>элемент маркированного списка</li>
</ol>

Пример:

1
2
3
4
<ol>
<li>Первый</li>
<li>Второй</li>
</ol>

Результат:

  1. Первый
  2. Второй

Типы маркеров – маркированного списка

Наряду с нумерованным html списком, в котором можно менять тип нумерации. Логично было бы предложить, что и маркированный список дает возможность изменить тип маркера.

И действительно такая возможность есть. Смотрим:

Также как и с нумерованным списком, в маркированном списке тип маркеров меняет TYPE, только его значения отличаются.

Синтаксис команды выглядит так:

1
2
3
4
5
<ol TYPE="тип маркера">
<li>элемент маркированного списка</li>
<li>элемент маркированного списка</li>
<li>элемент маркированного списка</li>
</ol>

Пример:

1
2
3
4
5
<ol TYPE="circle">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Пример:

1
2
3
4
5
<ol TYPE="disc">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

Пример:

1
2
3
4
5
<ol TYPE="square">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>

Результат:

  1. Первый
  2. Второй
  3. Третий

На всякий случай перевод значений:

  • circle — круг;
  • disc — диск;
  • square — квадрат;

Многоуровневый список

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

Для построения конструкции может быть использован как нумерованный список html, так и маркированный или оба сразу.

Посмотрим на синтаксис и на примеры. Так будет яснее:

Синтаксис создания многоуровневого списка выглядит так:

1
2
3
4
5
6
7
8
9
10
<тип списка>
<li>элемент списка первого уровня</li>
<li>элемент списка первого уровня
            <тип вложенного списка>
            <li>элемент вложенного списка</li>
            <li>элемент вложенного списка </li>
            </тип вложенного списка>
</li>
<li>элемент списка первого уровня</li>
</тип списка>

Пример:

1
2
3
4
5
6
7
8
9
10
<ul>
<li>текст первого списка</li>
<li>текст первого списка
<ol>
<li>текст вложенного списка</li>
<li> текст вложенного списка </li>
</ol>
</li>
<li>текст первого списка</li>
</ul>

Результат:

  • текст первого списка
  • текст первого списка
    1. текст вложенного списка
    2. текст вложенного списка
  • текст первого списка

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

То есть один список вставляется в элемент «li» другого списка.

Единственное неудобство, что такой вид организации списков легко может привести к путанице.

Рассмотрим еще несколько примеров:

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ul>
<li>февраль
<ol>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
</ol>
</li>
<li>март
<ol>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
</ol>
</li>
<li>апрель
<ol>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
</ol>
</li>
</ul>
<ol>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
<li>неделя</li>
</ol>

Результат:

  • февраль
    1. неделя
    2. неделя
    3. неделя
    4. неделя
  • март
    1. неделя
    2. неделя
    3. неделя
    4. неделя
  • апрель
    1. неделя
    2. неделя
    3. неделя
    4. неделя

Пример:

1
2
3
4
5
6
7
8
9
<ul>
<li>месяца:
<ul>
<li>февраль</li>
<li>март</li>
<li>апрель</li>
</ul>
</li>
</ul>

Результат:

  • месяца:
    • февраль
    • март
    • апрель

Как видите, при определенной доле воображения найти применение многоуровневым html спискам не составит труда.

Благо для их составления никаких специальных тегов не нужно.

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

На этом все. Удачи!!!

С уважением Тригуба Сергей.

Интересное — Зимние эффекты на ЖД транспорте

Постовой — Надоела зима и хочется лета — туры в хургаду со скидкой. Египет ждет вас.

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев (1)

Круто! Этот урок сохраняю обязательно. Очень полезная штука, спасибо, Сергей!

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет