special

This webpage has been robot translated, sorry for typos if any. To view the original content of the page, simply replace the translation subdomain with www in the address bar or use this link.

Маркированные списки

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

Для установки маркированного списка используются теги <UL> и <LI> (пример 1).

Пример 1. Создание маркированного списка

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список</title>
</head>
<body>
<p>Что следует учитывать при тестировании сайта:</p>
<ul>
 <li>работоспособность всех ссылок</li>
 <li>поддержку разных браузеров</li>
 <li>читабельность текста</li>
</ul>
</body>
</html>

Ниже показан результат данного примера (рис. 1).

Рис. 1

Рис. 1. Вид маркированного списка в браузере Opera

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="..." тега <UL>. Вместо многоточия подставляется одно из трех значений указанных в табл. 1.

Табл. 1. Виды маркеров
Код HTML Пример
<ul type="disc"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<ul type="circle"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<ul type="square"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста

В примере 3 показано создание маркированного списка, маркеры в котором принимают вид окружности.

Пример 3. Изменение вида маркера

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
</head>
<body>

<p>Коктейли на основе текилы</p>
<ul type="circle">
 <li>Старинный мексиканский</li>
 <li>Голубая луна</li>
 <li>Храбрый бык</li>
 <li>Съерра Маргарита</li>
</ul>

</body>
</html>

Результат примера показан ниже (рис. 2).

Рис. 2

Рис. 2. Маркеры списка в виде окружности

С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунки. С этой целью применяется стилевой атрибут list-style-image, значением которого выступает путь к изображению. Его надо добавить внутри ключевого слова url, как показано в примере 4.

Пример 4. Использование стилей для добавления рисунков к маркерам

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/css">
UL {
list-style-image: url(images/square.gif); /* Путь к графическому файлу с маркером */
}
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк;</li>
<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;</li>
<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3

Рис. 3. Маркеры списка в виде рисунков

Copyright © www.htmlbook.ru


Created/Updated: 25.05.2018

';>