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

HTML списки

Язык гипертекстовой разметки поддерживает три типа списков, для каждого из которых используются свои теги.

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

Маркированный список содержит ненумерованные списки элементов без определенной последовательности. Для создания маркированного списка используется блочный элемент .

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Маркированный список h1> ul> li>Первый пункт списка li> li>Другой пункт списка li> li>Еще один пункт списка li> ul> body> html>

Результат

Элементы в маркированных списках по умолчанию отмечены марками (маленькие черные круги). Тем не менее, вы можете изменить стиль маркера по умолчанию для элементов списка, используя атрибут type attribute.

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> ul type="circle"> li>Пункт списка li> li>Пункт списка li> li>Пункт списка li> ul> ul type="square"> li>Пункт списка li> li>Пункт списка li> li>Пункт списка li> ul> body> html>

Результат

Вы также можете использовать свойство CSS list-style-type или list-style-image для определения типа элемента в списке.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h2>Маркированный список: h2> ul style="list-style-type: square;"> li>Прохладительные напитки li> li>Горячие напитки li> li>Мороженое li> ul> ul style="list-style-type: disc;"> li>Кока-кола li> li>Fanta li> li>Чай со льдом li> ul> ul style="list-style-type: circle;"> li>Кока-кола li> li>Fanta li> li>Чай со льдом li> ul> body> html>

Результат

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

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Нумерованный список h1> ol> li>Первый пункт нумерованного списка li> li>Второй пункт нумерованного списка li> li>Третий пункт нумерованного списка li> ol> body> html>

Результат

type=»a» или type=»I» соответственно.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h3>Нумерованный список: h3> ol> li>Персик li> li>Абрикос li> li>Банан li> li>Клубника li> ol> h3>Список с буквенной нумерацией h3> ol type="A"> li>Персик li> li>Абрикос li> li>Банан li> li>Клубника li> ol> h3>Список со строчными буквами h3> ol type="a"> li>Персик li> li>Абрикос li> li>Банан li> li>Клубника li> ol> h3>Нумерованный римскими цифрами список: h3> ol type="I"> li>Персик li> li>Абрикос li> li>Банан li> li>Клубника li> ol> h3>Нумерованный строчными римскими цифрами список h3> ol type="i"> li>Персик li> li>Абрикос li> li>Банан li> li>Клубника li> ol> body> html>

Результат

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

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Список определений: h1> dl> dt>Чай dt> dd>- горячий напиток dd> dt>Сок dt> dd>- прохладительный напиток dd> dl> body> html>

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

Для распознания данного вида списка браузером используются два вида тегов, такие как: &ltul> и &ltli> они считаться двойными тегами, так как у них есть закрывающиеся теги &lt/ul> и &lt/li>.

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста.

Но давайте посмотрим, как в коде выглядит маркированные списки:
&lthtml>
&lthead>
&lttitle>Моя первая html страница&lt/title>
&lt/head>
&ltbody>
&ltp>Фрукты&lt/p>
&ltul>
&ltli>Банан&lt/li>
&ltli>Яблоко&lt/li>
&ltli>Персик&lt/li>
&lt/ul>
&lt/body>
&lt/html>

А вот так выглядит в браузере:

2.Стандартные маркеры для маркированного списка

