HTML позволяет создавать два типа списков: маркированные и нумерованные. Маркированные списки создаются при помощи парного тега <ul> ... </ul>. Каждый помещённый внутрь тега <ul> ... </ul> элемент списка должен быть маркирован тегом <li> … </li>.
Код маркированного списка выглядит следующим образом:
<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
<li>элемент 4</li>
</ul>
В отображённом виде маркированный список выглядит следующим образом (рис. 2.3)
- элемент 1
- элемент 2
- элемент 3
- элемент 4
Рис. 2.3. Маркированный список
Нумерованный список создаётся аналогичным образом, за тем отличием, что для его создания применяется парный тег <ol> ... </ol>. В остальном нумерованные списки устроены точно также, как и маркированные: каждому новому элементу списка должен предшествовать тег <li> и завершаться тегом </li>.
Код списка выглядит следующим образом:
<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
<li>элемент 4</li>
</ol>
В готовом виде список будет отображён на экране так, как показано на рисунке (рис. 2.4).
- элемент 1
- элемент 2
- элемент 3
- элемент 4
Рис. 2.4. Нумерованный список
Следующий способ организации текста – создание «Списка определяемых терминов и определений к ним» или списка определений. Список определений создаётся парным тегом <dl> ... </dl>. Внутрь этого тега помещаются определяемые понятия (маркируемые тегом <dt> (definition term — определяемый термин), и определения, которые маркируются тегом <dd> (definition definition — определение определения).
Код выглядит следующим образом:
<dl>
<dt>монитор</dt>
<dd>устройство вывода</dd>
<dt>клавиатура</dt>
<dd>устройство ввода</dd>
<dt>принтер</dt>
<dd>устройство вывода</dd>
<dt>сканер</dt>
<dd>устройство ввода</dd>
</dl>
В отображённом на экране виде выглядит, как показано на рисунке (рис. 2.5).
Рис. 2.5. Список определений
Специфика браузеров такова, что они игнорируют такие знаки, как пробелы, символами конца строки, знаки табуляции. Для того, чтобы «заставить» в необходимых случаях отображать текст со всеми этими знаками, применяется парный тег предформатированного (preformatted) текста <pre> </pre>.
Пройдите курс по ссылке: Веб-технологии. Часть I