Какой тег обеспечивает создание маркированного списка

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

, а каждый пункт списка начинается с тега
, как показано ниже.

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

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

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

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

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

. Допустимые значения приведены в табл. 11.1

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

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

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

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

Рис. 11.2. Вид списка с квадратными маркерами

HTML по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

Списки в HTML

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

В языке HTML используются основные типы списков:

• маркированный;
• нумерованный;
• список определений.

При организации различных списков используют теги: , , , , . Различные типы списков помогают реализовать много разных возможностей.

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

Определение 1

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

Статья: Списки в HTML

Поможем написать реферат за 48 часов

Последнее название используют как формальный перевод названия тега , который и организует списки подобного типа в HTML-документах (UL — Unordered List, неупорядоченный список).

Чтобы выделить в маркированном списке элементы используют специальные символы, которые называются маркерами списка (другое название «буллеты» от английского термина bullet — пуля). Маркеры бывают разного вида, который определяет браузер.

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

Все элементы списка начинаться с тега (LI — List Item, элемент списка). При использовании тега не нужен соответствующий закрывающий тег. Браузер, как правило, отображая документ, начинает все новые элементы списка с новой строки.

«Списки в HTML» ��
Помощь эксперта по теме работы
Решение задач по учебе за 24 часа
Реферат по этой теме за 48 часов

На рисунке 1 приведен пример HTML-документа, в котором используется маркированный список, и само отображение списка браузером.

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

Рис. 1. Программный код и изображение в браузере маркированного списка

Тег может содержать 2 параметра: COMPACT и TYPE.

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

Параметр TYPE принимает значения: disc, circle и square. Его применяют при принудительном задании вида маркеров списка. Конкретный вид маркера зависит от используемого браузера. Типичные варианты отображения:

• TYPE = disc — маркеры в виде закрашенных кружков;
• TYPE = circle — маркеры в виде не закрашенных кружков;
• TYPE = square — маркеры в виде закрашенных квадратиков.

Пример записи: . По умолчанию используется TYPE = disc. Для вложенных маркированных списков на 1 уровне по умолчанию используется значение disc, на 2 — circle, на 3 и далее — square. Те же значения параметра TYPE употребляются для определения вида маркеров отдельных элементов списка. Например: .

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

Представляет другой тип списков языка HTML. Другими словами его называют упорядоченным. Последнее название представляет собой формальный перевод названия тега (OL — Ordered List, упорядоченный список).

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

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

На рисунке 2 приведен пример HTML-документа с нумерованным списком и его отображение в браузере.

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

Наиболее яркие звезды, видимые с Земли:

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

, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).

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

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

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

Рис. 2.1. Отображение браузером маркированного списка

Примечание

В некоторых учебниках по языку HTML встречается указание, что для задания заголовка списка следует применять тег-контейнер (LH — List Header, заголовок списка). В настоящее время этот тег не распознается ни одним из распространенных браузеров и не входит в спецификацию HTML. Таким образом, его применение становится бессмысленным, хотя и не приведет к каким-либо ошибкам.

могут быть указаны два параметра: COMPACT и TYPE.

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

Примечание

никак не влияет на отображение списков ведущими браузерами. Поэтому применение данного параметра бессмысленно, тем более что его употребление не рекомендуется спецификацией HTML 4. 0 .

Параметр TYPE может принимать следующие значения: disc, circle и square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:

TYPE = disc — маркеры отображаются закрашенными кружками; TYPE = circle — маркеры отображаются не закрашенными кружками; TYPE = square — маркеры отображаются закрашенными квадратиками. Пример записи: .

Значением, используемым по умолчанию, является TYPE = disc. Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором — circle, на третьем и далее — square. Именно так делается в последних версиях браузеров Netscape и Internet Explorer. Заметим, что иные браузеры могут иначе отображать маркеры. Например, в спецификации HTML 4.0 для вида маркера, отображаемого при значении TYPE = square, указывается незакрашенный квадратик (square outline).

Примечание

Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.

Графические маркеры списка

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

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

Списки — Основы верстки контента

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

• Маркированные;
• Нумерованные;
• Списки определений.

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

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

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

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

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег — сокращение от List Item. Так браузер отделяет списки друг от друга.

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

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

Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

 Теги в HTML  Параграфы Списки  Маркированные; Нумерованные; Списки определений.    

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

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

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

— сокращение от Ordered List. Примером такого списка может служить список дел на день.

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке Лечь спать  

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

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке  Купить цветы Купить конфеты   Лечь спать  

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

С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

В качестве контейнера для списков определений используется тег от английского Definition List, внутри которого не привычная схема , а система из двух тегов:

1. — термин. От английского Definition Term;
2. — определение От английского Definition Description.

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

  HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей  

Стилизация списков

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

Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .

Изменять маркер можно одним из двух способов:

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

В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.

Картинка в качестве маркера списка

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

Чтобы установить маркер в виде своего изображения, используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:

.list-image  list-style-image: url("./good.png"); > 

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: