Ul неупорядоченные (ненумерованные) списки


Содержание
Выглядит такой список следующим образом: По умолчанию нумерация производится арабскими цифрами. Но у тега есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре. Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае. Нумерация строчными буквами латинского алфавита: Список определений в HTML. Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов . Тег создает контейнер для списка, тег устанавливает термин, а тег описание или определение термина. Записывается данный список следующим образом: Термин 1 Определение термина 1 Термин 2 Определение термина 2 Термин 3 Определение термина 3 В результате получится следующий список: Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения. Вложенные или многоуровневые списки в HTML. Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков. Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки. Вариант такой Первая строчка Вторая строчка Третья строчка Вариант сякой Первая строчка Вторая строчка Третья строчка Вариант эдакий Первая строчка Вторая строчка Третья строчка Нумерованный список Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка. Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тегом и заканчиваться тегом . Спецификация элемента OL: Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:  A – маркеры в виде прописных латинских букв;  a – маркеры в виде строчных латинских букв;  I- маркеры в виде больших римских цифр;  i- маркеры в виде маленьких римских цифр;  1- маркеры в виде арабских цифр, это значение используется по умолчанию. Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации. Спецификация элемента LI для нумерованного списка: Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1. Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов. Пример использования нумерованного списка: Города России по величине: Вот так броузер отобразит данный пример: Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом: Пример использования списка определений: Пример списка определений Состав Microsoft Office Многофункциональный текстовый процессор Программа для работы с электронными Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже. Первый пункт Второй пункт Третий пункт В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка Маркированный список Чебурашка Крокодил Гена Шапокляк Крыса Лариса
  • Атрибут type
  • Элементы списка — тег Каждый элемент в списке обворачивают в отдельную пару тегов
  • . Часто можно обойтись и без , но я бы рекомендовал придерживаться этого правила. Приведенный выше список помещен в отдельный тег , но каждый также поддерживает собственный атрибут type , и таким образом можно создать следующий список: Отступ маркированного списка Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : Неупорядоченный список Это задание архивной главы. Перейдите по ссылке, чтобы пройти актуальный курс. Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список». В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. В последующих заданиях мы будем тренироваться работать с ними. Неупорядоченные (или маркированные) списки создаются с помощью тега , который может содержать внутри себя теги , обозначающие «элемент списка». index.html Сплит-режим Список изученных тегов html head body Неупорядоченный список используется для простого перечисления объектов, когда порядок неважен. Оформление списков в CSS Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила. list-style-type Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть: disk — кружок, установлен по умолчанию. circle — окружность. square — квадрат. Для нумерованных списков свойству обычно присваиваются значения: decimal — арабские цифры, значение установлено по умолчанию. lower-roman — маленькие римские цифры. upper-roman — заглавные римские цифры. lower-alpha — строчные латинские буквы. upper-alpha — прописные латинские буквы. Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер. Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian — традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко. Пример ниже отображает три списка: нумерованный с традиционной армянской нумерацией, маркированный с окружностью и нумерованный, элементы в котором нумеруются идеографически. Цвет маркеров совпадает с цветом текста в списке, указанного свойством color. list-style-image Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png, который вы и хотите использовать, то код оформления будет следующим: list-style-position Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside), либо текст его обтекает (list-style-position: inside). В примере ниже показана разница между этими значениями. В первом случае маркер внутри списка, во втором случае он вынесен за его пределы. В результате создаётся такая страница: list-style Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел: Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен. HTML-код приведён ниже. Браузер отобразит следующую страницу. Полезные ссылки: Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML; Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа; Вёрстка сайта с нуля 2.0 — полноценный платный курс. Списки в HTML Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В HTML предусмотрено два типа списков: нумерованный и ненумерованный (маркированный). Для построения списков используются специальные теги. С основными тегами мы познакомимся в данном уроке. Давайте рассмотрим типы списков в HTML по порядку и на реальных примерах разберемся чем они отличаются, и как выводятся. Нумерованные списки в HTML Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид: В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка: 1. Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными); 2. Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными); 3. Атрибут «start» — используется для того, чтобы нумерация начиналась не с первого пункта, в качестве параметра указывается порядковый номер, с которого требуется формировать список. Пример. Нумерованный список, который формируется из римских букв и начинается со второго элемента: Маркированные списки в HTML Ненумерованные списки также называют неупорядоченными или маркированными. Для выделения элементов такого списка используются специальные символы (маркеры). Вид маркеров списка задается в HTML коде с помощью специальных атрибутов. Пример маркированного списка в HTML: В данном случае список будет формироваться из маркеров в виде жирной точки. Атрибутами ненумерованного списка являются: 1. «disc» — маркеры в виде закрашенного кружка 2. «circle» — маркеры в виде пустого кружка 3. «square» — маркеры в виде закрашенного квадрата Пример задания определенного маркера в списке: В качестве маркеров списка можно использовать также графические изображения, что позволяет красиво оформить HTML-документ. На практике это очень часто применяется. Для реализации этой задачи необходимо в коде прописать путь до картинки, которая будет служить маркером: Также списки бывают вложенными, они состоят из нескольких списков: Вот, пожалуй и все, что хотелось рассказать о списках в HTML. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода. Как красиво оформить списки в тегах ul ol li? Готовые стили для списков Красиво оформленные списки создают уютную атмосферу на сайте. Они помогают лучше воспринимать контент, увеличивают среднее время, проведенное на сайте, и помогают превращать случайных гостей в постоянных заинтересованных читателей. Как оформляются списки в HTML? Списки бывают нумерованными и ненумерованными. Нумерованные списки выводятся кодом: Не нумерованные списки выводятся кодом: Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей. Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста. Для нумерованного списка прописываются стили нумерации для каждого пункта. Стандартные арабские цифры описываются значением decimal. list-style-type: decimal; /*арабские цифры*/ Для маркерованного списка указывается стиль символов — квадратики или кружочки. list-style-type: circle; /*кружки*/ list-style-type: square; /*квадраты*/ Каждому пункту меню можно назначить изображение. list-style-image: url(‘путь к изображению’); Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим. Где стили списков прописаны в шаблоне Twenty Eleven? Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */ Стандартный код выглядит вот так: Как оформить нумерованный список? Нумерованный список с использованием фона Посмотрите вот на такое симпатичное оформление нумерованного списка. Нравится? Давайте повторим. Найдите стили для тега ol. Пропишите к нему новые свойства. Для того чтобы вы поняли, где что вам нужно изменить под свой дизайн, давайте разберем этот код по полочкам. list-style-type: none; — отключает вывод стандартных цифр counter-reset: point; — задает переменную для счетчика нумерации position: relative; — размещает нумерацию возле самих пунктов before — псевдоэлемент для тега ol li. Имеет следующие стили: content: counter(point); — выводит значение переменной counter-increment: point 1; — увеличивает счетчик на 1 position: absolute; background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой margin – внешние отступы padding – внутренние отступы color – цвет текста элемента background – фон text-align – выравнивание текста font-weight – толщина (насыщенность) шрифта В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы. Нумерованный список с уникальным изображением для каждого пункта На одном женском сайте есть очень привлекательные нумерованные списочки. Как это реализовано? Давайте рассмотрим следующий код: В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку. Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n). Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li). Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов. Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой. Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов. Как оформить маркированный (ненумерованный) список? Маркированный список ul li с чередующимися иконками Мне очень понравился вот такой маркированный список Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента. Для эксперимента можно назначить отступы: Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before. В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты. Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром. Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента. Как вывести на странице несколько списков с разным оформлением? Иногда нужно разместить несколько списков с разными стилями. Например, содержание каждого поста у меня оформлено списком, но этот список отличается от остальных фоном и левым бордюром. Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили. Вот, например, один симпатичный вариант оформления содержания: В HTML вы пропишите список так: В CSS вы пропишите стили так: Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого. Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией. Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта. Как создать ссылки-якоря в списке содержания? В заключение хочу поделиться еще одним секретом. Как вы заметили, в содержании поста подзаголовки оформлены ссылками, переносящими нас соответствующему разделу. Это достигнуто при помощи ссылок-якорей. Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку. Код блока содержания будет выглядеть так: А в тексте статьи нужно написать так: Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама. Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях. Возможно вас еще заинтересует: Нумерованные списки. Маркированный и нумерованный список HTML Списки встречаются везде. Они используются для: разбивки больших сегментов текста на части; выделения важных моментов; изложения «плана действий » и перечня мероприятий ( нумерованный список в HTML ). Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице? Маркированные списки (или ненумерованные списки) Первый вид списка, который мы рассмотрим, это маркированный. Ненумерованные списки — тег Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример: Сначала весь список берется в теги . При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка. Атрибут type Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ): Элементы списка — тег Каждый элемент в списке обворачивают в отдельную пару тегов . Часто можно обойтись и без , но я бы рекомендовал придерживаться этого правила. Приведенный выше список помещен в отдельный тег , но каждый также поддерживает собственный атрибут type , и таким образом можно создать следующий список: Отступ маркированного списка Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : HTML Списки HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи: – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву); – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер); – список определений состоит из пар «имя/значение», в том числе терминов и определений. Нумерованные списки В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны. Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами. Тег имеет следующий синтаксис: Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере: Пример: Нумерованный список Пошаговая инструкция Достать ключ Вставить ключ в замок Повернуть ключ на два оборота Достать ключ из замка Открыть дверь Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис: Здесь: type – символы списка: A — прописные латинские буквы (A, B, C . . .); a — строчные латинские буквы (a, b, c . . .); I — большие римские цифры (I, II, III . . .); i — маленькие римские цифры (i, ii, iii . . .); 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию). Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега . В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX: Пример: Применение атрибутов type и start. Перепела Фазаны Куропатки Павлины Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом: В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи. Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка: Пример: Применение атрибута value Первый пункт списка Второй пункт списка Третий пункт списка В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8. Форматирование нумерованных списков с помощью CSS Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления нумерованных списков Пример Значение Описание а, Ь, с lower-alpha Строчные буквы А, В, С upper-alpha Прописные буквы i, ii, iii lower-roman Римские цифры, набранные строчными буквами I, II, III upper-roman Римские цифры, набранные прописными буквами На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра: Пример: Применение свойства CSS list-style-type первый пункт списка второй пункт списка третий пункт списка Маркированные списки Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег имеет следующий синтаксис: В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка: Пример: Маркированный список Windows Movie Maker Pinnacle VideoSpin AviSynth Avidemux Внутри тега не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.) Вложенные списки Пример: Вложенные списки Понедельник Отправить почту Визит к редактору Выбор темы Дкаративное оформление Заключительный отчет Вечерний просмотр сообщений Вторник Пересмотреть график Отправить изображения Среда . При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. Форматирование маркированных списков Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления маркированного списка Значение Описание disc маркер в форме кружков с заливкой circle маркер в форме кружков без заливки square маркер в форме квадрата с заливкой none пункты списка без маркера В следующем примере рассмотрены различные стили оформления маркированных списков: Нумерованные и ненумерованные списки. Нумерованные и маркированные списки в HTML Доброго времени суток! В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать. Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два: Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер. В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка. 1. Маркированные списки в HTML Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки: А вот так выглядит в браузере: Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере 1.1 Стандартные маркеры для маркированного списка На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений: 1.2 Маркер списка в виде пустого круга Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку: html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html > Сразу смотрим как этот код будет выглядеть в браузере: Рис. 1.2. Вид маркера для списка в виде окружности в браузере 1.3 Маркер списка в виде квадрата Посмотрим также и последний пример с квадратным маркером для HTML списка: Обратите внимание на маркер, он стал квадратным: Рис. 1.3. Вид маркера для списка в виде квадрата в браузере Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида. Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — . Ошибка будет следующая: Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах. 2. Нумерованные списки в HTML В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике: Пример нумерованного списка: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html > Таким образом выглядит нумерованный список со стандартными настройками в браузере: Рис. 2.1. Нумерованный список в браузере со стандартными настройками Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML. 2.1 Стандартные маркеры для нумерованного списка Здесь у нас есть выбор не из трех видов маркеров, а из пяти: Название маркера Значение атрибута «type» Пример списка Маркеры в виде арабских чисел 1 Бадминтон Бейсбол Маркеры в виде строчных латинских букв a Джомолунгма Чогори Канченджанга Маркеры в виде заглавных латинских букв A Summit Plummet Tantrum Alley Insano Маркеры в виде римских цифр в нижнем регистре i Филиппинское море Аравийское море Коралловое море Маркеры в виде римских цифр в верхнем регистре I Красный Зеленый Синий 2.2 Своя нумерация в списке HTML Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html > Вот как это будет отображаться на реальном сайте: Рис. 2.2. Нумерация с произвольного числа в нумерованном списке На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах. Ну а сейчас перейдем к вложенным спискам HTML. 3. Как сделать многоуровневый (вложенный) список в HTML Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде. На примере моделей автомобилей мы построим многоуровневый список в HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html > Обратите внимание, как выглядит многоуровневый список в браузере: Рис. 3.1. Пример многоуровневого списка в HTML Мы делали многоуровневый список с помощью маркированного (тег ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ). Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html > В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список. Смотрим его вид в браузере: Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере 4. Полезные материалы по спискам HTML Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат). 4.1 Как сделать список HTML в строку Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто: 4.2 Как сделать список HTML без значка За это отвечает свойство list-style-type в CSS (подробнее ): 4.3 Как сделать список в HTML по центру Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало: 4.4 Как сделать список в HTML с картинками Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка: 4.5 Маркированный список HTML свой маркер В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера: 4.6 Как сделать список в HTML в несколько столбцов Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов: 5. Практика работы со списками На видео ниже вы можете увидеть всю работу со списками HTML на практике: В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные. Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости. Нумерованный список HTML Обычный нумерованный можно создать при помощи следующих тегов: Первый пункт списка Второй пункт списка Третий пункт списка Простые списки выглядят вот так Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый , то автоматически перед ним ставит . Таким образом, списки можно делать так, как показано ниже. Но с точки зрения профессионалов это некорректно. Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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 представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега и вложенных в его тегов Первая строчка Вторая строчка Третья строчка Выглядит такой список следующим образом: По умолчанию нумерация производится арабскими цифрами. Но у тега есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре. Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае. Нумерация строчными буквами латинского алфавита: Список определений в HTML. Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов . Тег создает контейнер для списка, тег устанавливает термин, а тег описание или определение термина. Записывается данный список следующим образом: Термин 1 Определение термина 1 Термин 2 Определение термина 2 Термин 3 Определение термина 3 В результате получится следующий список: Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения. Вложенные или многоуровневые списки в HTML. Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков. Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки. Вариант такой Первая строчка Вторая строчка Третья строчка Вариант сякой Первая строчка Вторая строчка Третья строчка Вариант эдакий Первая строчка Вторая строчка Третья строчка Нумерованный список Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка. Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тегом и заканчиваться тегом . Спецификация элемента OL: Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:  A – маркеры в виде прописных латинских букв;  a – маркеры в виде строчных латинских букв;  I- маркеры в виде больших римских цифр;  i- маркеры в виде маленьких римских цифр;  1- маркеры в виде арабских цифр, это значение используется по умолчанию. Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации. Спецификация элемента LI для нумерованного списка: Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1. Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов. Пример использования нумерованного списка: Города России по величине: Вот так броузер отобразит данный пример: Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом: Пример использования списка определений: Пример списка определений Состав Microsoft Office Многофункциональный текстовый процессор Программа для работы с электронными Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже. Первый пункт Второй пункт Третий пункт В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка Маркированный список Чебурашка Крокодил Гена Шапокляк Крыса Лариса
  • Отступ маркированного списка
  • Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : Неупорядоченный список Это задание архивной главы. Перейдите по ссылке, чтобы пройти актуальный курс. Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список». В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. В последующих заданиях мы будем тренироваться работать с ними. Неупорядоченные (или маркированные) списки создаются с помощью тега , который может содержать внутри себя теги , обозначающие «элемент списка». index.html Сплит-режим Список изученных тегов html head body Неупорядоченный список используется для простого перечисления объектов, когда порядок неважен. Оформление списков в CSS Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила. list-style-type Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть: disk — кружок, установлен по умолчанию. circle — окружность. square — квадрат. Для нумерованных списков свойству обычно присваиваются значения: decimal — арабские цифры, значение установлено по умолчанию. lower-roman — маленькие римские цифры. upper-roman — заглавные римские цифры. lower-alpha — строчные латинские буквы. upper-alpha — прописные латинские буквы. Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер. Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian — традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко. Пример ниже отображает три списка: нумерованный с традиционной армянской нумерацией, маркированный с окружностью и нумерованный, элементы в котором нумеруются идеографически. Цвет маркеров совпадает с цветом текста в списке, указанного свойством color. list-style-image Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png, который вы и хотите использовать, то код оформления будет следующим: list-style-position Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside), либо текст его обтекает (list-style-position: inside). В примере ниже показана разница между этими значениями. В первом случае маркер внутри списка, во втором случае он вынесен за его пределы. В результате создаётся такая страница: list-style Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел: Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен. HTML-код приведён ниже. Браузер отобразит следующую страницу. Полезные ссылки: Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML; Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа; Вёрстка сайта с нуля 2.0 — полноценный платный курс. Списки в HTML Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В HTML предусмотрено два типа списков: нумерованный и ненумерованный (маркированный). Для построения списков используются специальные теги. С основными тегами мы познакомимся в данном уроке. Давайте рассмотрим типы списков в HTML по порядку и на реальных примерах разберемся чем они отличаются, и как выводятся. Нумерованные списки в HTML Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид: В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка: 1. Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными); 2. Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными); 3. Атрибут «start» — используется для того, чтобы нумерация начиналась не с первого пункта, в качестве параметра указывается порядковый номер, с которого требуется формировать список. Пример. Нумерованный список, который формируется из римских букв и начинается со второго элемента: Маркированные списки в HTML Ненумерованные списки также называют неупорядоченными или маркированными. Для выделения элементов такого списка используются специальные символы (маркеры). Вид маркеров списка задается в HTML коде с помощью специальных атрибутов. Пример маркированного списка в HTML: В данном случае список будет формироваться из маркеров в виде жирной точки. Атрибутами ненумерованного списка являются: 1. «disc» — маркеры в виде закрашенного кружка 2. «circle» — маркеры в виде пустого кружка 3. «square» — маркеры в виде закрашенного квадрата Пример задания определенного маркера в списке: В качестве маркеров списка можно использовать также графические изображения, что позволяет красиво оформить HTML-документ. На практике это очень часто применяется. Для реализации этой задачи необходимо в коде прописать путь до картинки, которая будет служить маркером: Также списки бывают вложенными, они состоят из нескольких списков: Вот, пожалуй и все, что хотелось рассказать о списках в HTML. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода. Как красиво оформить списки в тегах ul ol li? Готовые стили для списков Красиво оформленные списки создают уютную атмосферу на сайте. Они помогают лучше воспринимать контент, увеличивают среднее время, проведенное на сайте, и помогают превращать случайных гостей в постоянных заинтересованных читателей. Как оформляются списки в HTML? Списки бывают нумерованными и ненумерованными. Нумерованные списки выводятся кодом: Не нумерованные списки выводятся кодом: Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей. Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста. Для нумерованного списка прописываются стили нумерации для каждого пункта. Стандартные арабские цифры описываются значением decimal. list-style-type: decimal; /*арабские цифры*/ Для маркерованного списка указывается стиль символов — квадратики или кружочки. list-style-type: circle; /*кружки*/ list-style-type: square; /*квадраты*/ Каждому пункту меню можно назначить изображение. list-style-image: url(‘путь к изображению’); Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим. Где стили списков прописаны в шаблоне Twenty Eleven? Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */ Стандартный код выглядит вот так: Как оформить нумерованный список? Нумерованный список с использованием фона Посмотрите вот на такое симпатичное оформление нумерованного списка. Нравится? Давайте повторим. Найдите стили для тега ol. Пропишите к нему новые свойства. Для того чтобы вы поняли, где что вам нужно изменить под свой дизайн, давайте разберем этот код по полочкам. list-style-type: none; — отключает вывод стандартных цифр counter-reset: point; — задает переменную для счетчика нумерации position: relative; — размещает нумерацию возле самих пунктов before — псевдоэлемент для тега ol li. Имеет следующие стили: content: counter(point); — выводит значение переменной counter-increment: point 1; — увеличивает счетчик на 1 position: absolute; background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой margin – внешние отступы padding – внутренние отступы color – цвет текста элемента background – фон text-align – выравнивание текста font-weight – толщина (насыщенность) шрифта В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы. Нумерованный список с уникальным изображением для каждого пункта На одном женском сайте есть очень привлекательные нумерованные списочки. Как это реализовано? Давайте рассмотрим следующий код: В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку. Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n). Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li). Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов. Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой. Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов. Как оформить маркированный (ненумерованный) список? Маркированный список ul li с чередующимися иконками Мне очень понравился вот такой маркированный список Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента. Для эксперимента можно назначить отступы: Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before. В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты. Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром. Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента. Как вывести на странице несколько списков с разным оформлением? Иногда нужно разместить несколько списков с разными стилями. Например, содержание каждого поста у меня оформлено списком, но этот список отличается от остальных фоном и левым бордюром. Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили. Вот, например, один симпатичный вариант оформления содержания: В HTML вы пропишите список так: В CSS вы пропишите стили так: Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого. Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией. Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта. Как создать ссылки-якоря в списке содержания? В заключение хочу поделиться еще одним секретом. Как вы заметили, в содержании поста подзаголовки оформлены ссылками, переносящими нас соответствующему разделу. Это достигнуто при помощи ссылок-якорей. Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку. Код блока содержания будет выглядеть так: А в тексте статьи нужно написать так: Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама. Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях. Возможно вас еще заинтересует: Нумерованные списки. Маркированный и нумерованный список HTML Списки встречаются везде. Они используются для: разбивки больших сегментов текста на части; выделения важных моментов; изложения «плана действий » и перечня мероприятий ( нумерованный список в HTML ). Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице? Маркированные списки (или ненумерованные списки) Первый вид списка, который мы рассмотрим, это маркированный. Ненумерованные списки — тег Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример: Сначала весь список берется в теги . При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка. Атрибут type Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ): Элементы списка — тег Каждый элемент в списке обворачивают в отдельную пару тегов
  • . Часто можно обойтись и без , но я бы рекомендовал придерживаться этого правила. Приведенный выше список помещен в отдельный тег , но каждый также поддерживает собственный атрибут type , и таким образом можно создать следующий список: Отступ маркированного списка Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : HTML Списки HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи: – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву); – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер); – список определений состоит из пар «имя/значение», в том числе терминов и определений. Нумерованные списки В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны. Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами. Тег имеет следующий синтаксис: Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере: Пример: Нумерованный список Пошаговая инструкция Достать ключ Вставить ключ в замок Повернуть ключ на два оборота Достать ключ из замка Открыть дверь Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис: Здесь: type – символы списка: A — прописные латинские буквы (A, B, C . . .); a — строчные латинские буквы (a, b, c . . .); I — большие римские цифры (I, II, III . . .); i — маленькие римские цифры (i, ii, iii . . .); 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию). Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега . В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX: Пример: Применение атрибутов type и start. Перепела Фазаны Куропатки Павлины Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом: В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи. Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка: Пример: Применение атрибута value Первый пункт списка Второй пункт списка Третий пункт списка В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8. Форматирование нумерованных списков с помощью CSS Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления нумерованных списков Пример Значение Описание а, Ь, с lower-alpha Строчные буквы А, В, С upper-alpha Прописные буквы i, ii, iii lower-roman Римские цифры, набранные строчными буквами I, II, III upper-roman Римские цифры, набранные прописными буквами На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра: Пример: Применение свойства CSS list-style-type первый пункт списка второй пункт списка третий пункт списка Маркированные списки Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег имеет следующий синтаксис: В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка: Пример: Маркированный список Windows Movie Maker Pinnacle VideoSpin AviSynth Avidemux Внутри тега не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.) Вложенные списки Пример: Вложенные списки Понедельник Отправить почту Визит к редактору Выбор темы Дкаративное оформление Заключительный отчет Вечерний просмотр сообщений Вторник Пересмотреть график Отправить изображения Среда . При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. Форматирование маркированных списков Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления маркированного списка Значение Описание disc маркер в форме кружков с заливкой circle маркер в форме кружков без заливки square маркер в форме квадрата с заливкой none пункты списка без маркера В следующем примере рассмотрены различные стили оформления маркированных списков: Нумерованные и ненумерованные списки. Нумерованные и маркированные списки в HTML Доброго времени суток! В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать. Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два: Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер. В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка. 1. Маркированные списки в HTML Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки: А вот так выглядит в браузере: Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере 1.1 Стандартные маркеры для маркированного списка На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений: 1.2 Маркер списка в виде пустого круга Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку: html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html > Сразу смотрим как этот код будет выглядеть в браузере: Рис. 1.2. Вид маркера для списка в виде окружности в браузере 1.3 Маркер списка в виде квадрата Посмотрим также и последний пример с квадратным маркером для HTML списка: Обратите внимание на маркер, он стал квадратным: Рис. 1.3. Вид маркера для списка в виде квадрата в браузере Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида. Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — . Ошибка будет следующая: Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах. 2. Нумерованные списки в HTML В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике: Пример нумерованного списка: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html > Таким образом выглядит нумерованный список со стандартными настройками в браузере: Рис. 2.1. Нумерованный список в браузере со стандартными настройками Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML. 2.1 Стандартные маркеры для нумерованного списка Здесь у нас есть выбор не из трех видов маркеров, а из пяти: Название маркера Значение атрибута «type» Пример списка Маркеры в виде арабских чисел 1 Бадминтон Бейсбол Маркеры в виде строчных латинских букв a Джомолунгма Чогори Канченджанга Маркеры в виде заглавных латинских букв A Summit Plummet Tantrum Alley Insano Маркеры в виде римских цифр в нижнем регистре i Филиппинское море Аравийское море Коралловое море Маркеры в виде римских цифр в верхнем регистре I Красный Зеленый Синий 2.2 Своя нумерация в списке HTML Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html > Вот как это будет отображаться на реальном сайте: Рис. 2.2. Нумерация с произвольного числа в нумерованном списке На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах. Ну а сейчас перейдем к вложенным спискам HTML. 3. Как сделать многоуровневый (вложенный) список в HTML Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде. На примере моделей автомобилей мы построим многоуровневый список в HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html > Обратите внимание, как выглядит многоуровневый список в браузере: Рис. 3.1. Пример многоуровневого списка в HTML Мы делали многоуровневый список с помощью маркированного (тег ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ). Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html > В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список. Смотрим его вид в браузере: Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере 4. Полезные материалы по спискам HTML Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат). 4.1 Как сделать список HTML в строку Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто: 4.2 Как сделать список HTML без значка За это отвечает свойство list-style-type в CSS (подробнее ): 4.3 Как сделать список в HTML по центру Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало: 4.4 Как сделать список в HTML с картинками Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка: 4.5 Маркированный список HTML свой маркер В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера: 4.6 Как сделать список в HTML в несколько столбцов Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов: 5. Практика работы со списками На видео ниже вы можете увидеть всю работу со списками HTML на практике: В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные. Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости. Нумерованный список HTML Обычный нумерованный можно создать при помощи следующих тегов: Первый пункт списка Второй пункт списка Третий пункт списка Простые списки выглядят вот так Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый , то автоматически перед ним ставит . Таким образом, списки можно делать так, как показано ниже. Но с точки зрения профессионалов это некорректно. Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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 представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега и вложенных в его тегов Первая строчка Вторая строчка Третья строчка Выглядит такой список следующим образом: По умолчанию нумерация производится арабскими цифрами. Но у тега есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре. Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае. Нумерация строчными буквами латинского алфавита: Список определений в HTML. Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов . Тег создает контейнер для списка, тег устанавливает термин, а тег описание или определение термина. Записывается данный список следующим образом: Термин 1 Определение термина 1 Термин 2 Определение термина 2 Термин 3 Определение термина 3 В результате получится следующий список: Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения. Вложенные или многоуровневые списки в HTML. Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков. Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки. Вариант такой Первая строчка Вторая строчка Третья строчка Вариант сякой Первая строчка Вторая строчка Третья строчка Вариант эдакий Первая строчка Вторая строчка Третья строчка Нумерованный список Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка. Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тегом и заканчиваться тегом . Спецификация элемента OL: Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:  A – маркеры в виде прописных латинских букв;  a – маркеры в виде строчных латинских букв;  I- маркеры в виде больших римских цифр;  i- маркеры в виде маленьких римских цифр;  1- маркеры в виде арабских цифр, это значение используется по умолчанию. Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации. Спецификация элемента LI для нумерованного списка: Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1. Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов. Пример использования нумерованного списка: Города России по величине: Вот так броузер отобразит данный пример: Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом: Пример использования списка определений: Пример списка определений Состав Microsoft Office Многофункциональный текстовый процессор Программа для работы с электронными Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже. Первый пункт Второй пункт Третий пункт В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка Маркированный список Чебурашка Крокодил Гена Шапокляк Крыса Лариса
  • Начало нумерованного списка с определенного номера
  • Обратный порядок
  • Многоуровневый маркированный список в HTML
  • Заключение
  • Нумерованный список
  • Неупорядоченный список
  • Список изученных тегов
  • Оформление списков в CSS
  • list-style-type
  • list-style-image
  • list-style-position
  • list-style
  • Списки в HTML
  • Нумерованные списки в HTML
  • Маркированные списки в HTML
  • Как красиво оформить списки в тегах ul ol li? Готовые стили для списков
  • Как оформляются списки в HTML?
  • Где стили списков прописаны в шаблоне Twenty Eleven?
  • Как оформить нумерованный список?
  • Нумерованный список с использованием фона
  • Нумерованный список с уникальным изображением для каждого пункта
  • Как оформить маркированный (ненумерованный) список?
  • Маркированный список ul li с чередующимися иконками
  • Как вывести на странице несколько списков с разным оформлением?
  • Как создать ссылки-якоря в списке содержания?
  • Нумерованные списки. Маркированный и нумерованный список HTML
  • Маркированные списки (или ненумерованные списки)
  • Ненумерованные списки — тег Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример: Сначала весь список берется в теги . При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка. Атрибут type Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ): Элементы списка — тег Каждый элемент в списке обворачивают в отдельную пару тегов
  • . Часто можно обойтись и без , но я бы рекомендовал придерживаться этого правила. Приведенный выше список помещен в отдельный тег , но каждый также поддерживает собственный атрибут type , и таким образом можно создать следующий список: Отступ маркированного списка Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : HTML Списки HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи: – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву); – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер); – список определений состоит из пар «имя/значение», в том числе терминов и определений. Нумерованные списки В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны. Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами. Тег имеет следующий синтаксис: Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере: Пример: Нумерованный список Пошаговая инструкция Достать ключ Вставить ключ в замок Повернуть ключ на два оборота Достать ключ из замка Открыть дверь Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис: Здесь: type – символы списка: A — прописные латинские буквы (A, B, C . . .); a — строчные латинские буквы (a, b, c . . .); I — большие римские цифры (I, II, III . . .); i — маленькие римские цифры (i, ii, iii . . .); 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию). Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега . В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX: Пример: Применение атрибутов type и start. Перепела Фазаны Куропатки Павлины Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом: В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи. Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка: Пример: Применение атрибута value Первый пункт списка Второй пункт списка Третий пункт списка В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8. Форматирование нумерованных списков с помощью CSS Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления нумерованных списков Пример Значение Описание а, Ь, с lower-alpha Строчные буквы А, В, С upper-alpha Прописные буквы i, ii, iii lower-roman Римские цифры, набранные строчными буквами I, II, III upper-roman Римские цифры, набранные прописными буквами На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра: Пример: Применение свойства CSS list-style-type первый пункт списка второй пункт списка третий пункт списка Маркированные списки Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег имеет следующий синтаксис: В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка: Пример: Маркированный список Windows Movie Maker Pinnacle VideoSpin AviSynth Avidemux Внутри тега не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.) Вложенные списки Пример: Вложенные списки Понедельник Отправить почту Визит к редактору Выбор темы Дкаративное оформление Заключительный отчет Вечерний просмотр сообщений Вторник Пересмотреть график Отправить изображения Среда . При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. Форматирование маркированных списков Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления маркированного списка Значение Описание disc маркер в форме кружков с заливкой circle маркер в форме кружков без заливки square маркер в форме квадрата с заливкой none пункты списка без маркера В следующем примере рассмотрены различные стили оформления маркированных списков: Нумерованные и ненумерованные списки. Нумерованные и маркированные списки в HTML Доброго времени суток! В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать. Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два: Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер. В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка. 1. Маркированные списки в HTML Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки: А вот так выглядит в браузере: Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере 1.1 Стандартные маркеры для маркированного списка На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений: 1.2 Маркер списка в виде пустого круга Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку: html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html > Сразу смотрим как этот код будет выглядеть в браузере: Рис. 1.2. Вид маркера для списка в виде окружности в браузере 1.3 Маркер списка в виде квадрата Посмотрим также и последний пример с квадратным маркером для HTML списка: Обратите внимание на маркер, он стал квадратным: Рис. 1.3. Вид маркера для списка в виде квадрата в браузере Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида. Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — . Ошибка будет следующая: Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах. 2. Нумерованные списки в HTML В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике: Пример нумерованного списка: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html > Таким образом выглядит нумерованный список со стандартными настройками в браузере: Рис. 2.1. Нумерованный список в браузере со стандартными настройками Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML. 2.1 Стандартные маркеры для нумерованного списка Здесь у нас есть выбор не из трех видов маркеров, а из пяти: Название маркера Значение атрибута «type» Пример списка Маркеры в виде арабских чисел 1 Бадминтон Бейсбол Маркеры в виде строчных латинских букв a Джомолунгма Чогори Канченджанга Маркеры в виде заглавных латинских букв A Summit Plummet Tantrum Alley Insano Маркеры в виде римских цифр в нижнем регистре i Филиппинское море Аравийское море Коралловое море Маркеры в виде римских цифр в верхнем регистре I Красный Зеленый Синий 2.2 Своя нумерация в списке HTML Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html > Вот как это будет отображаться на реальном сайте: Рис. 2.2. Нумерация с произвольного числа в нумерованном списке На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах. Ну а сейчас перейдем к вложенным спискам HTML. 3. Как сделать многоуровневый (вложенный) список в HTML Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде. На примере моделей автомобилей мы построим многоуровневый список в HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html > Обратите внимание, как выглядит многоуровневый список в браузере: Рис. 3.1. Пример многоуровневого списка в HTML Мы делали многоуровневый список с помощью маркированного (тег ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ). Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html > В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список. Смотрим его вид в браузере: Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере 4. Полезные материалы по спискам HTML Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат). 4.1 Как сделать список HTML в строку Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто: 4.2 Как сделать список HTML без значка За это отвечает свойство list-style-type в CSS (подробнее ): 4.3 Как сделать список в HTML по центру Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало: 4.4 Как сделать список в HTML с картинками Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка: 4.5 Маркированный список HTML свой маркер В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера: 4.6 Как сделать список в HTML в несколько столбцов Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов: 5. Практика работы со списками На видео ниже вы можете увидеть всю работу со списками HTML на практике: В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные. Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости. Нумерованный список HTML Обычный нумерованный можно создать при помощи следующих тегов: Первый пункт списка Второй пункт списка Третий пункт списка Простые списки выглядят вот так Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый , то автоматически перед ним ставит . Таким образом, списки можно делать так, как показано ниже. Но с точки зрения профессионалов это некорректно. Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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 представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега и вложенных в его тегов Первая строчка Вторая строчка Третья строчка Выглядит такой список следующим образом: По умолчанию нумерация производится арабскими цифрами. Но у тега есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре. Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае. Нумерация строчными буквами латинского алфавита: Список определений в HTML. Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов . Тег создает контейнер для списка, тег устанавливает термин, а тег описание или определение термина. Записывается данный список следующим образом: Термин 1 Определение термина 1 Термин 2 Определение термина 2 Термин 3 Определение термина 3 В результате получится следующий список: Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения. Вложенные или многоуровневые списки в HTML. Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков. Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки. Вариант такой Первая строчка Вторая строчка Третья строчка Вариант сякой Первая строчка Вторая строчка Третья строчка Вариант эдакий Первая строчка Вторая строчка Третья строчка Нумерованный список Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка. Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тегом и заканчиваться тегом . Спецификация элемента OL: Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:  A – маркеры в виде прописных латинских букв;  a – маркеры в виде строчных латинских букв;  I- маркеры в виде больших римских цифр;  i- маркеры в виде маленьких римских цифр;  1- маркеры в виде арабских цифр, это значение используется по умолчанию. Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации. Спецификация элемента LI для нумерованного списка: Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1. Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов. Пример использования нумерованного списка: Города России по величине: Вот так броузер отобразит данный пример: Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом: Пример использования списка определений: Пример списка определений Состав Microsoft Office Многофункциональный текстовый процессор Программа для работы с электронными Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже. Первый пункт Второй пункт Третий пункт В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка Маркированный список Чебурашка Крокодил Гена Шапокляк Крыса Лариса
  • Атрибут type
  • Элементы списка — тег Каждый элемент в списке обворачивают в отдельную пару тегов
  • . Часто можно обойтись и без , но я бы рекомендовал придерживаться этого правила. Приведенный выше список помещен в отдельный тег , но каждый также поддерживает собственный атрибут type , и таким образом можно создать следующий список: Отступ маркированного списка Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : HTML Списки HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи: – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву); – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер); – список определений состоит из пар «имя/значение», в том числе терминов и определений. Нумерованные списки В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны. Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами. Тег имеет следующий синтаксис: Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере: Пример: Нумерованный список Пошаговая инструкция Достать ключ Вставить ключ в замок Повернуть ключ на два оборота Достать ключ из замка Открыть дверь Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис: Здесь: type – символы списка: A — прописные латинские буквы (A, B, C . . .); a — строчные латинские буквы (a, b, c . . .); I — большие римские цифры (I, II, III . . .); i — маленькие римские цифры (i, ii, iii . . .); 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию). Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега . В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX: Пример: Применение атрибутов type и start. Перепела Фазаны Куропатки Павлины Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом: В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи. Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка: Пример: Применение атрибута value Первый пункт списка Второй пункт списка Третий пункт списка В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8. Форматирование нумерованных списков с помощью CSS Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления нумерованных списков Пример Значение Описание а, Ь, с lower-alpha Строчные буквы А, В, С upper-alpha Прописные буквы i, ii, iii lower-roman Римские цифры, набранные строчными буквами I, II, III upper-roman Римские цифры, набранные прописными буквами На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра: Пример: Применение свойства CSS list-style-type первый пункт списка второй пункт списка третий пункт списка Маркированные списки Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег имеет следующий синтаксис: В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка: Пример: Маркированный список Windows Movie Maker Pinnacle VideoSpin AviSynth Avidemux Внутри тега не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.) Вложенные списки Пример: Вложенные списки Понедельник Отправить почту Визит к редактору Выбор темы Дкаративное оформление Заключительный отчет Вечерний просмотр сообщений Вторник Пересмотреть график Отправить изображения Среда . При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. Форматирование маркированных списков Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления маркированного списка Значение Описание disc маркер в форме кружков с заливкой circle маркер в форме кружков без заливки square маркер в форме квадрата с заливкой none пункты списка без маркера В следующем примере рассмотрены различные стили оформления маркированных списков: Нумерованные и ненумерованные списки. Нумерованные и маркированные списки в HTML Доброго времени суток! В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать. Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два: Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер. В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка. 1. Маркированные списки в HTML Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки: А вот так выглядит в браузере: Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере 1.1 Стандартные маркеры для маркированного списка На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений: 1.2 Маркер списка в виде пустого круга Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку: html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html > Сразу смотрим как этот код будет выглядеть в браузере: Рис. 1.2. Вид маркера для списка в виде окружности в браузере 1.3 Маркер списка в виде квадрата Посмотрим также и последний пример с квадратным маркером для HTML списка: Обратите внимание на маркер, он стал квадратным: Рис. 1.3. Вид маркера для списка в виде квадрата в браузере Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида. Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — . Ошибка будет следующая: Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах. 2. Нумерованные списки в HTML В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике: Пример нумерованного списка: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html > Таким образом выглядит нумерованный список со стандартными настройками в браузере: Рис. 2.1. Нумерованный список в браузере со стандартными настройками Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML. 2.1 Стандартные маркеры для нумерованного списка Здесь у нас есть выбор не из трех видов маркеров, а из пяти: Название маркера Значение атрибута «type» Пример списка Маркеры в виде арабских чисел 1 Бадминтон Бейсбол Маркеры в виде строчных латинских букв a Джомолунгма Чогори Канченджанга Маркеры в виде заглавных латинских букв A Summit Plummet Tantrum Alley Insano Маркеры в виде римских цифр в нижнем регистре i Филиппинское море Аравийское море Коралловое море Маркеры в виде римских цифр в верхнем регистре I Красный Зеленый Синий 2.2 Своя нумерация в списке HTML Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html > Вот как это будет отображаться на реальном сайте: Рис. 2.2. Нумерация с произвольного числа в нумерованном списке На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах. Ну а сейчас перейдем к вложенным спискам HTML. 3. Как сделать многоуровневый (вложенный) список в HTML Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде. На примере моделей автомобилей мы построим многоуровневый список в HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html > Обратите внимание, как выглядит многоуровневый список в браузере: Рис. 3.1. Пример многоуровневого списка в HTML Мы делали многоуровневый список с помощью маркированного (тег ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ). Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html > В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список. Смотрим его вид в браузере: Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере 4. Полезные материалы по спискам HTML Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат). 4.1 Как сделать список HTML в строку Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто: 4.2 Как сделать список HTML без значка За это отвечает свойство list-style-type в CSS (подробнее ): 4.3 Как сделать список в HTML по центру Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало: 4.4 Как сделать список в HTML с картинками Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка: 4.5 Маркированный список HTML свой маркер В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера: 4.6 Как сделать список в HTML в несколько столбцов Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов: 5. Практика работы со списками На видео ниже вы можете увидеть всю работу со списками HTML на практике: В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные. Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости. Нумерованный список HTML Обычный нумерованный можно создать при помощи следующих тегов: Первый пункт списка Второй пункт списка Третий пункт списка Простые списки выглядят вот так Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый , то автоматически перед ним ставит . Таким образом, списки можно делать так, как показано ниже. Но с точки зрения профессионалов это некорректно. Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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 представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега и вложенных в его тегов Первая строчка Вторая строчка Третья строчка Выглядит такой список следующим образом: По умолчанию нумерация производится арабскими цифрами. Но у тега есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре. Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае. Нумерация строчными буквами латинского алфавита: Список определений в HTML. Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов . Тег создает контейнер для списка, тег устанавливает термин, а тег описание или определение термина. Записывается данный список следующим образом: Термин 1 Определение термина 1 Термин 2 Определение термина 2 Термин 3 Определение термина 3 В результате получится следующий список: Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения. Вложенные или многоуровневые списки в HTML. Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков. Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки. Вариант такой Первая строчка Вторая строчка Третья строчка Вариант сякой Первая строчка Вторая строчка Третья строчка Вариант эдакий Первая строчка Вторая строчка Третья строчка Нумерованный список Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка. Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тегом и заканчиваться тегом . Спецификация элемента OL: Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:  A – маркеры в виде прописных латинских букв;  a – маркеры в виде строчных латинских букв;  I- маркеры в виде больших римских цифр;  i- маркеры в виде маленьких римских цифр;  1- маркеры в виде арабских цифр, это значение используется по умолчанию. Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации. Спецификация элемента LI для нумерованного списка: Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1. Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов. Пример использования нумерованного списка: Города России по величине: Вот так броузер отобразит данный пример: Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом: Пример использования списка определений: Пример списка определений Состав Microsoft Office Многофункциональный текстовый процессор Программа для работы с электронными Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже. Первый пункт Второй пункт Третий пункт В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка Маркированный список Чебурашка Крокодил Гена Шапокляк Крыса Лариса
  • Отступ маркированного списка
  • Упорядоченный / нумерованный список — тег Если вы хотите упорядочить элементы списка, тогда тег поможет в этом. По умолчанию он задает нумерованный список HTML : что на выходе дает нам: A. Элемент 1 B. Элемент 2 C. Элемент 3 Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными. Начало нумерованного списка с определенного номера Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков. Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство! К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера: Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть Обратный порядок Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed : Первый пункт Второй пункт Третий пункт Четвертый пункт Пятый пункт В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт. Многоуровневый маркированный список в HTML С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой: Элемент верхнего уровня Подчиненный элемент 1 Подчиненный элемент 2 Элемент верхнего уровня Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 Элемент верхнего уровня Вы можете использовать комбинацию тегов и . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка. 1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня Используйте нумерованные списки HTML на своих страницах. Заключение Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях! Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта . В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных. Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки . Нумерованный список Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее. Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий. Для создания нумерованных списков в HTML используется тег , внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега : HTML Списки HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи: – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву); – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер); – список определений состоит из пар «имя/значение», в том числе терминов и определений. Нумерованные списки В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны. Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами. Тег имеет следующий синтаксис: Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере: Пример: Нумерованный список Пошаговая инструкция Достать ключ Вставить ключ в замок Повернуть ключ на два оборота Достать ключ из замка Открыть дверь Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис: Здесь: type – символы списка: A — прописные латинские буквы (A, B, C . . .); a — строчные латинские буквы (a, b, c . . .); I — большие римские цифры (I, II, III . . .); i — маленькие римские цифры (i, ii, iii . . .); 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию). Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега . В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX: Пример: Применение атрибутов type и start. Перепела Фазаны Куропатки Павлины Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом: В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи. Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка: Пример: Применение атрибута value Первый пункт списка Второй пункт списка Третий пункт списка В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8. Форматирование нумерованных списков с помощью CSS Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления нумерованных списков Пример Значение Описание а, Ь, с lower-alpha Строчные буквы А, В, С upper-alpha Прописные буквы i, ii, iii lower-roman Римские цифры, набранные строчными буквами I, II, III upper-roman Римские цифры, набранные прописными буквами На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра: Пример: Применение свойства CSS list-style-type первый пункт списка второй пункт списка третий пункт списка Маркированные списки Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег имеет следующий синтаксис: В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка: Пример: Маркированный список Windows Movie Maker Pinnacle VideoSpin AviSynth Avidemux Внутри тега не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.) Вложенные списки Пример: Вложенные списки Понедельник Отправить почту Визит к редактору Выбор темы Дкаративное оформление Заключительный отчет Вечерний просмотр сообщений Вторник Пересмотреть график Отправить изображения Среда . При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. Форматирование маркированных списков Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS: Стили оформления маркированного списка Значение Описание disc маркер в форме кружков с заливкой circle маркер в форме кружков без заливки square маркер в форме квадрата с заливкой none пункты списка без маркера В следующем примере рассмотрены различные стили оформления маркированных списков: Нумерованные и ненумерованные списки. Нумерованные и маркированные списки в HTML Доброго времени суток! В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать. Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два: Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер. В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка. 1. Маркированные списки в HTML Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки: А вот так выглядит в браузере: Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере 1.1 Стандартные маркеры для маркированного списка На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений: 1.2 Маркер списка в виде пустого круга Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку: html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html > Сразу смотрим как этот код будет выглядеть в браузере: Рис. 1.2. Вид маркера для списка в виде окружности в браузере 1.3 Маркер списка в виде квадрата Посмотрим также и последний пример с квадратным маркером для HTML списка: Обратите внимание на маркер, он стал квадратным: Рис. 1.3. Вид маркера для списка в виде квадрата в браузере Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида. Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — . Ошибка будет следующая: Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах. 2. Нумерованные списки в HTML В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике: Пример нумерованного списка: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html > Таким образом выглядит нумерованный список со стандартными настройками в браузере: Рис. 2.1. Нумерованный список в браузере со стандартными настройками Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML. 2.1 Стандартные маркеры для нумерованного списка Здесь у нас есть выбор не из трех видов маркеров, а из пяти: Название маркера Значение атрибута «type» Пример списка Маркеры в виде арабских чисел 1 Бадминтон Бейсбол Маркеры в виде строчных латинских букв a Джомолунгма Чогори Канченджанга Маркеры в виде заглавных латинских букв A Summit Plummet Tantrum Alley Insano Маркеры в виде римских цифр в нижнем регистре i Филиппинское море Аравийское море Коралловое море Маркеры в виде римских цифр в верхнем регистре I Красный Зеленый Синий 2.2 Своя нумерация в списке HTML Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html > Вот как это будет отображаться на реальном сайте: Рис. 2.2. Нумерация с произвольного числа в нумерованном списке На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах. Ну а сейчас перейдем к вложенным спискам HTML. 3. Как сделать многоуровневый (вложенный) список в HTML Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде. На примере моделей автомобилей мы построим многоуровневый список в HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html > Обратите внимание, как выглядит многоуровневый список в браузере: Рис. 3.1. Пример многоуровневого списка в HTML Мы делали многоуровневый список с помощью маркированного (тег ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ). Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html > В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список. Смотрим его вид в браузере: Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере 4. Полезные материалы по спискам HTML Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат). 4.1 Как сделать список HTML в строку Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто: 4.2 Как сделать список HTML без значка За это отвечает свойство list-style-type в CSS (подробнее ): 4.3 Как сделать список в HTML по центру Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало: 4.4 Как сделать список в HTML с картинками Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка: 4.5 Маркированный список HTML свой маркер В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера: 4.6 Как сделать список в HTML в несколько столбцов Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов: 5. Практика работы со списками На видео ниже вы можете увидеть всю работу со списками HTML на практике: В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные. Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости. Нумерованный список HTML Обычный нумерованный можно создать при помощи следующих тегов: Первый пункт списка Второй пункт списка Третий пункт списка Простые списки выглядят вот так Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый , то автоматически перед ним ставит . Таким образом, списки можно делать так, как показано ниже. Но с точки зрения профессионалов это некорректно. Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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 представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега и вложенных в его тегов Первая строчка Вторая строчка Третья строчка Выглядит такой список следующим образом: По умолчанию нумерация производится арабскими цифрами. Но у тега есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре. Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае. Нумерация строчными буквами латинского алфавита: Список определений в HTML. Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов . Тег создает контейнер для списка, тег устанавливает термин, а тег описание или определение термина. Записывается данный список следующим образом: Термин 1 Определение термина 1 Термин 2 Определение термина 2 Термин 3 Определение термина 3 В результате получится следующий список: Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения. Вложенные или многоуровневые списки в HTML. Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков. Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки. Вариант такой Первая строчка Вторая строчка Третья строчка Вариант сякой Первая строчка Вторая строчка Третья строчка Вариант эдакий Первая строчка Вторая строчка Третья строчка Нумерованный список Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка. Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тегом и заканчиваться тегом . Спецификация элемента OL: Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:  A – маркеры в виде прописных латинских букв;  a – маркеры в виде строчных латинских букв;  I- маркеры в виде больших римских цифр;  i- маркеры в виде маленьких римских цифр;  1- маркеры в виде арабских цифр, это значение используется по умолчанию. Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации. Спецификация элемента LI для нумерованного списка: Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1. Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов. Пример использования нумерованного списка: Города России по величине: Вот так броузер отобразит данный пример: Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом: Пример использования списка определений: Пример списка определений Состав Microsoft Office Многофункциональный текстовый процессор Программа для работы с электронными Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже. Первый пункт Второй пункт Третий пункт В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка Маркированный список Чебурашка Крокодил Гена Шапокляк Крыса Лариса
  • Начало нумерованного списка с определенного номера
  • Обратный порядок
  • Многоуровневый маркированный список в HTML
  • Заключение
  • Нумерованный список
  • HTML Списки
  • Нумерованные списки
  • Пример: Нумерованный список
  • Пример: Применение атрибутов type и start.
  • Пример: Применение атрибута value
  • Форматирование нумерованных списков с помощью CSS
  • Пример: Применение свойства CSS list-style-type
  • Маркированные списки
  • Пример: Маркированный список
  • Вложенные списки
  • Пример: Вложенные списки
  • Форматирование маркированных списков
  • Нумерованные и ненумерованные списки. Нумерованные и маркированные списки в HTML
  • 1. Маркированные списки в HTML
  • 1.1 Стандартные маркеры для маркированного списка
  • 1.2 Маркер списка в виде пустого круга
  • 1.3 Маркер списка в виде квадрата
  • 2. Нумерованные списки в HTML
  • 2.1 Стандартные маркеры для нумерованного списка
  • 2.2 Своя нумерация в списке HTML
  • 3. Как сделать многоуровневый (вложенный) список в HTML
  • 4. Полезные материалы по спискам HTML
  • 4.1 Как сделать список HTML в строку
  • 4.2 Как сделать список HTML без значка
  • 4.3 Как сделать список в HTML по центру
  • 4.4 Как сделать список в HTML с картинками
  • 4.5 Маркированный список HTML свой маркер
  • 4.6 Как сделать список в HTML в несколько столбцов
  • 5. Практика работы со списками
  • Нумерованный список HTML
  • Многоуровневый нумерованный список HTML
  • Оформление списков
  • Маркированный список.
  • Нумерованные списки.
  • Список определений в HTML.
  • Вложенные или многоуровневые списки в HTML.
  • Нумерованный список
  • Состав Microsoft Office
  • Илон Маск рекомендует:  Что такое код cpdf_set_title

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

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

    Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений. Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки.

    Илон Маск рекомендует:  page-break-inside в CSS

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

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

    Илон Маск рекомендует:  Что такое код mfc

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

    Примечание: тег

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

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

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

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

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

    Значение Описание
    1 Десятичные числа (1, 2, 3..)
    a Список в алфавитном порядке, строчные буквы (a, b, c..)
    A Список в алфавитном порядке, заглавные буквы (A, B, C..)
    i Римские цифры, строчные (i, ii, iii, iv..)
    I Римские цифры, заглавные (I, II, III, IV..)

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

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

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

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

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

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

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

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

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

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

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

    Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

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

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

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

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

    А вот так выглядит в браузере:

    Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

    1.1 Стандартные маркеры для маркированного списка

    На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

    1.2 Маркер списка в виде пустого круга

    Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

    html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html >

    Сразу смотрим как этот код будет выглядеть в браузере:

    Рис. 1.2. Вид маркера для списка в виде окружности в браузере

    1.3 Маркер списка в виде квадрата

    Посмотрим также и последний пример с квадратным маркером для HTML списка:

    Обратите внимание на маркер, он стал квадратным:

    Рис. 1.3. Вид маркера для списка в виде квадрата в браузере

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

    Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

    Ошибка будет следующая:

    Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка

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

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

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

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html >

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

    Рис. 2.1. Нумерованный список в браузере со стандартными настройками

    Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

    2.1 Стандартные маркеры для нумерованного списка

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

    Название маркера Значение атрибута «type» Пример списка
    Маркеры в виде арабских чисел 1
    • Бадминтон
    • Бейсбол
    Маркеры в виде строчных латинских букв a
    • Джомолунгма
    • Чогори
    • Канченджанга
    Маркеры в виде заглавных латинских букв A
    • Summit Plummet
    • Tantrum Alley
    • Insano
    Маркеры в виде римских цифр в нижнем регистре i
    • Филиппинское море
    • Аравийское море
    • Коралловое море
    Маркеры в виде римских цифр в верхнем регистре I
    • Красный
    • Зеленый
    • Синий

    2.2 Своя нумерация в списке HTML

    Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html >

    Вот как это будет отображаться на реальном сайте:

    Рис. 2.2. Нумерация с произвольного числа в нумерованном списке

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

    Ну а сейчас перейдем к вложенным спискам HTML.

    3. Как сделать многоуровневый (вложенный) список в HTML

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

    На примере моделей автомобилей мы построим многоуровневый список в HTML:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html >

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

    Рис. 3.1. Пример многоуровневого списка в HTML

    Мы делали многоуровневый список с помощью маркированного (тег

      ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ).

    Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html >

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

    Смотрим его вид в браузере:

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

    4. Полезные материалы по спискам HTML

    Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

    4.1 Как сделать список HTML в строку

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

    4.2 Как сделать список HTML без значка

    За это отвечает свойство list-style-type в CSS (подробнее ):

    4.3 Как сделать список в HTML по центру

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

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

    Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

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

    В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера:

    4.6 Как сделать список в HTML в несколько столбцов

    Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

    5. Практика работы со списками

    На видео ниже вы можете увидеть всю работу со списками HTML на практике:

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

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

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

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

    Первый пункт списка

    Второй пункт списка

    Третий пункт списка

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

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

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

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

    Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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. Первая строчка
    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. Третья строчка

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

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

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

    Каждый элемент списка должен начинаться тегом и заканчиваться тегом .

    Спецификация элемента OL:

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

     A – маркеры в виде прописных латинских букв;

     a – маркеры в виде строчных латинских букв;

     I- маркеры в виде больших римских цифр;

     i- маркеры в виде маленьких римских цифр;

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

    Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации.

    Спецификация элемента LI для нумерованного списка:

    Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1.

    Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов.

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

    Города России по величине:

    Вот так броузер отобразит данный пример:

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

    Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом:

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

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

    Состав Microsoft Office

    Многофункциональный текстовый процессор

    Программа для работы с электронными

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

      , а каждый пункт списка начинается с тега
      , как показано ниже.
    • Первый пункт
    • Второй пункт
    • Третий пункт

    В списке непременно должен присутствовать закрывающий тег

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

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

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

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

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

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

    Списки встречаются везде. Они используются для:

    • разбивки больших сегментов текста на части;
    • выделения важных моментов;
    • изложения «плана действий » и перечня мероприятий ( нумерованный список в HTML ).

    Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?

    Маркированные списки (или ненумерованные списки)

    Первый вид списка, который мы рассмотрим, это маркированный.

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

    Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример:

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

    Атрибут type

    Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ):

    Элементы списка — тег

    Каждый элемент в списке обворачивают в отдельную пару тегов

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

    Приведенный выше список помещен в отдельный тег

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

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

    Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом

    Упорядоченный / нумерованный список — тег

    Если вы хотите упорядочить элементы списка, тогда тег

      поможет в этом. По умолчанию он задает нумерованный список HTML :

    что на выходе дает нам:

    A. Элемент 1
    B. Элемент 2
    C. Элемент 3

    Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

    Начало нумерованного списка с определенного номера

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

    Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство!

    К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера:

    Что дает нам следующее:
    4. Шаг четыре
    5. Шаг пять
    6. Шаг шесть

    Обратный порядок

    Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed :

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

    В результате список будет выглядеть следующим образом:
    5. Пятый пункт.
    4. Четвертый пункт.
    3. Третий пункт.
    2. Второй пункт.
    1. Первый пункт.

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

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

    • Элемент верхнего уровня
      • Подчиненный элемент 1
      • Подчиненный элемент 2
    • Элемент верхнего уровня

    Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    Элемент верхнего уровня

    Вы можете использовать комбинацию тегов

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

    1. Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    2. Элемент верхнего уровня

    Используйте нумерованные списки HTML на своих страницах.

    Заключение

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

    Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта .

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

    Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки .

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

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

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

    Для создания нумерованных списков в HTML используется тег

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

    Неупорядоченный список

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

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

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


    Неупорядоченные (или маркированные) списки создаются с помощью тега

      , который может содержать внутри себя теги
      , обозначающие «элемент списка».
    • index.html Сплит-режим

    Список изученных тегов

    • html
    • head
    • body

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

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

    Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила.

    list-style-type

    Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:

    • disk — кружок, установлен по умолчанию.
    • circle — окружность.
    • square — квадрат.

    Для нумерованных списков свойству обычно присваиваются значения:

    • decimal — арабские цифры, значение установлено по умолчанию.
    • lower-roman — маленькие римские цифры.
    • upper-roman — заглавные римские цифры.
    • lower-alpha — строчные латинские буквы.
    • upper-alpha — прописные латинские буквы.

    Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер.

    Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian — традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.

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

    Цвет маркеров совпадает с цветом текста в списке, указанного свойством color.

    list-style-image

    Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png, который вы и хотите использовать, то код оформления будет следующим:

    list-style-position

    Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside), либо текст его обтекает (list-style-position: inside).

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

    В результате создаётся такая страница:

    list-style

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

    Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.

    HTML-код приведён ниже.

    Браузер отобразит следующую страницу.

    Полезные ссылки:

    • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
    • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
    • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

    Списки в HTML

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

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

    Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид:

    В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка:

    1. Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными);
    2. Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными);
    3. Атрибут «start» — используется для того, чтобы нумерация начиналась не с первого пункта, в качестве параметра указывается порядковый номер, с которого требуется формировать список.

    Пример. Нумерованный список, который формируется из римских букв и начинается со второго элемента:

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

    Ненумерованные списки также называют неупорядоченными или маркированными. Для выделения элементов такого списка используются специальные символы (маркеры). Вид маркеров списка задается в HTML коде с помощью специальных атрибутов. Пример маркированного списка в HTML:

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

    1. «disc» — маркеры в виде закрашенного кружка
    2. «circle» — маркеры в виде пустого кружка
    3. «square» — маркеры в виде закрашенного квадрата

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

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

    Также списки бывают вложенными, они состоят из нескольких списков:

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

    Как красиво оформить списки в тегах ul ol li? Готовые стили для списков

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

    Как оформляются списки в HTML?

    Списки бывают нумерованными и ненумерованными.

    Нумерованные списки выводятся кодом:

    Не нумерованные списки выводятся кодом:

    Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.

    Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.

    Для нумерованного списка прописываются стили нумерации для каждого пункта.

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

    list-style-type: decimal; /*арабские цифры*/

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

    list-style-type: circle; /*кружки*/
    list-style-type: square; /*квадраты*/

    Каждому пункту меню можно назначить изображение.

    list-style-image: url(‘путь к изображению’);

    Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.

    Где стили списков прописаны в шаблоне Twenty Eleven?

    Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

    Стандартный код выглядит вот так:

    Как оформить нумерованный список?

    Нумерованный список с использованием фона

    Посмотрите вот на такое симпатичное оформление нумерованного списка.

    Нравится? Давайте повторим.

    Найдите стили для тега ol. Пропишите к нему новые свойства.

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

    list-style-type: none; — отключает вывод стандартных цифр
    counter-reset: point; — задает переменную для счетчика нумерации
    position: relative; — размещает нумерацию возле самих пунктов

    before — псевдоэлемент для тега ol li. Имеет следующие стили:
    content: counter(point); — выводит значение переменной
    counter-increment: point 1; — увеличивает счетчик на 1
    position: absolute;
    background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
    margin – внешние отступы
    padding – внутренние отступы
    color – цвет текста элемента
    background – фон
    text-align – выравнивание текста
    font-weight – толщина (насыщенность) шрифта

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

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

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

    Как это реализовано? Давайте рассмотрим следующий код:

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

    Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).

    Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).

    Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.

    Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.

    Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.

    Как оформить маркированный (ненумерованный) список?

    Маркированный список ul li с чередующимися иконками

    Мне очень понравился вот такой маркированный список

    Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.

    Для эксперимента можно назначить отступы:

    Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

    В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

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

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

    Как вывести на странице несколько списков с разным оформлением?

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

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

    Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

    Вот, например, один симпатичный вариант оформления содержания:

    В HTML вы пропишите список так:

    В CSS вы пропишите стили так:

    Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.

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

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

    Как создать ссылки-якоря в списке содержания?

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

    Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.

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

    А в тексте статьи нужно написать так:

    Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама.

    Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях.

    Возможно вас еще заинтересует:

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

    Списки встречаются везде. Они используются для:

    • разбивки больших сегментов текста на части;
    • выделения важных моментов;
    • изложения «плана действий » и перечня мероприятий ( нумерованный список в HTML ).

    Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?

    Маркированные списки (или ненумерованные списки)

    Первый вид списка, который мы рассмотрим, это маркированный.

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

    Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример:

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

    Атрибут type

    Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ):

    Элементы списка — тег

    Каждый элемент в списке обворачивают в отдельную пару тегов

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

    Приведенный выше список помещен в отдельный тег

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

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

    Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом

    Упорядоченный / нумерованный список — тег

    Если вы хотите упорядочить элементы списка, тогда тег

      поможет в этом. По умолчанию он задает нумерованный список HTML :

    что на выходе дает нам:


    A. Элемент 1
    B. Элемент 2
    C. Элемент 3

    Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

    Начало нумерованного списка с определенного номера

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

    Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство!

    К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера:

    Что дает нам следующее:
    4. Шаг четыре
    5. Шаг пять
    6. Шаг шесть

    Обратный порядок

    Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed :

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

    В результате список будет выглядеть следующим образом:
    5. Пятый пункт.
    4. Четвертый пункт.
    3. Третий пункт.
    2. Второй пункт.
    1. Первый пункт.

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

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

    • Элемент верхнего уровня
      • Подчиненный элемент 1
      • Подчиненный элемент 2
    • Элемент верхнего уровня

    Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    Элемент верхнего уровня

    Вы можете использовать комбинацию тегов

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

    1. Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    2. Элемент верхнего уровня

    Используйте нумерованные списки HTML на своих страницах.

    Заключение

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

    Перевод статьи « Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта .

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

    Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки .

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

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

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

    Для создания нумерованных списков в HTML используется тег

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

    HTML Списки

    HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

    • – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
    • – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
    • – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

    В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
    Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
    Тег имеет следующий синтаксис:

    Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

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

    Пошаговая инструкция

    1. Достать ключ
    2. Вставить ключ в замок
    3. Повернуть ключ на два оборота
    4. Достать ключ из замка
    5. Открыть дверь

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

    Здесь: type – символы списка:

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

    Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега .
    В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

    Пример: Применение атрибутов type и start.

    1. Перепела
    2. Фазаны
    3. Куропатки
    4. Павлины

    Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом:

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

    Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка:

    Пример: Применение атрибута value

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

    В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

    Форматирование нумерованных списков с помощью CSS

    Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

    Стили оформления нумерованных списков

    Пример Значение Описание
    а, Ь, с lower-alpha Строчные буквы
    А, В, С upper-alpha Прописные буквы
    i, ii, iii lower-roman Римские цифры, набранные строчными буквами
    I, II, III upper-roman Римские цифры, набранные прописными буквами

    На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

    Пример: Применение свойства CSS list-style-type

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

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

    Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
    Тег имеет следующий синтаксис:

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

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

    • Windows Movie Maker
    • Pinnacle VideoSpin
    • AviSynth
    • Avidemux

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

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

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

    • Понедельник
      1. Отправить почту
      2. Визит к редактору
        • Выбор темы
        • Дкаративное оформление
        • Заключительный отчет
      3. Вечерний просмотр сообщений
    • Вторник
      1. Пересмотреть график
      2. Отправить изображения
    • Среда .
    При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию.

    Форматирование маркированных списков

    Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

    Стили оформления маркированного списка

    Значение Описание
    disc маркер в форме кружков с заливкой
    circle маркер в форме кружков без заливки
    square маркер в форме квадрата с заливкой
    none пункты списка без маркера

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

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

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

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

    Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

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

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

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

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

    А вот так выглядит в браузере:

    Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

    1.1 Стандартные маркеры для маркированного списка

    На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

    1.2 Маркер списка в виде пустого круга

    Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

    html > head > title > Пример маркированного списка с маркером в виде пустого круга / title > / head > body > p > Звезды: / p > ul type = «circle» > li > Сириус / li > li > Арктур / li > li > Поллукс / li > li > Бетельгейзе / li > li > Солнце / li > / ul > / body > / html >

    Сразу смотрим как этот код будет выглядеть в браузере:

    Рис. 1.2. Вид маркера для списка в виде окружности в браузере

    1.3 Маркер списка в виде квадрата

    Посмотрим также и последний пример с квадратным маркером для HTML списка:

    Обратите внимание на маркер, он стал квадратным:

    Рис. 1.3. Вид маркера для списка в виде квадрата в браузере

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

    Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

    Ошибка будет следующая:

    Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка

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

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

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

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка / title > / head > body > p > От одного до пяти: / p > ol > li > Первый / li > li > Второй / li > li > Третий / li > li > Четвертый / li > li > Пятый / li > / ol > / body > / html >

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

    Рис. 2.1. Нумерованный список в браузере со стандартными настройками

    Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

    2.1 Стандартные маркеры для нумерованного списка

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

    Название маркера Значение атрибута «type» Пример списка
    Маркеры в виде арабских чисел 1
    • Бадминтон
    • Бейсбол
    Маркеры в виде строчных латинских букв a
    • Джомолунгма
    • Чогори
    • Канченджанга
    Маркеры в виде заглавных латинских букв A
    • Summit Plummet
    • Tantrum Alley
    • Insano
    Маркеры в виде римских цифр в нижнем регистре i
    • Филиппинское море
    • Аравийское море
    • Коралловое море


    Маркеры в виде римских цифр в верхнем регистре I
    • Красный
    • Зеленый
    • Синий

    2.2 Своя нумерация в списке HTML

    Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка / title > / head > body > p > Начинаем нумерацию с двенадцати: / p > ol type = «a» start = «12» > li > Двенадцать / li > li > Тринадцать / li > li > Четырнадцать / li > li > Пятнадцать / li > li > Шестнадцать / li > / ol > / body > / html >

    Вот как это будет отображаться на реальном сайте:

    Рис. 2.2. Нумерация с произвольного числа в нумерованном списке

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

    Ну а сейчас перейдем к вложенным спискам HTML.

    3. Как сделать многоуровневый (вложенный) список в HTML

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

    На примере моделей автомобилей мы построим многоуровневый список в HTML:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML / title > / head > body > ul > li > Citroen ul > li > Berlingo / li > li > C1 / li > li > C2 / li > li > C3 Picasso / li > li > C4 Grand Picasso / li > / ul > / li > li > KIA / li > li > Toyota / li > li > Audi / li > li > Lexus / li > / ul > / body > / html >

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

    Рис. 3.1. Пример многоуровневого списка в HTML

    Мы делали многоуровневый список с помощью маркированного (тег

      ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ).

    Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML / title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны / li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны / li > / ul > / li > / ol > / li > / ul > / body > / html >

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

    Смотрим его вид в браузере:

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

    4. Полезные материалы по спискам HTML

    Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

    4.1 Как сделать список HTML в строку

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

    4.2 Как сделать список HTML без значка

    За это отвечает свойство list-style-type в CSS (подробнее ):

    4.3 Как сделать список в HTML по центру

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

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

    Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

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

    В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера:

    4.6 Как сделать список в HTML в несколько столбцов

    Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

    5. Практика работы со списками

    На видео ниже вы можете увидеть всю работу со списками HTML на практике:

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

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

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

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

    Первый пункт списка

    Второй пункт списка

    Третий пункт списка

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

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

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

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

    Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега 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. Первая строчка
    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. Третья строчка

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

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

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

    Каждый элемент списка должен начинаться тегом и заканчиваться тегом .

    Спецификация элемента OL:

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

     A – маркеры в виде прописных латинских букв;

     a – маркеры в виде строчных латинских букв;

     I- маркеры в виде больших римских цифр;

     i- маркеры в виде маленьких римских цифр;

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

    Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации.

    Спецификация элемента LI для нумерованного списка:

    Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1.

    Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов.

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

    Города России по величине:

    Вот так броузер отобразит данный пример:

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

    Списки определений задаются с помощью тега-контейнера . Внутри него тегом отмечается определяемый термин, а тегом – абзац с его определением. Внутри элемента нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента . Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом:

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

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

    Состав Microsoft Office

    Многофункциональный текстовый процессор

    Программа для работы с электронными

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

      , а каждый пункт списка начинается с тега
      , как показано ниже.
    • Первый пункт
    • Второй пункт
    • Третий пункт

    В списке непременно должен присутствовать закрывающий тег

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

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

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

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

    • Чебурашка
    • Крокодил Гена
    • Шапокляк
    • Крыса Лариса
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL