Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 7969 / 742 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 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 >
Марина Медведева
Марина Медведева

Добрый день. Сегодня записалась на курс, хочу сразу оплатить, но не знаю, можно ли это сделать через сайт Интуит?

Кристина Семенова
Кристина Семенова

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

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989