На изображении выше (Рис 7.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

3.Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

&lthtml>
&lthead>
&lttitle>Пример маркированного списка с маркером в виде пустого круга&lt/title>
&lt/head>
&ltbody>
&ltp>Звезды:&lt/p>
&ltul type=»circle»>
&ltli>Сириус&lt/li>
&ltli>Арктур&lt/li>
&ltli>Поллукс&lt/li>
&ltli>Бетельгейзе&lt/li>
&ltli>Солнце&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Сразу смотрим, как это выглядит в браузере:

4.Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка: &lthtml>
&lthead>
&lttitle>Пример маркированного списка с маркером в виде квадрата&lt/title>
&lt/head>
&ltbody>
&ltp>Виды птиц:&lt/p>
&ltul type=»square»>
&ltli>Ара зеленокрылый&lt/li>
&ltli>Дрозд рябинник&lt/li>
&ltli>Индейка палевая&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Обратите внимание на маркер, он стал квадратным:

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

5.Нумерованные списки в HTML (упорядоченные списки)

В отличие от предыдущего вида списков, в нумерованных списках есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно, когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега &ltol>&lt/ol>. Как это выглядит на практике:

Пример нумерованного списка:
&lthtml>
&lthead>
&lttitle>Пример стандартного нумерованного списка&lt/title>
&lt/head>
&ltbody>
&ltp>От одного до пяти:&lt/p>
&ltol>
&ltli>Первый&lt/li>
&ltli>Второй&lt/li>
&ltli>Третий&lt/li>
&ltli>Четвертый&lt/li>
&ltli>Пятый&lt/li>
&lt/ol>
&lt/body>
&lt/html>

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

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

1. Бадминтон
2. Бейсбол
3. Бокс

1. Джомолунгма
2. Чогори
3. Канченджанга

1. Summit Plummet
2. Tantrum Alley
3. Insano

1. Филиппинское море
2. Аравийское море
3. Коралловое море

1. Красный
2. Зеленый
3. Синий

6.Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз, либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

&lthtml>
&lthead>
&lttitle>Вложенный маркированный список HTML&lt/title>
&lt/head>
&ltbody>
&ltul>
&ltli>Citroen
&ltul>
&ltli>Berlingo&lt/li>
&ltli>C1&lt/li>
&ltli>C2&lt/li>
&ltli>C3 Picasso&lt/li>
&ltli>C4 Grand Picasso&lt/li>
&lt/ul>
&lt/li>
&ltli>KIA&lt/li>
&ltli>Toyota&lt/li>
&ltli>Audi&lt/li>
&ltli>Lexus&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Обратите внимание, как выглядит многоуровневый список в браузере:

Мы делали многоуровневый список с помощью маркированного (тег &ltul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры. Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
&lthtml>
&lthead>
&lttitle>Нумерованные, маркированные и многоуровневые списки в HTML&lt/title>
&lt/head>
&ltbody>
&ltul>
&ltli>Первая группа тюльпанов
&ltol>
&ltli>Первый класс
&ltul>
&ltli>Простые ранние тюльпаны&lt/li>
&lt/ul>
&lt/li>
&ltli>Второй класс
&ltul>
&ltli>Махровые тюльпаны&lt/li>
&lt/ul>
&lt/li>
&lt/ol>
&lt/li>
&lt/ul>
&lt/body>
&lt/html>

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

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

Практическое задание 1

&lth4>Неупорядоченный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>

Сохраните файл под именем 18ul.html

Практическое задание 2

Упорядоченные списки
&lthtml>
&ltbody>

&lth4>Упорядоченный список:&lt/h4>
&ltol>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ol>

&lt/body>
&lt/html>
Сохраните файл под именем 19ol.html
Практическое задание 3
Списки определений
&lthtml>
&ltbody>

&ltdl>
&ltdt>элемент 1&lt/dt>
&ltdd>описание элемента 1&lt/dd>
&ltdt>элемент 2&lt/dt>
&ltdd>описание элемента 2&lt/dd>
&lt/dl>

Сохраните файл под именем 20dl.html

Дополнительное задание по спискам:
1.Различные типы упорядоченных списков

&lth4>Список проектов с цифрами:&lt/h4>
&ltol>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с буквами:&lt/h4>
&ltol type=»A»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с буквами нижнего регистра:&lt/h4>
&ltol type=»a»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с римскими цифрами:&lt/h4>
&ltol type=»I»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с римскими цифрами в нижнем регистре:&lt/h4>
&ltol type=»i»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

Сохраните файл под именем 21ol.html

2.Различные типы неупорядоченных списков

&lth4>Список со значком кругом:&lt/h4>
&ltul type=»disc»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

&lth4>Список со значком окружностью:&lt/h4>
&ltul type=»circle»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

&lth4>Список со значком квадратом:&lt/h4>
&ltul type=»square»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

Сохраните файл под именем 22ul.html

3.Вложенный список

&lth4>Вложенный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltul>
&ltli>элемент 2.1&lt/li>
&ltli>элемент 2.2&lt/li>
&lt/ul>
&ltli>элемент 3&lt/li>
&lt/ul>

&lth4>Вложенный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltul>
&ltli>элемент 2.1&lt/li>
&ltli>элемент 2.2&lt/li>
&ltul>
&ltli>элемент 2.2.1&lt/li>
&ltli>элемент 2.2.2&lt/li>
&lt/ul>
&lt/li>
&lt/ul>
&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>

Сохраните файл под именем 23vlog.html

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

&lth4>Список определений:&lt/h4>
&ltdl>
&ltdt>элемент 1&lt/dt>
&ltdd>описание элемента 1&lt/dd>
&ltdt>элемент 2&lt/dt>
&ltdd>описание элемента 2&lt/dd>
&lt/dl>

Сохраните файл под именем 24dl.html

Задание для самостоятельной работы № 1

1.Составить HTML-кода для предложенной страницы.
2.Предусмотреть заголовки, абзацы, списки, а также горизонтальные линии.

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

Написать в поддержку

Помощь онлайн

Проверить домен

Войти Валюта:

HTML: создание нумерованных и маркированных списков

09 июня

3317

Комментариев: 0

Разберемся как создать два вида списков в HTML, без которых невозможно представить работу с текстом.

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

, в котором каждый пункт начинается с тега
. Например:

Обратите внимание на то, что маркеры могут быть нескольких видов:

Круг

Окружность

Квадрат

Список в браузере:

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

. Каждый пункт начинается с тега
:

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

• Прописные латинские буквы (A, B, C, . ): .
• Строчные латинские буквы (a, b, c, . ): .
• Прописные римские числа (I, II, III, . ): .
• Строчные римские числа (i, ii, iii, . ): .

Арабские числа

Прописные латинские буквы

Строчные латинские буквы

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

Строчные римские числа

Список в браузере:

Также рекомендуем почитать:

Как подключить CSS к HTML HTML: создание кнопок HTML: построение графиков и диаграмм HTML: создание заголовков HTML: форматирование текста HTML: создание переключателей и чекбоксов HTML: добавление метатегов

• Блог
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• RSS

Популярное в категории

Июнь

77778

Июнь

68389

Октябрь

56094

Март

44443

Сентябрь

37638

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

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

• Объединение фрагментов информации в единую структуру для придания удобочитаемого вида.
• Описание сложных пошаговых процессов.
• Расположение информации в стиле оглавления, пункты которого указывают на соответствующие разделы документа.

В HTML предусмотрены элементы для разметки трех типов списков:

1. маркированный – набор пунктов, очередность которых неважна;
2. нумерованный – перечень, в котором последовательность элементов имеет значение;
3. определений – состоит из пар «имя / значение».

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

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

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

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

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

• disc – маркеры отображаются закрашенными кружками (значением по умолчанию);
• circle – маркеры отображаются не закрашенными кружками;
• square – маркеры отображаются закрашенными квадратиками.

Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором – circle, на третьем и далее – square.

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

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

Для создания нумерованного списка следует использовать тег-контейнер ol>…ol>, внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа. Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тегом li>.

Тег ol> имеет атрибуты type и start. Атрибут type используется для задания вида нумерации списка. Он может принимать следующие значения:

А – задает маркеры в виде прописных латинских букв;
а – задает маркеры в виде строчных латинских букв;
I – задает маркеры в виде больших римских цифр;
i – задает маркеры в виде маленьких римских цифр;
1 – задает маркеры в виде арабских цифр (значение по умолчанию).

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

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

Изменение вида нумерации списка и значений номеров допустимо производить и для любого элемента списка. Тег li> для нумерованных списков разрешает использовать атрибуты type и value. Атрибут type может принимать такие же значения, как и для тега ol>.

Значение атрибута value тега li> позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов. Типичным применением являются списки с пропуском некоторых элементов.

Листинг 4. Пример использования маркированных и нумерованных списков.

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

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

Списки определений задаются с помощью тега-контейнера dl>. Внутри контейнера тегом dt> помещается определяемый термин, а тегом dd> – его определение. Для тегов dt> и dd> можно не записывать соответствующие закрывающие теги.

В общем, список определений записывается следующим образом:

В тексте после тега dt> не могут использоваться элементы уровня блока, такие как, например, теги абзаца p> или заголовков h1>…h6>. Как правило, текст определяемого термина должен располагаться в одной строке. Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо. После тега dd> могут располагаться элементы уровня блока. Отсюда следует, что списки определений могут быть вложенными.

Листинг 5. Пример списков определений.

С помощью таблицей стилей можно изменить внешний вид списков.