Html маркированные списки – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML — Вебджем.рф

Содержание

Виды списков в HTML, маркеры

В языке разметки html различают 3 вида списков — упорядоченные (нумерованные), неупорядоченные (ненумерованные) и списки определений (definition list).

Содержание статьи

Маркированный (неупорядоченный) список — unordered list

Для построения такого списка нужны 2 вида элементов: ‘ul’ (сокращение от unordered list, т.е. неупорядоченный список) и ‘li’ (элемент списка). Все, что написано внутри ‘li’, помечается маркером.

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

Типы маркеров

Есть специальный атрибут type, который ставится в обоих элементах списка. Это тип вашего маркера. Всего 3 типа: окружность, диск и квадрат:

<ul type="square"> - квадрат
<ul type="disc"> - диск
<ul type="circle"> - окружность

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

Нумерованный список (ordered list)

Для построения списка также нужно 2 элемента: ‘ol’ и ‘li’ (элемент списка). Маркеры заменяются на цифры с точкой. Пример простого списка:

<ol>
<li>первый элемент</li>
<li>второй элемент</li>
<li>последний элемент</li>
</ol>

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

Типы нумерации

Есть специальный атрибут type, который ставится в элементе ‘ol’ или ‘li’. Это тип вашего списка. Всего 5 типов:

<ol type="1"> - Нумерация арабскими цифрами (1, 2, 3)
<ol type="A"> - Нумерация прописными буквами (A, B, C)
<ol type="a"> - Нумерация строчными буквами (a, b, c)
<ol type="I"> - Нумерация большими римскими цифрами (I, II, III)
<ol type="i"> - Нумерация малыми римскими цифрами (i, ii, iii)
<ol start="5"> - С какой цифры начать нумерацию

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

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

Список определений был разработан для словарных статей.

Есть общий контейнер ‘dl’. Внутри него стоят ‘dt’ (definition termin — термин) и ‘dd’ (definition description — описание). Простейший пример:

<dl>
<dt>Отдел маркетинга</dt>
<dd>Данный отдел занимается
продвижением товаров и услуг</dd>
<dt>Финансовый отдел</dt>
<dd>Данный отдел занимается всеми
финансовыми операциями</dd>
</dl>

Все элементы всех списков — блочные. Но внутри элемента ‘dt’ можно ставить только строчные элементы. В элементы ‘dd’ и ‘li’ можно ставить все, что угодно. Отсюда появляются вложенные списки.

Вложенные (смешанные списки)

Это многоуровневые списки, внутри которых есть иерархия. Часто такие списки применяются при построении карты сайта. Пример:

<dl><b>Смешанный список<b>
<dt><i>НОВОСТЬ ДНЯ</i>
<dd>
<li>Сегодня идет дождь
<li>Дождь будет идти весь день
<dt><i>НОВОСТЬ НОЧИ</i>
<dd>
<li>Ночью будет идти дождь
<li>Завтра начнется новый день
</dl>

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

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

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

В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

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

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

Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса

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

Рис. 11.1. Вид маркированного списка

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

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

Тип списка	Код HTML	Пример
Список с маркерами в виде круга		Первый Второй Третий
Список с маркерами в виде окружности		Первый Второй Третий
Список с квадратными маркерами		Первый Второй Третий

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

Создание списка с квадратными маркерами показано в примере 11.2.

Пример 11.2. Вид маркеров

Изменение убеждений

изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение — иудаизм и мусульманство вместе;
изменение веры в непогрешимость любимой партии;
убеждение в том, что инопланетяне существуют;
предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).

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

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

Типы маркеров

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

Нумерованный список (ordered list)

первый элемент
второй элемент
последний элемент

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

Типы нумерации

Есть специальный атрибут type, который ставится в элементе ‘ol’ или ‘li’. Это тип вашего списка. Всего 5 типов:

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

Список определений был разработан для словарных статей.

Отдел маркетинга: Данный отдел занимается продвижением товаров и услуг
Финансовый отдел: Данный отдел занимается всеми финансовыми операциями

Вложенные (смешанные списки)

НОВОСТЬ ДНЯ: Сегодня идет дождь
Дождь будет идти весь день
НОВОСТЬ НОЧИ
Ночью будет идти дождь
Завтра начнется новый день
НОВОСТЬ НОЧИ: Ночью будет идти дождь
Завтра начнется новый день

Доброго времени суток!

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

Данная статья — третья в данн

Маркированный список в HTML. Списки в HTML — маркированный список — нумерованный список — список определений

