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

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

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

Существует два вида списков это маркированный список и нумерованный список. Разница между ними в том, что у первого типа элементы списка маркируются фигурами: черные кружки, квадраты и окружности. А у второго типа элементы списка маркируются цифрами и буквами.

А также первый тип создается тегами <ul></ul> а второй тип тегами <ol></ol>. Элементы списков создаются с помощью парного тега <li> .

Далее познакомимся с каждым типом по подробнее.

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

Создается тегами <ul></ul>. Через атрибут type тега ul, мы можем изменить вид маркера на квадрат (squere) или окружность (circle). По умолчанию этот атрибут имеет значение disc.

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

Код маркированного списка Вид маркированного списка
<ul>
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ul>
  • Пункт 1
  • Пункт 2
  • Пункт 3
<ul type="squere">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ul>
  • Пункт 1
  • Пункт 2
  • Пункт 3
<ul type="circle">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ul>
  • Пункт 1
  • Пункт 2
  • Пункт 3

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

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

Код нумерованного списка Вид нумерованного списка
<ol>
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<ol type="A">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<ol type="a">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<ol type="I">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<ol type="i">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

Если атрибуту type присвоить другое значение, кроме тех, которые посмотрели выше, то браузер не поймёт данное значение и присвоить ему значение по умолчанию, то есть 1.

Также для данного вида списка существует еще 2 атрибута: reversed – Делает нумерацию по убыванию, то есть выведет 3,2,1.

<ol reversed >
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>

Вид нумерованного списка с атрибутом reserved.

  1. Пункт 3
  2. Пункт 2
  3. Пункт 1

И атрибут start, который позволяет указать с какого числа начать нумерацию.

<ol start="4">
    <li> Пункт 1 </li>
    <li> Пункт 2 </li>
    <li> Пункт 3 </li>
</ol>

Вид нумерованного списка с атрибутом start.

  1. Жора
  2. Федя
  3. Антон

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

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu920@mail.ru. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2015-12-09 01:03:50