Текстовые элементы HTML

Секция, список

Секция (div - division)

Не несёт никакой логической нагрузки и используется, как правило, в качестве строительного элемента при вёрстке страницы. Здесь важно провести следующее разделение между всеми элементами тела HTML-документа: строчные ( inline ) элементы могут занимать часть строки, а блочные ( block ) всегда занимают целое число строк. Большинство HTML-элементов - строчные; к блочным относятся заголовок, абзац, секция, список и таблица (а также некоторые другие элементы, которые будут рассмотрены особо).

Таким образом, с точки зрения представления на экране секция ничем не отличается от абзаца. Главное различие состоит в том, что в абзац нельзя поместить другой абзац (и вообще блочный элемент), а в секцию разрешается помещать любые другие элементы, включая секции. Поэтому в качестве универсального контейнера обычно используется именно секция. При проектировании макета веб-страницы обычно мыслят блоками: блок колонтитула, блок меню, блок основного содержимого и т.д. Как правило, каждый блок реализуется при помощи секции либо списка. Подробно использование блоков рассмотрено в лекциях "Позиционирование средствами CSS" и "Табличная и бестабличная вёрстка"

Список (ol - ordered list, ul - unordered list)

Используется для нумерации или маркировки последовательности элементов. В следующем примере показаны основные приёмы разметки списков.

ol {
      list-style-type: upper-roman;
    }
  ...
  <p>
    Первый список:</p>
  <ol>
    <li>Пункт</li>
    <li>Ещё один пункт</li>
    <li>Последний пункт</li>
    <li>Вложенный список:
      <ul>
        <li>Пункт</li>
        <li>Ещё один пункт</li>
        <li>Последний пункт</li>
      </ul>
    </li>
  </ol>

Рис. 2.8. Вложенный список

ul li {
      list-style-type: disc;
      list-style-image:url(write.gif);
      padding-left:10px;
    }
  ...
  <ul>
    <li>Пункт</li>
    <li>Ещё один пункт</li>
    <li>Последний пункт</li>
  </ul>

Рис. 2.9. Изображение в качестве маркера

Как видно из примера, пункты в списке должны обрамляться элементами li ( list item - элемент списка), которые, в свою очередь, погружаются в элемент ol или ul.

Специфические свойства элементов ol и ul:

• list-style-type Указывает вид маркера или номера.
  Упражнение.

  В примере "Выбор маркера" попробуйте использовать следующие значения этого свойства:

  • circle
  • disc
  • decimal
  • square
  • lower-alpha
  • lower-roman
  • upper-alpha
  • upper-roman
  • none
• list-style-image Позволяет вместо маркера из стандартного набора использовать любое изображение. При этом необходимо учитывать, что размер изображения должен быть подходящим (в CSS нет средств для его изменения), а на тот случай, если загрузка изображений в браузере отключена, рекомендуется указывать и какое-либо значение свойства list-style-type.
• list-style-position Предоставляет выбор способа размещения маркера снаружи ( outside ) или внутри текста ( inside ).
  Специфический атрибут элемента ol - start, указывающий начальный номер списка, например: <ol start="10">.
  Большинство общих свойств CSS также применимо к спискам - как к элементу ol или ul (списку в целом), так и к элементу li (отдельным элементам списка).
  Упражнение. Задайте списку: а) рамки (сначала для списка в целом, затем для его пунктов); б) фоновый цвет; в) отступ слева. Пользуясь псевдоселектором first-letter, измените цвет и размер начальных букв пунктов списка.
• list-style Соединяет объявления свойств list-style-type, list-style-image и list-style-position в одном сокращённом объявлении:
  list-style: [list-style-type] [list-style-image] [list-style-position]
  Например: list-style: square inside;

Таблица (table)

Назначение этого элемента очевидно, и он является самым сложным по структуре и возможностям форматирования. Подробно он рассмотрен в "Таблицы" .