Список html – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML

HTML списки

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

Списки определяются тегами:

<ul>…</ul>	обрамление маркированного списка;
<ol>…</ol>	обрамление нумерованного списка;
<li>…</li>	обрамление каждого элемента списка.

Списки могут быть вложенными. Во вложенных списках маркер первого уровня – круг, второго – окружность, третьего – квадрат.

Изменить вид маркера списка можно с помощью стиля list-style.

Пример маркированного списка

<ul>
    <li>Гоголь Н.В.
        <ul>
            <li>&laquo;Ревизор&raquo;</li>
            <li>&laquo;Тарас Бульба&raquo;</li>
            <li>&laquo;Мертвые души&raquo;</li>
        </ul>
    </li>
    <li>Толстой Л.Н.
        <ul>
            <li>&laquo;Война и мир&raquo;</li>
            <li>&laquo;Анна Каренина&raquo;</li>
            <li>&laquo;Воскресение&raquo;</li>
        </ul>
    </li>
</ul> 

РЕЗУЛЬТАТ:

• Гоголь Н.В.
  • «Ревизор»
  • «Тарас Бульба»
  • «Мертвые души»
• Толстой Л.Н.
  • «Война и мир»
  • «Анна Каренина»
  • «Воскресение»

Для формирования открывающих и закрывающих типографских кавычек « и » использованы специальные символы « и ». Таблица всех специальных символов HTML

Пример нумерованного списка

<ol>
    <li>Гоголь Н.В.
        <ol>
            <li>&laquo;Ревизор&raquo;</li>
            <li>&laquo;Тарас Бульба&raquo;</li>
            <li>&laquo;Мертвые души&raquo;</li>
        </ol>
    </li>
    <li>Толстой Л.Н.
        <ol>
            <li>&laquo;Война и мир&raquo;</li>
            <li>&laquo;Анна Каренина&raquo;</li>
            <li>&laquo;Воскресение&raquo;</li>
        </ol>
    </li>
</ol>

РЕЗУЛЬТАТ:

1. Гоголь Н.В.
   1. «Ревизор»
   2. «Тарас Бульба»
   3. «Мертвые души»
2. Толстой Л.Н.
   1. «Война и мир»
   2. «Анна Каренина»
   3. «Воскресение»

Кроме маркированных и нумерованных списков существуют списки определений, каждый элемент которых состоит из пары: термин и определение.

Для создания списка определений предназначены теги:

<dl>…</dl>	обрамление списка определений;
<dt>…</dt>	обрамление термина;
<dd>…</dd>	обрамление определения.

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

<dl>
    <dt>Гоголь Н.В. (1809 - 1852)</dt>
    <dd>
        Русский прозаик, драматург, поэт, критик, публицист, признанный одним из
        классиков русской литературы. Происходил из старинного дворянского рода
        Гоголь-Яновских.
    </dd>
    <dt>Толстой Л.Н. (1828 - 1910)</dt>
    <dd>
        Один из наиболее широко известных русских писателей и мыслителей, почитаемый
        как один из величайших писателей мира. Происходил из дворянского рода,
        известного с 1351 года.
    </dd>
</dl>
 

РЕЗУЛЬТАТ:

Гоголь Н.В. (1809 — 1852)

Русский прозаик, драматург, поэт, критик, публицист, признанный одним из классиков русской литературы. Происходил из старинного дворянского рода Гоголь-Яновских.

Толстой Л.Н. (1828 — 1910)

Один из наиболее широко известных русских писателей и мыслителей, почитаемый как один из величайших писателей мира. Происходил из дворянского рода, известного с 1351 года.

Читать дальше: Ссылки html. Тег <a>

Списки HTML уроки для начинающих академия

Пример списка HTML

Неупорядоченный список:

• Пункт
• Пункт
• Пункт
• Пункт

Упорядоченный список:

1. Первый пункт
2. Второй пункт
3. Третий пункт
4. Четвертый пункт

---

Неупорядоченный список HTML

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

