Какие типы списков поддерживает язык html

Списки

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

В HTML существует три вида списков:

• маркированный (неупорядоченный) список;
• нумерованный (упорядоченный) список;
• список описаний.

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

(от англ. Unordered List), а каждый пункт списка начинается с элемента
(от англ. List Item), как показано ниже.

• Первый пункт
• Второй пункт
• Третий пункт

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

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

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

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

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

можно вкладывать в другой, опять же, внутрь
(пример 2).

Пример 2. Вложенные списки

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

Рис. 2. Вложенные списки

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

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

(от англ. Ordered List), который и применяется для создания списка. Каждый пункт нумерованного списка обозначается элементом
, как показано ниже.

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

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

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

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

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

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

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

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

. Его возможные значения приведены в табл. 1.

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

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

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

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

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

Для value есть два вполне логичных условия использования:

• значение value должно быть целым числом;
• value можно добавлять только к
• внутри списка
  .

В примере 5 показано использование атрибута value для создания обратной нумерации.

Пример 5. Атрибут value

Джентльмены удачи (1971) Бриллиантовая рука (1968) В бой идут одни «старики» (1973) Операция «Ы» и другие приключения Шурика (1965) Иван Васильевич меняет профессию (1973)

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

Рис. 5. Обратный список

можно добавить атрибут reversed , как показано в примере 6.

Пример 6. Обратный список

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

Рис. 6. Обратный список

Атрибут reversed не поддерживается браузерами IE и Edge.

Список описаний

Список описаний состоит из двух элементов — термина и его описания. Сам список задаётся с помощью элемента (от англ. Description List), термин — элементом (от англ. Definition Term), а его описание — с помощью элемента (от англ. Description). Вложение элементов для создания списка продемонстрировано в примере 7.

Пример 7. Общая структура списка описаний

Первый термин

Описание первого термина

Второй термин

Описание второго термина

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

Пример 8. Создание списка описания

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

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

Рис. 7. Вид списка описаний

Как видно на картинке, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

HTML списки

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

• Нумерованный (упорядоченный) список.
• Маркированный (неупорядоченный) список.
• Список описаний.
• Список контекстных меню.

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

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега (элемент списка).

Давайте рассмотрим примеры использования:

Выглядеть на странице это будет соответственно так:

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

start = «101»>

Выглядеть на странице это будет соответственно так:

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

Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию ( «A» – большие, «a» – строчные), либо нумерацию из римских цифр ( «I» – в верхнем регистре, «i» – в нижнем регистре).

Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

   Пример использования атрибута type HTML тега  type = "A"> Первый пункт Второй пункт Третий пункт  type = "a"> Первый пункт Второй пункт Третий пункт  type = "I"> Первый пункт Второй пункт Третий пункт  type = "i"> Первый пункт Второй пункт Третий пункт   

Результат нашего примера:

Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a» ), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4» , будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным ( «27» = «AA», «28» = «AB», «29» = «AC». ). Значения должны быть целочисленными, допускается использование отрицательных значений.

Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка ):

Выглядеть на странице это будет соответственно так:

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

   

   Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.

   Выглядеть на странице это будет соответственно так:

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

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

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

   Давайте рассмотрим примеры использования:

   Выглядеть на странице это будет соответственно так:

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

   Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:

   Атрибут	Значение
   list-style-type:none	Убирает маркер.
   list-style-type:disc	Маленький черный круг. Это значение по умолчанию.
   list-style-type:circle	Круг пустой внутри.
   list-style-type:square	Маркер в виде квадрата.

   Ниже приведен пример использования стилей CSS внутри маркированного списка:

   Результат нашего примера:

   

   Обращаю Ваше внимание, что допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка ) при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:

   • Первый пункт
     • Первый пункт
       • Первый пункт
         • Первый пункт
         • Второй пункт
         • Третий пункт

         Список описаний

         Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.

         Рассмотрим пример использования:

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

         

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

         Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.

         Список контекстных меню

         

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

         

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

         Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
         	Нет	8.0	Нет	Нет	Нет	Нет

         Рассмотрим пример для расширения кругозора:

            Пример использования тега  contextmenu = "testmenu"> Кликни по мне правой кнопкой мыши.  type = "context" id = "testmenu">  label = "like">  label = "dislike"> 

Кликни по мне правой кнопкой мыши.