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>
  
  1. Бананы 500г.
  2. Хлеб 2б.
  3. Сахар 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/Таблицы