аватар Автор: Сергей Касаткин | 30 января 2013 16:31

Уроки / HTML /

Урок 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>



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



Похожие статьи


Комментарии к статье (vk.com)