Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный
Лекция 16:

Списки HTML

< Лекция 15 || Лекция 16: 123 || Лекция 17 >
Аннотация: Рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили

Введение

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

Списки хорошо подходят со структурной точки зрения, так как они помогают создать хорошо структурированный, более доступный, и простой в обслуживании документ. Они полезны также с чисто практических соображений — они предоставляют дополнительные элементы для соединения со стилями CSS для целого множества стилей оформления.

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

  • Три типа списков
    • Неупорядоченные списки
    • Упорядоченные списки
      • Разметка упорядоченного списка
      • Начало упорядоченных списков с числа, отличного от 1
    • Списки определений
  • Выбор типа списка
  • Различие между списками HTML и текстом
  • Вложенные списки
  • Пошаговый пример
    • Разметка основной страницы
    • Добавление некоторых стилей
    • Страница рецептов
    • Разметка страницы рецептов
    • Оформление страницы рецептов
  • Заключение
  • Дополнительное чтение
  • Контрольные вопросы

Три типа списков

В HTML имеется три типа списков:

  • Неупорядоченный список - используется для объединения в группу множества связанных объектов без определенного порядка.
  • Упорядоченный список - используется для объединения в группу множества связанных объектов в определенном порядке.
  • Список определений - используется для вывода пар имя/значение, таких как термины и их определения, или время и события.

Каждый из них имеет определенное назначение - они не являются взаимозаменяемыми!

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

Неупорядоченные списки, или маркированные списки, используются, когда множество объектов может быть размещено в любом порядке. Примером является список покупок:

  • молоко
  • хлеб
  • сливочное масло
  • кофейные зерна

Однако все эти объекты являются частью одного списка, можно разместить объекты в любом порядке и список будет по-прежнему иметь смысл:

  • хлеб
  • кофейные зерна
  • молоко
  • сливочное масло

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

Разметка неупорядоченного списка

Неупорядоченные списки используют одну пару тегов <ul></ul>, охватывающих множество пар тегов <li></li>:

<ul>
  <li>хлеб </li>
  <li>кофе в зернах </li>
  <li>молоко </li>
  <li>масло </li>
</ul>

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

Упорядоченные списки, или нумерованные списки, используются для вывода списка объектов, которые необходимо разместить в определенном порядке. Примером могут быть кулинарные инструкции по приготовлению, которые должны быть выполнены в определенном порядке рецепта:

  1. Собрать ингредиенты
  2. Смешать ингредиенты
  3. Поместить ингредиенты в форму для выпечки
  4. Выпекать в духовке в течение часа
  5. Вынуть из духовки
  6. Дать постоять десять минут
  7. Подать

Если список позиций переставить в другом порядке, то информация больше не будет иметь смысл:

  1. Собрать ингредиенты
  2. Выпекать в духовке в течение часа
  3. Вынуть из духовки
  4. Подать
  5. Поместить ингредиенты в форму для выпечки
  6. Дать постоять десять минут
  7. Смешать ингредиенты

Упорядоченные списки могут выводиться с помощью одной из нескольких цифровых или алфавитных систем — то есть с буквами или числами. По умолчанию в большинстве браузеров используются десятичные числа, но имеется большее количество возможностей.

  • Буквы
    • Буквы ascii нижнего регистра (a, b, c…)
    • Буквы ascii верхнего регистра (A, B, C…)
    • Классические греческие буквы нижнего регистра: ( \alpha, \beta, \gamma …)
  • Числа
    • Десятичные числа (1, 2, 3…)
    • Десятичные числа с ведущим нулем (01, 02, 03…)
    • Римские числа в нижнем регистре (i, ii, iii…)
    • Римские числа в верхнем регистре (I, II, III…)
    • Традиционная грузинская нумерация (an, ban, gan…)
    • Традиционная армянская нумерация (mek, yerku, yerek…)

Здесь также можно использовать CSS для изменения стиля списков.

Разметка упорядоченного списка

Упорядоченные списки используют одну пару тегов <ol></ol>, охватывающих множество пар тегов <li></li>:

<ol>
  <li>Собрать ингредиенты</li>
  <li>Смешать ингредиенты</li>
  <li>Поместить ингредиенты в форму для выпечки </li>
  <li>Выпекать в духовке в течение часа </li>
  <li>Вынуть из духовки</li>
  <li>Дать постоять десять минут </li>
  <li>Подать</li>
</ol>
Начало упорядоченных списков с числа, отличного от 1

Можно создать упорядоченный список, нумерация которого начинается с числа отличного от 1 (или i, или I, и т.д.). Это делается с помощью атрибута start, который получает числовое значение, даже если используется CSS для изменения нумерации списка на алфавитную или римскую с помощью свойства list-style-type. Это будет полезно, если имеется единый список объектов, но вы хотите разбить список некоторыми примечаниями, или некоторой другой подходящей информацией. Например, можно было бы сделать это с предыдущим примером:

<ol>
  <li>Собрать ингредиенты </li>
  <li>Смешать ингредиенты </li>
  <li>Поместить ингредиенты в форму для выпечки </li>
</ol>

<p class="note">Прежде чем поместить ингредиенты в форму для выпечки, 
  нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, 
   чтобы быть готовым к следующему шагу </p>

<ol start="4">
  <li> Выпекать в духовке в течение часа </li>
  <li> Вынуть из духовки </li>
  <li> Дать постоять десять минут </li>
  <li> Подать </li>
</ol>

Это приводит к следующему результату:

  1. Собрать ингредиенты
  2. Смешать ингредиенты
  3. Поместить ингредиенты в форму для выпечки
    Прежде чем поместить ингредиенты в форму для выпечки, нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, чтобы быть готовым к следующему шагу
  4. Выпекать в духовке в течение часа
  5. Вынуть из духовки
  6. Дать постоять десять минут
  7. Подать
Отметим, что этот атрибут является фактически исключенным в самой последней версии спецификации HTML, что означает, что страницы не пройдут валидацию при использовании строгого doctype. Это может показаться странным, так как этот атрибут имеет смысл, и нет эквивалента в CSS. Это показывает, что валидация HTML является идеальной целью для достижения, но не всегда абсолютно конечной целью. Кроме того, есть и еще один спасительный момент — атрибут start больше не является исключенным в спецификации HTML 5 (документ об отличиях HTML 5 от HTML 4 (http://www.w3.org/TR/2008/WD-html5-diff-20080122/) подтверждает это). Если вы хотите использовать такую возможность на строгой странице HTML 4, и она должна обязательно пройти валидацию, можно сделать это с помощью CSS Counters.
< Лекция 15 || Лекция 16: 123 || Лекция 17 >
Марина Походаева
Марина Походаева

Помогите мне. Я ничего не понимаю в курсе ((((((   (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!!

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Данила Некрасов
Данила Некрасов
Россия, Пермь, ПНИПУ
Сергей Федоров
Сергей Федоров
Россия