Элементы списка будут помечены маркерами (маленькими черными кружками) по умолчанию:

Пример

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

---

Неупорядоченный HTML-список-Выбор маркера элемента списка

Свойство CSS list-style-type используется для определения стиля маркера элемента списка:

Значение	Описание
disc	Задание маркера элемента списка (по умолчанию)
circle	Устанавливает маркер элемента списка на окружность
square	Устанавливает маркер элемента списка в квадрат
none	Элементы списка не будут помечены

Пример — Disc

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

</ul>

Пример — Circle

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Пример — Square

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Пример — None

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

---

---

Упорядоченный список HTML

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.

По умолчанию элементы списка будут помечены цифрами:

Пример

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>M

Списки HTML

Вы здесь: Главная — HTML — HTML Основы — Списки HTML

В этой статье я Вас познакомлю Вас с созданием списков в HTML.

Собственно, как и весь HTML, создание HTML списков — это дело очень и очень простое.

Давайте с Вами сейчас создадим простую HTML-страницу. Постарайтесь это сделать, не смотря вниз статьи. То есть написать основные HTML-теги самостоятельно, так как уже пора их запомнить и строчить автоматически.

Теперь поговорим о списках.

Никаких секретов я сейчас не открою, списки — это информация, расположенная в виде:

1. Элемент списка 1.

2. Элемент списка 2.

………………………..

n. Элемент списка n.

Наличие нумерации зависит от типа списка: нумерованный или ненумерованный список.

Для начала создадим ненумерованный список. Начинается список с тега <ul>, а заканчивается, разумеется, закрывающим тегом </ul>. Элементы списка добавляются внутри тега <ul> с помощью тега

<li>.

Например, вот такой список:

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
</ul>

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

<ul>
  <li>Первый элемент
  <li>Второй элемент
</ul>

Нумерованный список отличается выводом номера элемента слева от самого элемента. Правила те же самые, что и с ненумерованным списком, но только начальный тег — это тег <ol>. Закрывающий тег, соответственно, </ol>. Вот пример нумерованного списка:

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

Посмотрите и сравните результат в браузере. Напоследок показываю код, который у Вас должен был получиться:

<html>
<head>
</head>
<body>
<ul>
  <li>Первый элемент
  <li>Второй элемент
</ul>
<ol>
  <li>Первый элемент
  <li>Второй элемент
</ol>
</body>
</html>

Вот и вся наука о списках в HTML. Напоследок скажу, что под элементом списка может подразумеваться не только элемент в виде текста, а, вообще, говоря всё, что угодно. Например, вместо текста может быть ссылка или даже изображение. Просто само форматирование будет в виде списка.

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

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

• 
  Создано 27.04.2010 17:22:49
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Списки html

Урок 8.

Этот урок сложнее предыдущего, по этому советую не отвлекаться и максимально сконцентрироваться на материале. Списки бывают четырех видов. Это нумерованные списки, маркированные, многоуровневые и списки определений. Теперь давайте разберемся с каждым в порядке очереди. Наш урок будет состоять из 4-ех частей. Поехали!

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

Нумерованные списки html используются для перечисления позиций (элементов) списка которые располагаются строго по порядку и каждый имеет свой уникальный номер.

Нумерованный список открывается с помощью тега &ltol&gt и закрывается соответственно тегом &lt/ol&gt. Каждая отдельная позиция (элемент) списка находится внутри тега &ltli&gt. Теперь давайте сами создадим нумерованный список, код будет выглядеть так:

Сохраняем внесенные изменения в Notepad и открываем файл в браузере:

По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега &ltol&gt нужно задать атрибут start и дать ему значение 5.

* С этого момента, когда мне будет нужно продемонстрировать Вам запись html кода — на рисунке будет изображен не весь код со структурой страницы, а только рассматриваемая нами часть кода. Я считаю, что сейчас Вы уже должны понимать, что теги входящие в структуру html страницы — это обязательная составляющая. Если Вы забыли — смотрите урок 4.

