Как создать ненумерованный список в html

Как создать ненумерованный список в html

Для создания списков в HTML5 применяются элементы <ol> (нумерованный список) и <ul> (ненумерованный список):

В нумерованном списке для нумерации элементов по умолчанию используется стандартные цифры от 1. В ненумерованном списке каждый элемент предваряется черной точкой.

При необходимости мы можем настроить нумерацию или отражаемый рядом с элементом символ с помощью стиля list-style-type . Данный стиль может принимать множество различных значений. Отметим только основные и часто используемые. Для нумерованных списков стиль list-style-type может принимать следующие значения:

decimal : десятичные числа, отсчет идет от 1

decimal-leading-zero : десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

lower-roman : строчные римские цифры, например, i, ii, iii, iv, v

upper-roman : заглавные римские цифры, например, I, II, III, IV, V…

lower-alpha : строчные римские буквы, например, a, b, c. z

upper-alpha : заглавные римские буквы, например, A, B, C, … Z

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

Для ненумерованного списка атрибут list-style-type может принимать следующие значения:

disc : черный диск

circle : пустой кружочек

square : черный квадратик

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image . Он задает изображение, которое будет отображаться рядом с элементом списка:

Стиль list-style-image в качестве значения принимает url(phone_touch.png) , где «phone_touch.png» — это название файла изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей index.html у меня находится файл изображения phone_touch.png.

Горизонтальный список

Одним из распространенных способов стилизации списков представляет создание горизонтального списка. Для этого для всех элементов списка надо установить стиль display:inline :

HTML списки

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

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

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

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

Пример

Результат

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

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

Пример

Результат

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

Пример

Результат

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

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

Каждый элемент нумерованного списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Пункты списка автоматически нумеруются.

Пример

Результат

Если вы хотите создать нумерованный список с римскими цифрами или же список, где последовательность указана буквами, то просто добавьте к элементу <ol> type=»a» или type=»I» соответственно.

Пример

Результат

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

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

Для создания списка определений используется парный элемент <dl>, в котором термины/названия мы записываем в теге <dt>, а их определения в теге <dd>.

Списки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

В повседневной жизни мы часто записываем информацию в виде списков :

• список дел на завтра
• список достопримечательностей, которые хотим посмотреть в очередной поездке
• список покупок и т.д. и т.п.

На сайтах тоже часто часть информации оформляется в виде списков. Итак, учимся делать списки в HTML!

Всего выделяют 4 вида списков:

1. Ненумерованные (неупорядоченные)
2. Нумерованные (упорядоченные)
3. Списки определений
4. Вложенные списки

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

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

Ненумерованный список — список, в котором элементы выделяются специальными маркерами – буллетами (визуально похоже на след от пули). А вот и пример ненумерованного списка:

Как сделать ненумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ul>. </ul>

<ul> — это аббревиатура от английского «Unordered List» , что в переводе означает «неупорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> . </li>

<li> — это аббревиатура от английского «List Item» , что в переводе означает «элемент списка».

Давайте посмотрим, как это работает на примере:

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

list-style-type:circle — маркер будет отображаться кружочком

list-style-type:square — будет выглядеть как квадратик

list-style-type:none — список будет без маркеров.

Посмотрим, как например будет выглядеть список с квадратиками

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

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

Так как же сделать нумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ol>. </ol>

<ol> — это аббревиатура от английского «Ordered List» , что в переводе означает «упорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> . </li>

<li> — это аббревиатура от английского «List Item» , что в переводе означает «элемент списка».

Пример упорядоченного (нумерованного) списка ниже:

По умолчанию элементы нумерованного списка помечаются арабскими цифрами (1, 2, 3, 4, 5 и т.д.). С помощью атрибута type можно это поменять:

type=»A» — строки будут нумероваться заглавными буквами

type=»a» — строчными буквами

type=»I» — заглавными римскими цифрами

type=»i» — строчными римскими цифрами

Давайте к примеру пронумеруем наш список дел римскими цифрами

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

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

Список определений, (англ Description List, тег <dl> ) включает в себя элементы, которые

• обозначают какое-то понятие, термин (description term) — тег <dt>
• описывают каждое из этих понятий (description data) — тег <dd>

Например:

Иногда в элемент списка нужно включить еще один список. HTML позволяет «вкладывать» один список в другой, при этом вложенные списки отображаются с большим отступом по сравнению с родительским списком. К тому же, для неупорядоченных (ненумерованных) списков, браузер обычно изменяет вид маркеров вложенного списка.

Вот как это выглядит:

Списки можно комбинировать между собой, например:

Смотрим как это выглядит в HTML:

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

WEBTEORETIK

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

• Главная
• О сайте
• Карта сайта
• Обратная связь

• Главная
• >>
• Раздел >> Уроки HTML
• >>
• Материал >>
• Ненумерованные списки. Тег <ul>

Ненумерованные списки. Тег <ul>

Категория: Уроки HTML Просмотров: 4319 Коментариев: 0 Дата: 2017-04-02 Добавил: admin

И так, продолжаем работу со списками, в прошлом уроке мы рассмотрели Упорядочнные списки и применение атрибутов для них. В этом уроке мы продолжим изучать списки и поговорим о неупорядоченных списках (ненумерованные списки). Этот вид списка используется так же достаточно часто, как и упорядочные списки. Разница между этими списками в том, что вместо цифр указываются черные маркеры для каждого элемента списка. Существует три вида маркеров это круг, диск и квадрат.

Для создания ненумерованного списка используется тег <ul> и его пара — закрывающийся тег </ul>, а элементы внутри так же заключаются в теги <li>. Тег <ul> является сокращением с английского языка Unsorted List и в переводе означает неупорядоченный список.

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

• Я 1-й элемент у списка
• Я 2-й элемент у списка
• Я 3-й элемент у списка
• Я 4-й элемент у списка

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

Для изменения вида маркера используется атрибут type для тега <ul>. Ниже показаны варианты изменения вида маркеров.

• Элементы списка с маркером в виде круга type=»disc»
• Элементы списка с маркером в виде окружности type=» circle»
• Элементы списка с маркером в виде квадратов type=» square»

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

Ненумерованный список по умолчанию без указания атрибута «Type»

• Я 1-й элемент у списка
• Я 2-й элемент у списка
• Я 3-й элемент у списка
• Я 4-й элемент у списка

Указвываем атрибут type=»disc».

1. Я 1-й элемент у списка
2. Я 2-й элемент у списка
3. Я 3-й элемент у списка
4. Я 4-й элемент у списка

Указвываем атрибут type=»circle».

1. Я 1-й элемент у списка
2. Я 2-й элемент у списка
3. Я 3-й элемент у списка
4. Я 4-й элемент у списка

Указвываем атрибут type=»square».

1. Я 1-й элемент у списка
2. Я 2-й элемент у списка
3. Я 3-й элемент у списка
4. Я 4-й элемент у списка

Мы и рассмотрели еще один вид списков, который очень часто используется при верстке шаблонов сайта. На этот вид списка рекомендую уделить немного больше внимания, чем на остальные. Возможно, дочитав до конца этот урок, у Вас возник вопрос, а если мне нужен совсем другой маркер, например: какая-то «птичка». Это так же возможно реализовать. Для этого берется заранее подготовленная картинка в виде нужного маркера и уже с помощь CSS таблицы стилей вставляется наш новый маркёр в список. Ну, об этом немного позже. В следующем уроке мы будем завершать со списками и рассмотрим самый редкий вид списка определения.