→ Пошук по сайту       Увійти / Зареєструватися

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

Компетенція Робота з HTML

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>, как показано ниже.

<ul>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ul>

В списке непременно должен присутствовать закрывающий тег </ul>, иначе возникнет ошибка. Закрывающий тег </li> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.

В листинге  11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Листинг 11.1. Создание маркированного списка

<!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>
   <hr>
   <ul>
     <li>Чебурашка</li>
     <li>Крокодил Гена</li>
     <li>Шапокляк</li>
     <li>Крыса Лариса</li>
   </ul>
   <hr>
 </body>
</html>

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

Рис. 11.1

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

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

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

Табл. 11.1. Стили маркеров списка
Тип списка Код HTML Пример
Список с маркерами в виде круга <ul type="disc">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с маркерами в виде окружности <ul type="circle">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с квадратными маркерами <ul type="square">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий

Замечание

Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.

Создание списка с квадратными маркерами показано в листинге 11.2.

Листинг 11.2. Вид маркеров

<!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><strong>Изменение убеждений</strong></p>
  <ul type="square">
   <li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). 
       Специальное предложение - иудаизм и мусульманство вместе;</li>
   <li>изменение веры в непогрешимость любимой партии;</li>
   <li>убеждение в том, что инопланетяне существуют;</li>
   <li>предпочтение политического строя, как самого лучшего в своем роде 
       (на выбор: феодализм, социализм, коммунизм, капитализм).</li>
  </ul>
 </body>
</html>

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

Рис. 11.2

Рис. 11.2. Вид списка с квадратными маркерами в браузере Firefox

загрузка...
Сторінки, близькі за змістом