По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега &ltol&gt атрибут type, которому можно задавать значения 1, A, a, I, i.
1 — 1, 2, 3, 4… (задается по умолчанию)
A — A, B, C, D…
a — a, b, c, d…
I — I, II, III, IV…
i — i, ii, iii, iv…

К примеру, если мы хотим, чтобы наш список нумеровался при помощи маленьких латинских букв, то для тега &ltol&gt нужно задать атрибут type со значением a. На практике это будет выглядеть так:

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

Маркированные списки html используются для перечисления позиций (элементов) списка которые не требуют строгой нумерации и могут располагаться в произвольном порядке.

Маркированный список открывается с помощью тега &ltul&gt и закрывается соответственно тегом &lt/ul&gt. Каждая отдельная позиция (элемент) списка находится внутри тега &ltli&gt, так же как и в случае с нумерованным списком.

По умолчанию элементы списка всегда маркируются черным кружком, стиль маркировки можно изменить используя для тега &ltul&gt атрибут type, которому можно задавать значения disc, circle, square.
disc — (задается по умолчанию)
circle —
square —

Теперь давайте создадим список используя для маркировки черные квадратики (square).

Многоуровневый список html.

Многоуровневый список html — это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список «вложить» в другой обычный.

Каждый отдельный элемент списка находиться между тегами &ltli&gt и &lt/li&gt. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один список. Без наглядного примера в этом сложно разобраться, так что все внимание на рисунок:

Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список открывающийся тегом &ltol&gt и закрывающийся тегом &lt/ol&gt. Первый элемент нашего нумерованного списка открывается тегом &ltli&gt, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом &lt/li&gt, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом &lt/li&gt. Затем уже идут следующие элементы нашего основного нумерованного списка.

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

Список определений очень удобен при создании различных словарей или статей содержащих в себе много терминов.

Список определений открывается тегом &ltdl&gt и закрывается тегом &lt/dl&gt. Каждый отдельный термин заключается между &ltdt&gt и &lt/dt&gt. Далее пишется определение к термину, оно находится между тегами &ltdd&gt и &lt/dd&gt.

Сейчас мы сделаем список определений состоящий из двух терминов. Код будет следующим:

Сохраняем изменения и смотрим результат в браузере:

* Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить — это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

HTML списки

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

Маркированный список создается при помощи тега <ul>...</ul> (unordered list – неупорядоченный список). Каждый пункт такого списка прописывается в теге <li>...</li>:

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

</ul>

Результат в браузере:

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

Нумерованный список создается при помощи тега <ol>...</ol> (ordered list – упорядоченный список). Пункты в таком списке прописываются также, как и в неупорядоченном:

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

Результат в браузере

Вы можете начать нумерацию в списке с определенного числа, для этого используйте атрибут start:

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

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

Вы можете создать списки внутри списков:

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

Результат в браузере

---

Видео к уроку

Список определений | htmlbook.ru

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>. Вложение тегов для создания списка определений продемонстрировано в примере 11.5.

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

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

Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В примере 11.6 показано одно из возможных использований этого вида списка.

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

<!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=utf-8">
   <title>Список определений</title>
 </head>
 <body>
  <dl>
   <dt>Тег</dt>
     <dd>Тег — это специальный символ разметки, который применяется для 
         вставки различных элементов на веб-страницу таких как: рисунки, 
         таблицы, ссылки и др., и для изменения их вида.</dd>
   <dt>HTML-документ</dt>
     <dd>Обычный текстовый файл, который может содержать в себе текст, 
         теги и стили. Изображения и другие объекты хранятся отдельно. 
         Содержимое такого файла обычно называется HTML-код.</dd>
   <dt>Сайт</dt>
   <dd>Cайт — это набор отдельных веб-страниц, которые связаны между собой 
         ссылками и единым оформлением.</dd>
  </dl>
 </body>
</html>

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

Рис. 11.5. Вид списка определений

Как видно на картинке, текст термина прижимается к левому краю окна браузера, а его определение сдвигается вправо.