Теги html список маркированный. Маркированный и нумерованный список HTML. Изменение стиля маркированного списка

И. В. Яковлев | Материалы по математике | MathUs.ru

Арифметическая прогрессия

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

Последовательность

Вообразите устройство, на экране которого высвечиваются одно за другим некоторые числа. Скажем, 2; 7; 13; 1; 6; 0; 3; : : : Такой набор чисел как раз и является примером последовательности.

Определение. Числовая последовательность это множество чисел, в котором каждому числу можно присвоить уникальный номер (то есть поставить в соответствие единственное натуральное число)1 . Число с номером n называется n-м членом последовательности.

Так, в приведённом выше примере первый номер имеет число 2 это первый член последовательности, который можно обозначить a1 ; номер пять имеет число 6 это пятый член последовательности, который можно обозначить a5 . Вообще, n-й член последовательности обозначается an (или bn , cn и т. д.).

Очень удобна ситуация, когда n-й член последовательности можно задать некоторой формулой. Например, формула an = 2n 3 задаёт последовательность: 1; 1; 3; 5; 7; : : : Формула an = (1)n задаёт последовательность: 1; 1; 1; 1; : : :

Не всякое множество чисел является последовательностью. Так, отрезок не последовательность; в нём содержится ¾слишком много¿ чисел, чтобы их можно было перенумеровать. Множество R всех действительных чисел также не является последовательностью. Эти факты доказываются в курсе математического анализа.

Арифметическая прогрессия: основные определения

Вот теперь мы готовы дать определение арифметической прогрессии.

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

Например, последовательность 2; 5; 8; 11; : : : является арифметической прогрессией с первым членом 2 и разностью 3. Последовательность 7; 2; 3; 8; : : : является арифметической прогрессией с первым членом 7 и разностью 5. Последовательность 3; 3; 3; : : : является арифметической прогрессией с разностью, равной нулю.

Эквивалентное определение: последовательность an называется арифметической прогрессией, если разность an+1 an есть величина постоянная (не зависящая от n).

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

1 А вот более лаконичное определение: последовательность есть функция, определённая на множестве натуральных чисел. Например, последовательность действительных чисел есть функция f: N ! R.

По умолчанию последовательности считаются бесконечными, то есть содержащими бесконечное множество чисел. Но никто не мешает рассматривать и конечные последовательности; собственно, любой конечный набор чисел можно назвать конечной последовательностью. Например, конечная последовательность 1; 2; 3; 4; 5 состоит из пяти чисел.

Формула n-го члена арифметической прогрессии

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

Получить искомую формулу n-го члена арифметической прогрессии нетрудно. Пусть an

Задача 1. В арифметической прогрессии 2; 5; 8; 11; : : : найти формулу n-го члена и вычислить сотый член.

Решение. Согласно формуле (1 ) имеем:

an = 2 + 3(n 1) = 3n 1:

a100 = 3 100 1 = 299:

Свойство и признак арифметической прогрессии

Свойство арифметической прогрессии. В арифметической прогрессии an для любого

Иначе говоря, каждый член арифметической прогрессии (начиная со второго) является средним арифметическим соседних членов.

что и требовалось.

Более общим образом, для арифметической прогрессии an справедливо равенство

a n = a n k+ a n+k

при любом n > 2 и любом натуральном k < n. Попробуйте самостоятельно доказать эту формулу тем же самым приёмом, что и формулу (2 ).

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

Признак арифметической прогрессии. Если для всех n > 2 выполнено равенство (2 ), то последовательность an является арифметической прогрессией.

Доказательство. Перепишем формулу (2 ) следующим образом:

a na n 1= a n+1a n:

Отсюда видно, что разность an+1 an не зависит от n, а это как раз и означает, что последовательность an есть арифметическая прогрессия.

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

Характеризация арифметической прогрессии. Три числа a, b, c образуют арифметическую прогрессию тогда и только тогда, когда 2b = a + c.

Задача 2. (МГУ, экономич. ф-т, 2007) Три числа 8x, 3 x2 и 4 в указанном порядке образуют убывающую арифметическую прогрессию. Найдите x и укажите разность этой прогрессии.

Решение. По свойству арифметической прогрессии имеем:

2(3 x2 ) = 8x 4 , 2x2 + 8x 10 = 0 , x2 + 4x 5 = 0 , x = 1; x = 5:

Если x = 1, то получается убывающая прогрессия 8, 2, 4 с разностью 6. Если x = 5, то получается возрастающая прогрессия 40, 22, 4; этот случай не годится.

Ответ: x = 1, разность равна 6.

Сумма первых n членов арифметической прогрессии

Легенда гласит, что однажды учитель велел детям найти сумму чисел от 1 до 100 и сел спокойно читать газету. Однако не прошло и нескольких минут, как один мальчик сказал, что решил задачу. Это был 9-летний Карл Фридрих Гаусс, впоследствии один из величайших математиков в истории.

