Автор: Никита Иванов | 30 января 2013 16:31

Урок 7. Создание списков в html

Стандартный список html

Стандартный список - это такой список, в котором подпункты выделяются точками, независимо от их количества.

<ul>
  <li>Первый элемент обычного списка</li>
  <li>Второй элемент обычного списка</li>
</ul>

Нумерованный список html

Нумерованный список - это список, в котором подпункты выделяются цифрами по порядку.

<ol>
  <li>Первый элемент нумерованного списка</li>
  <li>Второй элемент нумерованного списка</li>
</ol>

По умолчанию перечисление будет вестись с использованием чисел.
Однако можно изменять параметры нумерации. Для этого используем атрибут type и указываем нужное значение

A - заглавные латинские буквы (A, B, C)
a - прописные латинские буквы (a, b, c)
I - большие римские цифры (I, II, III)
i - маленькие римские цифры (i, ii, iii)
Пример нумерации списка с заглавными латинскими буквами

<html>
<head></head>
<body>

<ol type="A">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
</ol>

</body>
</html>

В итоге браузер выведет

Список с определениями html

Список с определениями - это список, в котором подпункты (термин, слово) выделяются отдельно от самой расшифровки (трактовка, определение) переносом строки и отступом.

<html>
<head></head>
<body>

<!-- ЛОГИКА ЗАПИСИ -->
<dl> 
<dt>Термин 1</dt> 
<dd>Определение 1</dd>
 
<dt>Термин 2</dt> 
<dd>Определение 2</dd> 
</dl>

<!-- ПРИМЕРЫ -->
<dl>
<dt>HTML</dt>
<dd>Язык вёрстки</dd>

<dt>DOM</dt>
<dd>Объектная модель документа</dd>
</dl>

</body>
</html>

Пример готового кода

Привожу пример использования трёх список подряд списков.

<html>
<head></head>
<body>

<!-- Стандартный список с точками -->
   <ul>
     <li>Первый элемент обычного списка
     <li>Второй элемент обычного списка
   </ul>

<!-- Нумерованный список -->
   <ol>
     <li>Первый элемент нумерованного списка
     <li>Второй элемент нумерованного списка
   </ol>

<!-- Нумерованный список, с прописными латинскими буквами -->
   <ol type="a">
     <li>Первый элемент нумерованного списка
     <li>Второй элемент нумерованного списка
   </ol>

</body>
</html>

В браузере будет выведено

Пример списка с вложенными списками

В итоге урока хочу привести конструкцию из вложенных друг в друга списков списков.

<html>
<head></head>
<body>

<!-- Список с вложенными списками -->
   <ul>
     <li>Первый элемент обычного списка
       <ol>
        <li>Первый элемент нумерованного списка
        <li>Второй элемент нумерованного списка
       </ol>
     <li>Второй элемент обычного списка
     <li>Третий элемент обычного списка
       <ol type="a">
        <li>Первый элемент нумерованного списка
        <li>Второй элемент нумерованного списка
       </ol>
   </ul>

</body>
</html>

Спасибо за внимание!

30 января 2013 16:21	Урок 6. Специальные символы в html
30 января 2013 16:21	Урок 5. Работа с изображениями в html
25 января 2013 17:08	Урок 2. Структура html документа (страницы)
30 января 2013 16:37	Урок 11. Элементы формы: текстовая область и список.
22 августа 2013 11:02	Урок 14. Как вставить аудио или музыку на сайт в html