Как сделать список в HTML

Как сделать список в HTML

Здравствуйте! В этом уроке я хотел бы рассказать о том как создать список в HTML. Как вы  наверное знаете под списком подразумевают набор  каких-то данных, которые имеют четко выраженную логическую структуру.   Списки бывают как правило 2-х типов маркированные и нумерованные. В HTML для создания   маркированного списка используется тег <ul>, а для создания нумерованного — <ol>.  Пункты списка создаются с помощью тега <li>. Давайте рассмотри более детально.

Как создать список

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

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

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

Просмотреть  пример

 

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

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Маркированный список</title>
 </head>
 <body>
   <hr>
   <ul>
     <li>Чебурашка</li>
     <li>Крокодил Гена</li>
     <li>Шапокляк</li>
     <li>Крыса Анфиса</li>
   </ul>
   <hr>
 </body>
</html>

Просмотреть  пример

У каждого списка генерируются отступы, поскольку список относится к блочным элементам.

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

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

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

Вид маркеров

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Маркированный список</title>
 </head>
 <body>
  <p><strong>Изменение убеждений</strong></p>
  <ul type="square">
   <li>Мое убеждение/li>
   <li>Твое убеждение</li>
   <li>Общие убеждения</li>
   <li>Их убеждения</li>
  </ul>
 </body>
</html>

Просмотреть  пример

 

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

Нумерованные списки в отличие  от  маркированных  представляют из себя набор цифр, а не маркеров.  Тип цифр зависит от атрибутов тега <ol>, который собственно  и применяется для создания списка.  Ну а каждый пункт получается с помощью тега <li>.

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

Просмотреть  пример

Если  вы не указывайте  никаких  атрибутов и просто напишите тег <ol>, то по умолчанию используется список с арабскими числами (1, 2, 3,…).

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нумерованный список</title>
 </head>
 <body>
  <p><strong>Время</strong></p>
  <ol>
    <li>быть пунктуальным (нигде не опаздывать)</li>
    <li>излечение от пунктуальности</li>
    <li>потеря времени и пространства</li>
  </ol>
 </body>
</html>

Просмотреть  пример

В  качестве типов значений нумерованного списка могут выступать как цифры, так и буквы:

  • арабские цифры(1, 2, 3, …);
  • большие латинские буквы (A, B, C, …);
  • маленькие латинские буквы (a, b, c, …);
  • большие римские числа (I, II, III, …);
  • маленькие римские числа (i, ii, iii, …).

Для указания типа нумерованного списка применяется атрибут type тега <ol>.

Типы нумерованного списка
Тип списка Код HTML Пример
Арабские цифры <ol type=»1″>
<li>…</li>
</ol>
1. Чебурашка
2. Крокодил Гена
3. Шапокляк
Большие буквы латинского алфавита <ol type=»A»>
<li>…</li>
</ol>
A. Чебурашка
B. Крокодил Гена
C. Шапокляк
Маленькие буквы латинского алфавита <ol type=»a»>
<li>…</li>
</ol>
a. Чебурашка
b. Крокодил Гена
c. Шапокляк
Римские цифры в верхнем регистре <ol type=»I»>
<li>…</li>
</ol>
I. Чебурашка
II. Крокодил Гена
III. Шапокляк
Римские цифры в нижнем регистре <ol type=»i»>
<li>…</li>
</ol>
i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк
Читайте также  Теги div и span

Для того, чтобы начать список с определенного значения, используйте атрибут start тега <ol>. При этом  вовсе не имеет значения, какой тип списка установлен с помощью type, атрибут start будет одинаково работать как с римскими так  и с арабскими числами.

Нумерация списка

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Римские числа</title>
 </head>
 <body>
  <ol type="I" start="8">
   <li>Король Магнум </li>
   <li>Король Зигфрид </li>
   <li>Король Зигизмунд </li>
   <li>Король Хусбрандт </li>
  </ol>
 </body>
</html>

Просмотреть  пример

Список определений

Список определений применяется для  перечисления пар термин — значение и  состоит как правило из 2-х элементов — термина и его определения. Сам собственно список задается с помощью тега <dl>,  а термин — тегом <dt>,  и наконец его определение — с помощью  <dd>.  Давайте рассмотрим на примере.

Общая структура списка определений

<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

Просмотреть  пример

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

Пример  Создание списка определений

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Список определений</title>
 </head>
 <body>
  <dl>
   <dt>Теги</dt>
     <dd>Теги — это специальные символы разметки, которые применяется для 
         вставки различных элементов на веб-страницу, а именно: рисунки, 
         таблицы, ссылки и.т.д., и для изменения их вида.</dd>
   <dt>HTML-документ</dt>
     <dd>Это обычный текстовый файл, который может содержать текст, 
         теги и стили. Изображения и другие объекты хранятся отдельно. 
         Содержимое такого файла обычно называется HTML-кодом и имеет расширение html.</dd>
     </dl>
 </body>
</html>

Просмотреть  пример

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: