HTML/Списки

Упорядоченные и неупорядоченные списки

Тег <ol>

Описание

Тег <ol> устанавливает нумерованный список(ordered list). Каждый элемент списка(list item) должен начинаться с тега <li>.

Синтаксис


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

Атрибуты

type - Устанавливает вид маркера списка. Синтаксис:
```
<ol type="A | a | I | i | 1">...</ol>
```
reversed - Нумерация в списке становится по убыванию (3,2,1).
start - Задаёт число, с которого будет начинаться нумерованный список.

Закрывающий тег

Обязателен.

Пример:

  
    <ol type="A" start="A">
      <li>Бананы 500г.</li>
      <li>Хлеб 2б.</li>
      <li>Сахар 1кг.</li>
    </ol>

Бананы 500г.
Хлеб 2б.
Сахар 1кг.

Тег <ul>

Описание

Тег <ul> устанавливает маркированный список(unordered list). Каждый элемент списка(list item) должен начинаться с тега <li>.

Синтаксис

  
    <ul>
      <li>элемент маркированного списка</li>
    </ul>

Атрибуты

type - Устанавливает вид маркера списка.Синтаксис:
```
<ul type="disc | circle | square">...</ul>
```

Закрывающий тег

Обязателен.

Пример:

  
    <ul type="disc">
      <li>Спанч</li>
      <li>Танчик</li>
      <li>Флинстоун</li>
    </ul>

Спанч
Танчик
Флинстоун

Списки определений

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>.

Задания

Представить навигацию по сайту в виде списка. Пример:


<ol>
  <li>
    <a href="http://ru.wikiversity.org/wiki/HTML/Введение" title="HTML/Введение">Введение.</a>
    Элементы HTML, HEAD, TITLE, BODY.
  </li>
  <li>
    <a href="http://ru.wikiversity.org/wiki/HTML/Инструменты" title="HTML/Инструменты">Инструменты.</a>
  </li>
  <li>
    <a href="http://ru.wikiversity.org/wiki/HTML/Структура веб-страницы" title="HTML/Структура веб-страницы">
      Структура веб-страницы.     
    </a> 
    Информация о версии HTML. Комментарии в HTML.
  </li>
</ol>

Дополнительные задания

Курс HTML

Предыдущий урок: HTML/Вставка изображения — Следующий урок: HTML/Таблицы