Ненумерованный список html: Списки | htmlbook.ru

Содержание

1. Что такое маркированные списки (Unordered Lists)

Смотрите видеоурок Что такое маркированные HTML-списки (Unordered List) и нумерованные списки (Ordered Lists)

Что такое маркированные HTML-списки (Unordered List)

Маркированный список или Unordered List — это HTML список пункты которого отмечены каким-либо символом, обычно символом BULLET (пуля). 

Самый простой и наглядный пример маркированного списка — это содержание книги или меню сайта с категориями и подкатегориями

В HTML для создания маркированного списка обычно используется специальных тег <ul>.

И давайте сразу рассмотрим простой пример:

В HTML-тег <ul> мы поместили HTML-тег <li>. Каждый новый пункт маркированного списка — это новый тег <li>.

Маркированные списки могут быть многоуровневыми. Посмотрите пример ниже:

Каждый новый уровень маркированного списка находится на уровне тега <li> и вместо тега <li> мы помещаем тег <ul>, тем самым, мы создаем вложенности. Вложенностей маркированного списка <ul> может быть сколько угодно. 

Очень часто маркированные списки <ul><li> используются для создании навигации (меню сайта), ведь такие списки выглядят понятно и легко читаются, а также стилизуются с помощью CSS-стилей. 

А стилизовать маркированный список вы можете с помощью CSS-свойства list-style-type, если по каким-то причинам вам не подходит стандартный значок слева bullet (пуля).

Что такое нумерованные HTML-списки (Ordered List)

Единственное отличие нумерованных списков или Ordered Lists от маркированного списка (Unordered Lists) заключается в том, что каждый пункт имеет номер от 1 до бесконечности. 

Для того, чтобы создать нумерованный список, вам необходимо в HTML-тег <ol> поместить HTML-теги <li>. как в примере ниже:

И конечно ваш нумерованный список может иметь бесконечную вложенность. Посмотрите пример нумерованного списка с вложенностью ниже:

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

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

Атрибут reversed для нумерованного списка позволяет сортировать цифры в обратном порядке.

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

А с помощью атрибута type вы можете задавать типы, которые будут заданы вместо арабских цифр. Например, вместо арабских цифр вы можете задавать буквы алфавита (a, b, c и т.д.) или римские цифры и буквы в разных регистрах.

Посмотрите на примеры атрибутов нумерованного HTML-списка ниже:

И вместо атрибутов вы конечно же можете использовать специальные CSS-свойства для стилизации нумерованных списков, такие как list-style-type или короткую запись list-style:

Вывод

Маркированные списки (Unordered Lists) и нумерованные списки (Ordered Lists) могут быть очень полезными при создании верстки веб-сайтов. 

С вами был Сергей Никонов

Увидимся в следующем уроке!

Списки html

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

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

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

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

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

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

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

По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега

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

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

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

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

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

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

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

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

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

Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список открывающийся тегом

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

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

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

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

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

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

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

Создание списков в HTML | список тегов html

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали выравнивание текста в html. В данной статье я хочу рассказать о создании списков в HTML. Создать списки достаточно просто. Сразу скажу, что списки бывают двух видов: нумерованные списки и ненумерованные списки.
Нумерованные списки создаются с помощью тега <ol>,а ненумерованные с помощью тега <ul>. Данные теги являются парными, т.е. у них есть закрывающиеся теги: </ol> и </ul>. Тегом <li> задается элемент списка.Перейдём к примеру, создадим нумерованный список:

<html>
<head>
<meta charset="utf-8"/>
<title>Создание нумерованного списки</title>
</head>
<body>
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
</body>
</html>

Для задания внешнего вида маркеров нумерованного списка используется атрибут type. Существует несколько видов маркеров:

1. type=»1″ — нумерация, которая используется по умолчанию,
2. type=»A» — нумерация обозначается большими латинскими буквами,
3. type=»a» — нумерация обозначается строчными (маленькими) латинскими буквами,
4. type=»I» — нумерация римскими цифрами в верхнем регистре,
5. type=»i» — нумерация римскими цифрами в нижнем регистре.

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

<ol start="3">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>

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

<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>

Теперь вместо цифр, напротив элементов списка, будут черные кружечки.

Для задания внешнего вида маркеров ненумерованного списка также используется атрибут type. Всего существует три вида маркеров:

• type=»disk» — маркер в виде закрашенного круга (используется по умолчанию),
• type=»circle» — маркер в виде незакрашенного круга,
• type=»square» — маркер в виде закрашенного квадрата.

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

1) Создать нумерованный список, состоящий из трех элементов, элементами которого являются ссылки на сайты Яндекса, Гугла и Рамблера.
2) Создать ненумерованный список, состоящий из трех элементов, элементами которого являются картинки, например, 3 ваших любимых марки автомобилей.

На этом можно было бы и закончить статью, но хотел бы рассказать о том, о чем многие забывают. Это список определений.
Список определений состоит из термина и его определения. Список определений создается с помощью тега <dl>. Термин с помощью тега <dt>, определение с помощью тега <dd>. Все эти теги являются закрывающимся.
Чтобы вам было проще понять сразу приведу наглядный пример:

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

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

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Не нумерованный список. Маркированный и нумерованный список HTML. Форматирование маркированных списков

Пример 1. Изменение нумерации списка

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

Первый элемент списка в данном примере будет начинаться с римской цифры IV, поскольку указан атрибут start=»4″ , затем идет номер V, а последний элемент следует не по порядку и назначается номером X (рис. 1).

Рис. 1. Римские цифры в списке

Написание чисел

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 2 или нечто подобное.

Рис. 2. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью свойств content и counter-increment . Вначале для селектора ol требуется задать counter-reset : item , это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счётчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none .

Свойство content, как правило, работает в сочетании с псевдоэлементами ::after и ::before . Так, конструкция li::before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 2).

Пример 2. Создание своей нумерации

Li::before { content: counter(item) «) «; /* Добавляем к числам скобку */ counter-increment: item; /* Задаём имя счетчика */ }

Свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. counter-increment необходим для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item . Окончательный код показан в примере 3.

Пример 3. Изменение вида списка

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

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

Content: «[» counter(item) «] «;

Список с русскими буквами

Нумерованный список есть с латинскими буквами, а вот русских букв для списка нет. Их можно добавить искусственно, воспользовавшись вышеприведённым приёмом. Поскольку нумерация делается через стили, сам список остаётся исходным, к нему лишь добавляется выбранный класс, назовём его cyrilic (пример 4).

Пример 4. Код для создания списка

1. Один
2. Два
3. Три

Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content . Поскольку в каждой строке должна быть своя буква, воспользуемся псевдоклассом :nth-child(1) , в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — В и т. д. Весь этот набор добавляется к селектору li следующим образом (пример 5).

Пример 5. Применение псевдокласса:nth-child

Cyrilic li:nth-child(1)::before { content: «а)»; } .cyrilic li:nth-child(2)::before { content: «б)»; } .cyrilic li:nth-child(3)::before { content: «в)»; }

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

Окончательно настраиваем выравнивание и положение букв, по желанию указываем размер шрифта, цвет и другие параметры (пример 6).

Пример 6. Список с русскими буквами

1. Борщ
2. Котлеты из щуки
3. Кулебяка
4. Грибы в сметане
5. Блины с икрой
6. Квас

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

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

Самый простой — перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.

Чтобы его создать, нужно использовать всего два тега: и