4.7. Списки
Правильнее было бы рассматривать вопросы оформления списков в разд. “Оформление текста” (ранее в этой главе), т. к. списки тоже состоят из текстовых строк и абзацев, но тема списков достаточно велика, поэтому ей посвящен отдельный раздел.
Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованными и маркированными. В нумерованных списках каждый пункт обозначен некоторым номером. У маркированных списков пункты выделяются графическими маркерами. Списки также делят на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. В многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Итак, начнем мы с маркированных ненумерованных списков. Все содержимое такого списка обязано располагаться внутри пространства, ограниченного стартовым тэгом “<ul>” и его закрывающим двойником “</ul>”. Отдельные элементы списка объявляются с помощью обозначающего тэга “<li>”, который не имеет закрывающего двойника. Точнее, закрывающий тэг </li> может применяться, но он не обязателен. Приведем простейший пример использования маркированного списка.
<html>
<head>
<title>Маркированный список</title>
</head>
<body>
<p>Это обычный текст.</р>
<ul>
<li>Первый пункт списка
<li>Второй пункт списка
</ul>
</body>
</html>
Листинг 1.14
Рисунок 59. Окно браузера с результатом отображения файла, приведенного в листинге 1.14.
В нашем примере мы использовали тэги без параметров, Поэтому браузер применил установки по умолчанию для отображения элементов списка. Но ведь у нас есть некоторые дополнительные возможности отображения, которые регулируются с помощью различных параметров тэга, объявляющего какой-либо элемент списка. Тэг “<li>” обладает некоторым набором параметров, часть из которых имеет смысл применять в случае использования нумерованных списков, а часть предназначена для маркированных списков, Раз уж мы начали свое рассмотрение с маркированных списков, то и параметры опишем именно те, которые применяются для элементов подобных списков.
С помощью параметра “type” мы можем явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов.
Значение “disc” указывает браузеру, что следует использовать маркеры в виде маленького заполненного круга.
Значение “circle” задает маркер в виде окружности, используется по умолчанию.
Значение “square” устанавливает маркер в виде маленького прямоугольника.
Все эти значения необходимо указывать с сохранением регистра так, как они приведены в книге, поскольку при распознавании ключевых слов HTML-анализаторы чувствительны к регистру. Желательно все предустановленные ключевые слова, используемые как значения каких-либо параметров, писать с сохранением регистра. Наименования параметров и тэги нечувствительны к регистру символов. Теперь, после этого отступления, узнаем, как именно выглядят эти маркеры.
<html>
<head>
<title>Маркированный список</title>
<body>
<ul>
<li type=”circle”>Первый пункт списка
<li type="disc">Второй пункт списка
<li type="square">Третий пункт списка
</ul>
</body>
</html>
Листинг 1.15
Рисунок 60. Окно браузера с результатом отображения файла, приведенного в листинге 1.15.
Необходимо отметить, что как именно будет отображен маркер того или иного типа зависит только от браузера, и маркеры не всегда одинаковы в различных браузерах. Однако общее подобие все же будет сохранено, и окружность всегда останется окружностью, а прямоугольник — прямоугольником.
Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается тэгами “<ol>” и “</ol>”. Элементы списка объявляются с помощью все того же тэга “<li>”. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер.
<html>
<head>
<title>Нумерованный список</title>
</head>
<body>
<ol>
<li>Первый пункт списка
<li>Второй пункт списка
<li>Третий пункт списка
</ol>
</body>
</html>
Листинг1.16
Рисунок 61. Окно браузера с результатом отображения файла, приведенного в листинге 1.16.
Если использовать только стандартные значения (по умолчанию), нумерованный список выглядит просто и правильно, но этого может быть недостаточно. Для изменения его параметров и внешнего вида у нас есть достаточно средств, т. е. параметров все того же тэга “<li>”.
Уже знакомый нам параметр “type” позволяет указывать, какие именно цифры могут использоваться для обозначения элементов списка. Значением этого параметра может быть одно из предустановленных ключевых слов, которые мы сейчас все и рассмотрим.
Значение “1” применяется для нумерации обычными арабскими цифрами.
Значение “а” задает обозначения в виде строчных букв латинского алфавита. Нумерация идет в алфавитном порядке, начиная от “а” и до “z”. Впрочем, при дальнейшем продолжении списка обозначения тоже будут продолжены с использованием комбинаций строчных латинских букв.
Значение “A” так же, как и предыдущее, задает обозначение элементов списка с помощью букв латинского алфавита, но при этом будут уже использоваться заглавные буквы.
Значение “i” создает нумерацию римскими цифрами, которые обозначаются строчными буквами латинского алфавита.
Значение “I” устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться заглавные латинские буквы.
Теперь, когда мы теоретически знаем, какие бывают варианты нумерации, и как их устанавливать, пришло время привести пример их использования.
<html>
<head>
<title>Нумерованный список</title>
</head>
<body>
<ol>
<li type=”l”>Первый пункт списка
<li type=”a”>Второй пункт списка
<li type=”A”>Tpeтий пункт списка
<li type=”i”>Четвертый пункт списка
<li type=”I”>Пятый пункт списка
</ol>
</body>
</html>
Листинг 1.17
Рисунок 62. Окно браузера с результатом отображения файла. приведенного в'листинге 1.17.
На рисунке 64 видно, как браузер меняет внешний вид каждого элемента списка, сохраняя при этом их общую нумерацию. HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в гэг “<ol>” вставляется параметр “start”. Значением этого параметра является натуральное число, которое и будет номером первого элемента списка. Внутри списка мы можем произвольно менять порядковые номера элементов с помощью параметра “value”, применяемого в составе тэга “<li>”. Для того чтобы увидеть механизм использования этих параметров, рассмотрим еще один пример.
<html>
<head>
<title>Нумерованный список</title>
<body>
<ol start=5>
<li>Пятый пункт списка
<li>Шестой пункт списка
<li value=10>Десятый пункт списка
<li>Одиннадцатый пункт списка
</ol>
</body>
</html>
Листинг 1.18
Рисунок 63. Окно браузера с результатом отображения файла, приведенного в листинге 1.18.
Мы можем также создавать многоуровневые вложенные списки, совмещая при этом маркированные и нумерованные элементы. Для этого достаточно вложить тэг, обозначающий начало нового вложенного списка в соответствующий элемент основного списка так, как показано в следующем примере.
<html>
<head>
<title>Вложенные списки</title>
<body>
<ol>
<li>Первый пункт списка
<ol>
<li>Первый вложенный пункт
<li>Второй вложенный пункт
</ol>
<li>Второй пункт списка
<ul>
<li>Влоакенный маркированный элемент
<li>Бложенный маркированный элемент
</ul>
</ol>
</body>
</html>
Листинг 1.19
Рисунок 64. Окно браузера с результатом отображения файла, приведенного в листинге 1.19.