Идея маленького Гаусса была такова. Пусть

S = 1 + 2 + 3 + : : : + 98 + 99 + 100:

Запишем данную сумму в обратном порядке:

S = 100 + 99 + 98 + : : : + 3 + 2 + 1;

и сложим две этих формулы:

2S = (1 + 100) + (2 + 99) + (3 + 98) + : : : + (98 + 3) + (99 + 2) + (100 + 1):

Каждое слагаемое в скобках равно 101, а всего таких слагаемых 100. Поэтому

2S = 101 100 = 10100;

Мы используем эту идею для вывода формулы суммы

S = a1 + a2 + : : : + an + a n n: (3)

Полезная модификация формулы (3 ) получается, если в неё подставить формулу n-го члена an = a1 + (n 1)d:

Задача 3. Найти сумму всех положительных трёхзначных чисел, делящихся на 13.

Решение. Трёхзначные числа, кратные 13, образуют арифметическую прогрессию с первым членом 104 и разностью 13; n-й член этой прогрессии имеет вид:

an = 104 + 13(n 1) = 91 + 13n:

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

an 6 999; 91 + 13n 6 999;

n 6 908 13 = 6911 13 ; n 6 69:

Итак, в нашей прогрессии 69 членов. По формуле (4 ) находим искомую сумму:

S = 2 104 + 68 13 69 = 37674: 2

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

С элементом

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

  На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

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

  Вид маркера

  Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

  • disc - маркеры в виде закрашенного кружка;
  • circle - маркеры в виде незакрашенного кружка;
  • square - квадратные маркеры.

  Пример 1. Изменение вида маркера

  • Сепульки
  • Сепулькарии
  • Сепуление

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

• не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
• добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

  Пример 2. Использование::before

  • Сепульки
  • Сепулькарии
  • Сепуление

  Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача - переместить текст левее на один символ.

  

  Рис. 2. Произвольные маркеры в списке

  Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

  

  Рис. 3. Выбор символа в LibreOffice

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

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

  Пример 3. Использование изображения в качестве маркера

  • Сепульки
  • Сепулькарии
  • Сепуление

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

  

  Рис. 4. Рисунок в качестве маркера

  Применение list-style-image обладает некоторыми недостатками:

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

  Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка

• мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

  Пример 4. Использование background

  Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; }

  Положение текста и маркера

  Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).

  inside	outside

  Рис. 5. Размещение маркеров относительно текста

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

  Пример 5. Изменение положения маркеров

  • Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.
  • При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.
  • После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.

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

  

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

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

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

  Теги

  и

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

  
  .

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

  • (LI - List Item, элемент списка). Тег
  • не нуждается в соответствующем закрывающем теге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.

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

    Знаки зодиака:

    • Овен

    • Телец

    • Близнецы

    • Дева

    • Весы

    • Скорпион

    • Стрелец

    • К озерог

    • Водолей

    • Рыбы

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

    Заметим, что кроме элементов списка, отмечаемых тегом

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

    Примечание

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

    В теге

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

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

    Примечание

    В настоящее время наличие параметра COMPACT в теге

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

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

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

    .

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

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

    • .

      Пример записи:

    • .

      Примечание

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

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

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

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

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

        Если же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тегов

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

        Или принудительного перевода строки
        . Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 2.2, показан ниже:

        который будет передан только один раз. Размеры файла, содержащего маленькое изображение, также крайне незначительны.

        Примечание

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

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

        Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.

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

        Компьютерные комплектующие:

        • Материнская плата
        • Оперативная память
        • Жесткий диск
        • Видеокарта
        • И т.д.

        Давайте теперь посмотрим как это всё воспроизвести в html

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

        • — unordered list (неупорядоченный список). Этот тег ставится в начале списка и закрывается в самом конце. Он сообщает нам, что здесь будет находиться маркированный неупорядоченный список.
          • — list item (пункт списка). В эти теги заключается каждый элемент списка.

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

          • Peugeot
          • Opel

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

          

          Атрибуты

          Ну и конечно я не могу не рассказать вам про , относящиеся к данным тегам. Правда на самом деле эти атрибуты в html уже не используются, так как всё тоже самое проще и удобнее проделывать через стили, то есть CSS. Но я всё равно хотел бы рассказать вам для общего развития, поэтому я познакомлю вас с атрибутом type и его значениями.

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

          

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

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

                

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

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

                Сделать это абсолютно несложно, просто в тот тег

              • , который мы хотим расширить добавляем новый контейнер списка
                , и уже туда вставляем очередной набор тегов
                • между которыми и будут написаны модели автомобилей. Все понятно? Если нет, то смотрим, как это выглядит в коде.

                  

                  Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.

                  

                  Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.

                  

                  Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс "HTML5 и CSS3 с нуля до профи ". Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.

                  С уважением, Дмитрий Костин.

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

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

                  Данная статья — третья в данном небольшом курсе по основам 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 на практике: