2.8. Списки
Списки (list) являются разновидностью текстовых элементов, но их можно использовать и для размещения гиперссылок или рисунков.Визуально списки очень похожи на те, которые создаются, к примеру, в документах Word, поэтому списки необходимы для конвертации файлов DOC в формат HTML.
Достоинством списков является автоматическая расстановка номеров или маркеров: если список дополняется новыми пунктами или укорачивается, и пользователю не требуется набирать номера заново. Это удобно и в том случае, когда Web-страница генерируется программным способом.
Для ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие фигуры. Таким образом, в разметку вводятся графические элементы без использования файлов изображений. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют использовать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.
<UL> <LI> </UL>
Самой простой — ненумерованный список (unordered list). Его шаблон представлен ниже:<UL type="disc">
<LI>Пункт 1
<LI>Пункт 2
<LI>Пункт 3
</UL>
Элемент UL является своеобразным обрамлением списка и позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис. 2.8.
Рис. 2.8. Ненумерованный список
Атрибут type определяет вид маркеров:disc — кружки (вид по умолчанию);
circle — окружности;
square — квадратики.
<OL> <LI> </OL>
Структура нумерованного списка (ordered list) похожа на предыдущую:<OL type="A">
<LI>Пункт 1
<LI>Пункт 2
<LI>Пункт 3
<LI>Пункт 4
</OL>
В этом случае каждый пункт маркируется элементом упорядоченной последовательности: арабскими или римскими числами, буквами латинского алфавита. На рис. 2.9 показан вид списка для приведенного выше примера.
Рис. 2.9. Нумерованный список
В таблице приведены значения атрибута type, определяющие способ нумерации.Атрибут |
Вид нумерации |
type="1" |
1, 2, 3, 4, ... |
type="i" |
i, ii, iii, iv, ... |
type="I" |
I, II, III, IV, ... |
type="a" |
a, b, c, d, ... |
type="A" |
A, B, C, D, ... |
Атрибут, который позволяет задать начальное значение для нумерации списка:
start=номер
Например, если использована буквенная нумерация как на рис. 2.9, то значение атрибута start=4 определит, что нумерация списка начнется с литеры D.
Для элемента LI может быть использован атрибут, который определит номер для текущего пункта списка:
value=номер
Соответственно, следующий пункт списка будет иметь очередной номер и т. д. При помощи атрибута value, если использовать его для первого в списке элемента LI, можно добиться того же эффекта, что и при помощи атрибута start, или нарушить последовательность номеров, если переопределить другие элементы списка.
С помощью не имеющего значений атрибута compact можно (в некоторых случаях) сделать список более компактным.
Вложенные списки
Следующий код иллюстрирует возможность использования вложения списков и образования двух уровней. Каждый элемент, определяющий пункт списка, может содержать еще один список. Списки могут иметь разные типы.<UL>
<LI>Пункт 1
<OL>
<LI>Пункт 1.1
<LI>Пункт 1.2
</OL>
<LI>Пункт 2
<OL>
<LI>Пункт 2.1
<LI>Пункт 2.2
</OL>
</UL>
Внешний вид такого списка показан на рис. 2.10.
Рис. 2.10. Двухуровневый список
<DL> <DT> <DD> </DL>
Списки с определениями (definition list) создаются при помощи тегов трех видов:<DL>
<DT>Пункт 1
<DD>Первое «определение» пункта 1
<DD>Второе «определение» пункта 1
<DT>Пункт 2
<DD>«Определение» пункта 2
<DT>Пункт 3
<DD>«Определение» пункта 3
</DL>
Лучше всего дает представление о смысле списка с определениями рис. 2.11. Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тегов DD. Каждый блок автоматически размещается с новой строки. Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение — произвольный текст под заголовком.
Рис. 2.11. Список с определениями
В таблицах стилей для списков также предусмотрены специальные свойства (см. раздел 3.2). Например, в секции HEAD можно определить стиль списка с маркерами в виде окружностей (circle):<STYLE type="text/css">
OL.spisok01 {list-style-type: circle}
</STYLE>
Тогда в секции BODY может присутствовать список с маркерами в виде кружков:
<OL class="spisok01">
<LI> Пункт 1
<LI> Пункт 2
</OL>
© TEKCT.RU, А. Гончаров, 2007-2022
|
|