— 4.5 out of 5 based on 2 votes

Очень часто определенную информацию на сайте необходимо представить в виде списков.

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

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

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

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

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

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

Как сделать маркированный список в HTML

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

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

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

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

Давайте сделаем простой список — перечислим уровни подготовки программистов, которым подойдёт книга:

...
<p>
    Текст про книгу 1
</p>
<p>
    Книга подойдёт для:
</p>
<ul>
    <li>Начинающих</li>
    <li>Середнячков</li>
    <li>Опытных</li>
</ul>
...

В браузере это будет выглядеть так:

На этом с маркированным списком всё. В следующем уроке поговорим про нумерованный список.

Списки в HTML — маркированный список — нумерованный список — список определений

Очень часто определенную информацию на сайте необходимо представить в виде списков.

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

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

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

<UL>
<LI>Вариант такой</LI>
<LI>Вариант сякой</LI>
<LI>Вариант эдакий</LI>
</UL>

Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:

Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега <UL> есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:

disc — круг;
circle — окружность;
square — квадрат.

Значение disc используется по умолчанию.

Пример создания маркированного списка с маркерами в виде окружности:

<UL type="circle">
<LI>Вариант такой</LI>
<LI>Вариант сякой</LI>
<LI>Вариант эдакий</LI>
</UL>

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

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

<UL type="square">
<LI>Вариант такой</LI>
<LI>Вариант сякой</LI>
<LI>Вариант эдакий</LI>
</UL>

Список будет иметь вид:

Атрибут type можно применять не только к тегу <UL>, но и к тегу <LI>. Таким образом можно создать список с разнообразными маркерами.

<UL>
<LI type="disc">Вариант такой</LI>
<LI type="circle">Вариант сякой</LI>
<LI type="square">Вариант эдакий</LI>
</UL>

В результате получится следующее:

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

Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега <OL> и вложенных в его тегов <LI>

<OL>
<LI>Первая строчка</ LI>
<LI>Вторая строчка </LI>
<LI>Третья строчка </LI>
</OL>

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

По умолчанию нумерация производится арабскими цифрами. Но у тега <OL> есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре.

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

Нумерация арабскими цифрами:

<OL type="1">
<li>...</li>
</OL>

Вид списка:

Нумерация заглавными латинскими буквами:

<OL type="A">
<li>...</li>
</OL>

Вид списка:

Нумерация строчными буквами латинского алфавита:

<OL type="a">
<li>...</li>
</OL>

Вид списка:

Нумерация римскими цифрами в верхнем регистре:

<OL type="I">
<li>...</li>
</OL>

Вид списка:

Нумерация римскими цифрами в нижнем регистре:

<OL type="i">
<li>...</li>
</OL>

Вид списка:

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

Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов <DL><DT><DD>. Тег <DL> создает контейнер для списка, тег <DT> устанавливает термин, а тег <DD> описание или определение термина.

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

<DL>
<DT>Термин 1</DT>
<DD> Определение термина 1</DD>
<DT>Термин 2</DT>
<DD> Определение термина 2</DD>
<DT>Термин 3</DT>
<DD> Определение термина 3</DD>
</DL>

В результате получится следующий список:

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

Вложенные или многоуровневые списки в HTML.

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

Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.

<UL>
<LI>Вариант такой
<OL>
<LI>Первая строчка</ LI>
<LI>Вторая строчка </LI>
<LI>Третья строчка </LI>
</OL>
</LI>
<LI>Вариант сякой
<OL>
<LI>Первая строчка</ LI>
<LI>Вторая строчка </LI>
<LI>Третья строчка </LI>
</OL>
</LI>
<LI>Вариант эдакий
<OL>
<LI>Первая строчка</ LI>
<LI>Вторая строчка </LI>
<LI>Третья строчка </LI>
</OL>
</LI>
</UL>

Вложенный список будет иметь такой вид:

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

Материал подготовлен сайтом: WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности: Обновлено: 04 Сентябрь 2013; Создано: 28 Июнь 2011; Просмотров: 32069

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

, который содержит в себе всё отображаемое содержимое списка):

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

Кофе
Чай
Молоко

Попробовать »

Виды маркеров

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

Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type , с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

Изменение маркеров у списков:

Заголовок страницы

Нумерованный список c атрибутом type=»a»:

Яблоки
Бананы
Лимоны

Нумерованный список c атрибутом type=»I»:

Яблоки
Бананы
Лимоны

Виды маркеров маркированных списков:

Яблоки
Бананы
Лимоны

Яблоки
Бананы
Лимоны

