Как выглядит маркированный список. Маркированный список в HTML

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

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

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

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

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

- квадрат
- диск
- окружность

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

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

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

1. первый элемент
2. второй элемент
3. последний элемент

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

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

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

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

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

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

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

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

Отдел маркетинга

Данный отдел занимается продвижением товаров и услуг

Финансовый отдел

Данный отдел занимается всеми финансовыми операциями

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

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

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

Смешанный список

НОВОСТЬ ДНЯ

Сегодня идет дождь

Дождь будет идти весь день

НОВОСТЬ НОЧИ

Ночью будет идти дождь

Завтра начнется новый день

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

, который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом
1. , как показано ниже.
   1. Первый пункт
   2. Второй пункт
   3. Третий пункт

   Если не указывать никаких дополнительных атрибутов и просто написать тег

   , то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в примере 11.3.

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

   Работа со временем

   1. создание пунктуальности (никогда не будете никуда опаздывать);
   2. излечение от пунктуальности (никогда никуда не будете торопиться);
   3. изменение восприятия времени и часов.

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

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

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

   В качестве нумерующих элементов могут выступать следующие значения:

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

   Для указания типа нумерованного списка применяется атрибут type тега

   . Его возможные значения приведены в табл. 11.2.
   Табл. 11.2. Типы нумерованного списка

   Тип списка	Код HTML	Пример
   Арабские числа		1. Чебурашка 2. Крокодил Гена 3. Шапокляк
   Прописные буквы латинского алфавита		A. Чебурашка B. Крокодил Гена C. Шапокляк
   Строчные буквы латинского алфавита		a. Чебурашка b. Крокодил Гена c. Шапокляк
   Римские числа в верхнем регистре		I. Чебурашка II. Крокодил Гена III. Шапокляк
   Римские числа в нижнем регистре		i. Чебурашка ii. Крокодил Гена iii. Шапокляк

   Чтобы начать список с определенного значения, используется атрибут start тега

   . При этом не имеет значения, какой тип списка установлен с помощью type , атрибут start одинаково работает и с римскими и с арабскими числами. В примере 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

   Пример 11.4. Нумерация списка

   8. Король Магнум XLIV
   9. Король Зигфрид XVI
   10. Король Сигизмунд XXI
   11. Король Хусбрандт I

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

   

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

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

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

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

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

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

   Простые списки выглядят вот так

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

   4. , то автоматически перед ним ставит
   .

   Таким образом, списки можно делать так, как показано ниже.

   

   Но с точки зрения профессионалов это некорректно.

   

   Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.

   В нет цифр или букв - только различные символы, которые называются маркерами.

   

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

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

   

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

   

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

   Для нумерованных указываем алфавит или тип цифр, а для остальных случаев - тип маркера.

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

   Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.

   

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

   Для нумерованных списков нужно использовать следующие варианты:

   • 1 - арабские цифры;
   • A - заглавные ;
   • a - строчные латинские буквы;
   • I - заглавные римские цифры;
   • i - строчные римские цифры.

   По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type="1".

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

   

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

   

   Оформление списков

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

   Вот примеры красивых списков.

   

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

   Создать обычный список можно вот так.

   

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

   

   Рассмотрим сначала вариант с круглым оформлением списка. Вернитесь к коду списка. Там указан класс rounded-list. Вот именно с этим классом нужно повозиться, чтобы сделать такую красоту. Назвать класс вы можете как хотите.

   

   

   

   Теперь рассмотрим квадратное оформление.

   

   Стили весьма похожи. Разница в том, что в первом случае происходит округление элемента посредством возможностей css.

   Профессиональный верстальщик должен предвидеть и понимать, что не все пользователи используют современные компьютеры. Не у всех установлены Windows 7, 8, 10. Существует процент пользователей, кто до сих пор сидит на Windows XP и использует старые версии браузера Internet Explorer.

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

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

   Делайте что-то подходящее для всех или учитывайте все варианты браузеров.

   - 4.5 out of 5 based on 2 votes

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

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

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

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

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

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

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

     • Вариант такой
     • Вариант сякой
     • Вариант эдакий

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

     

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

     есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:
     • disc - круг;
     • circle - окружность;
     • square - квадрат.

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

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

     • Вариант такой
     • Вариант сякой
     • Вариант эдакий

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

     

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

     • Вариант такой
     • Вариант сякой
     • Вариант эдакий

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

     

     Атрибут type можно применять не только к тегу

     , но и к тегу
     • . Таким образом можно создать список с разнообразными маркерами.
       • Вариант такой
       • Вариант сякой
       • Вариант эдакий

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

       

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

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

       и вложенных в его тегов

       1. 1. Первая строчка
          2. Вторая строчка
          3. Третья строчка

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

          

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

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

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

          Вид списка:

          Вид списка:

          

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

          Вид списка:

          

          Вид списка:

          

          Вид списка:

          

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

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

          . Тег

          создает контейнер для списка, тег

          устанавливает термин, а тег

          описание или определение термина.

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

          Термин 1

          Определение термина 1

          Термин 2

          Определение термина 2

          Термин 3

          Определение термина 3

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

          

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

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

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

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

          • Вариант такой
            1. Первая строчка
            2. Вторая строчка
            3. Третья строчка
          • Вариант сякой
            1. Первая строчка
            2. Вторая строчка
            3. Третья строчка
          • Вариант эдакий
            1. Первая строчка
            2. Вторая строчка
            3. Третья строчка

          Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.

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

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

          Html списки

          1. кошки
          2. собаки
          3. лошади

          Результат:

          1. кошки
          2. собаки
          3. лошади

          Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type :

          - type="A" - нумерация заглавными латинскими буквами (A, B, C).

          - type="a" - нумерация прописными латинскими буквами (a, b, c).

          - type="I" - нумерация большими римскими цифрами (I, II, III) .

          - type="i" - нумерация маленькими римскими цифрами (i, ii, iii).

          Пример кода с римскими цифрами:

          Html списки

          1. кошки
          2. собаки
          3. лошади

          Результат:

          1. кошки
          2. собаки
          3. лошади

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

          Пример кода:

          Html списки

          1. кошки
          2. собаки
          3. лошади

          Результат:

          1. кошки
          2. собаки
          3. лошади

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

          Пример кода:

          Html списки

          1. красный
          2. оранжевый
          3. желтый
          
          ...............
          4. фиолетовый

          Результат:

          1. красный
          2. оранжевый
          3. желтый
          
          ...............
          4. фиолетовый

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

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

          Пример кода для маркированного списка:

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

          • кошки
          • собаки
          • лошади

          Результат:

          • кошки
          • собаки
          • лошади

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

          - type="disc" - закрашенный кружочек.

          - type="circle" - пустой кружочек.

          - type="square" - закрашенный квадратик.

          Пример кода для маркированных списков:

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

          • кошки
          • собаки
          • лошади

          • кошки
          • собаки
          • лошади

          • кошки
          • собаки
          • лошади

          Результат:

          • кошки
          • собаки
          • лошади

          • кошки
          • собаки
          • лошади

          • кошки
          • собаки
          • лошади

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

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

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

          , а их определения - в теги

          .

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

          Списки определений Термин 1 Определение термина 1 Термин 2 Определение термина 2

          Результат:

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

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

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

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

          • Животные
            1. кошки
            2. собаки
          • Растения
            1. деревья
            2. цветы