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.

Вложенные списки

Вложенные списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Реально на веб-странице нельзя автоматически вести многоуровневую нумерацию, вроде использования подпунктов типа 1.1 или 2.1.3. Поэтому приходится вводить числа самостоятельно или упрощать отображение списка. Так, в примере 1 пункты и подпункты списка обозначаются числами. Чтобы корректно организовать вложение списков тег <OL>, формирующий подпункты, должен располагаться внутри тега <LI>.

Пример 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>
<hr>

<ol>
 <li>Пункт 1
  <ol>
   <li>Подпункт 1.1</li>
   <li>Подпункт 1.2</li>
  </ol>
 </li>
 <li>Пункт 2
  <ol>
   <li>Подпункт 2.1</li>
   <li>Подпункт 2.2</li>
  </ol>
 </li>
</ol>

<hr>
</body>
</html>

Результат данного примера показан ниже. Обратите внимание, что у подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка, как это обычно бывает у тега <OL>.

Рис. 1

Рис. 1. Вид вложенного нумерованного списка

Аналогично можно использовать и маркированные списки. При этом во вложенном списке автоматически меняется вид маркеров (пример 2).

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

Валидный 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>

<ul>
 <li>Пункт 1
  <ul>
   <li>Подпункт 1.1</li>
   <li>Подпункт 1.2</li>
  </ul>
 </li>
 <li>Пункт 2
  <ul>
   <li>Подпункт 2.1</li>
   <li>Подпункт 2.2</li>
  </ul>
 </li>
</ul>

</body>
</html>

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

Рис. 2

Рис. 2. Вид вложенного маркированного списка

Copyright © www.htmlbook.ru


Created/Updated: 25.05.2018

';>