Попробовать »

CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть .

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

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

Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

Заголовок страницы

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

Яблоки
Бананы
Лимоны

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

Яблоки
Бананы
Лимоны

Попробовать »

После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.

Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть .

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

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

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

. — это контейнер, содержащий список, элементы которого задаются тегом
.
Маркированный список
Камень
Ножницы
Бумага
По умолчанию в качестве маркера списка используется чёрный кружок (disk ). Добавив в тег атрибут type и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle ) или чёрный квадрат (square ).
От маркированного отличается тем, что порядок элементов в нём важен, а потому вместо маркера здесь используются последовательно идущие цифры или буквы. О порядке в списке заботиться не нужно: эту задачу берёт на себя браузер. Если изменить список (удалить или добавить элемент, нарушив порядок), обозреватель пересчитает его и отобразит правильно.
Для создания нумерованных списков используются теги
и
. Контейнер
определяет начало и конец списка, тег
задаёт начало и конец его элемента — всё, как в маркированном списке, только заменено на
.
Нумерованный список
Камень
Ножницы
Бумага
Так как с нумерованными списками не всегда всё так просто, для тега
создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):
1. type . Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами и
Маркированный список. HTML, XHTML и CSS на 100%
Маркированный список
Маркированные списки – это списки, в которых пункты отмечаются с помощью различных символов. Такие списки еще называют ненумерованными, или неупорядоченными, потому что для элементов данного списка последовательность неважна. Эти списки можно использовать для простого перечисления объектов или их свойств.
Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.
У элемента UL есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:
• circle – создает маркер в виде круга, белого внутри;
• square – создает маркер в виде квадрата;
• disc – создает маркер в виде круга, закрашенного черным цветом.
Маркер можно выбирать любой, на ваш взгляд наиболее соответствующий виду страницы.
В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.
Листинг 2.5. Маркированные списки
<html
<head>
<title>Списки</title>
<body>
<ul type=»circle»>
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
<ul compact type=»square» >
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
<ul compact type=»disc» >
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
</body>
</html>
Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.

Рис. 2.5. Маркированные списки
При создании маркированных списков с помощью элемента LI можно задать вид маркера отдельно для каждого пункта списка.
В листинге 2.6 приведен пример создания списка с разными маркерами для различных пунктов.
Листинг 2.6. Список с разными маркерами
<html>
<head>
<title>Списки</title>
<body>
<ul>
<li type=»circle»>Земля</li>
<li type=»circle»>Марс</li>
<li type=»square»>Солнце</li>
<li type=»circle»>Венера</li>
<li type=»disc»>Луна</li>
</ul>
</body>
</html>
Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.

Рис. 2.6. Список с разными маркерами
В примере различные маркеры отмечают объекты разных типов.
Иногда удобнее создавать свои маркеры для списков, в этом случае внешний вид списков будет намного лучше соответствовать стилю вашего сайта и вашим желаниям.
В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.
В листинге 2.7 представлен пример создания списка с графическими маркерами.
Листинг 2.7. Список с графическими маркерами
<html>
<head>
<title>Списки</title>
<body>
<ul>
<img src=»marker.jpg» />Венера<br />
<img src=»marker.jpg» />Марс<br />
<img src=»marker.jpg» />Земля<br />
</ul>
</body>
</html>
Результат обработки кода из листинга 2.7 показан на рис. 2.7.

Рис. 2.7. Список с графическими маркерами
Теперь можно использовать картинки для создания симпатичных списков, соответствующих стилю вашего сайта.
Данный текст является ознакомительным фрагментом.
Читать книгу целиком
Поделитесь на страничке
Следующая глава >

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

Виды списков в HTML, маркеры

Маркированный (неупорядоченный) список — unordered list

Типы маркеров

Нумерованный список (ordered list)

Типы нумерации

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

Вложенные (смешанные списки)

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

Типы маркеров

Нумерованный список (ordered list)

Типы нумерации

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

Вложенные (смешанные списки)

Маркированный список в HTML. Списки в HTML — маркированный список — нумерованный список — список определений

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

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

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

Как сделать маркированный список в HTML

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

Списки в HTML — маркированный список — нумерованный список — список определений

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

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

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

Вложенные или многоуровневые списки в HTML.

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

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

Виды маркеров

Нумерованный список c атрибутом type=»a»:

Нумерованный список c атрибутом type=»I»:

Виды маркеров маркированных списков:

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

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

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

Маркированный список. HTML, XHTML и CSS на 100%

Добавить комментарий Отменить ответ

Рубрики