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


Оглавление (нажмите, чтобы открыть):

Вложенные списки с автоматической нумерацией

Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.

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


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

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

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

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

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

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

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

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

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

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

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

    Атрибут type

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

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

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

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

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

      , но каждый
      также поддерживает собственный атрибут 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 многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой:

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

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

      и

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

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

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

    Заключение

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

    Данная публикация представляет собой перевод статьи « Numbered and Bullet Point Lists in HTML » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

    • Сходить в магазин
      • Купить молоко
      • Купить хлеб
    • Пройти уроки на Code Basics

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

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

    • Сходить в магазин
      1. Купить молоко
      2. Купить хлеб
    • Пройти уроки на Code Basics

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


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

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

    Создать многоуровневый список достаточно просто.

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

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

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

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

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

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

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

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

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

    • List Item 1
    • List Item 2
      • List Item 2.1
      • List Item 2.2
        1. List item 2.3.1
        2. List item 2.3.2
        3. List item 2.3.3
      • List Item 2.3
      • List Item 2.4
    • List Item 3
    • List Item 4
    • List Item 5
      1. List Item 5.1
      2. List Item 5.2
      3. List Item 5.3
      4. List Item 5.4
    • List Item 6
    • List Item 7

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

    Правильный способ сделать HTML вложенный список?

    в документах W3 есть пример вложенного списка префиксом DEPRECATED EXAMPLE: , но они никогда не исправляли его с не-устаревшим примером, ни объяснили точно, что не так с примером.

    Итак, какой из этих способов является правильным способом написания списка HTML?

    1: вложенный элемент

      — Дитя Родитель

    2: вложенный элемент

      является ребенком
      он принадлежит в

    7 ответов

    2 является правильным.

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

    ссылка на W3C Wiki в списках (взято из комментария ниже): HTML списки Wiki.

    ссылка на HTML5 W3C ul spec:в HTML5 ul . Обратите внимание, что ul элемент может содержать ноль или больше li элементы. То же самое относится к в HTML5 ol . Описание список (в HTML5 dl ) похож, но позволяет оба dt и dd элементы.

    • dl = список определений.
    • ol = упорядоченный список (номера).
    • ul = неупорядоченный список (пули).

    Вариант 2 верен: вложенный

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

    если вы проверка, Вариант 1 появляется как ошибка в html 5 — credit:user3272456

    правильно:

      как дитя

    правильный способ сделать HTML вложенный список с вложенным

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

    стандарт W3C для Списки Вложенности

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

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

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

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

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

    Если вы проверяете, Вариант 1 появляется как ошибка в html 5, поэтому вариант 2 верен.

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

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

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

    например, gmail, inbox и evernote позволяют создавать такие списки:

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

    Списки в HTML

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

    Что такое списки в HTML, какие они бывают


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

    Какие бывают списки?

    • Нумерованный список;
    • Маркированный список (не нумерованный);
    • Многоуровневый список;
    • Список определений;
    • Выпадающий список.

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

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

    Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.

    Разница очень заметна, не так ли? Правильный список такой, что легко «складывается» в предложение с простым перечислением однородных членов.

    Где применяются списки?

    1. Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
    2. Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
    3. Многоуровневые списки используются для детализации информации отдельных элементов;
    4. Список определений в HTML используется при необходимости форматирования словаря.

    HTML-практикум ч.1: как сделать упорядоченный нумерованный список

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

    Соответственно, — начало и конец элемента списка, а — начало и конец самого нумерованного списка.

    Покажу на примере. Код:

    По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».

    Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:

    TYPE может принимать значения:

    • «A» — для нумерации A, B..
    • «a» — для нумерации a, b..
    • «I» — для нумерации I, II..
    • «i» — для нумерации i, ii..
    • «1» — для нумерации 1. 2. и далее по порядку.

    Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.

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

    HTML-практикум ч.2: маркированный список

    Маркированные списки создаются при помощи тегов и , последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега (ul — unordered list).

    Соответственно, — начало и конец каждого из элементов списка, а — начало и конец самого маркированного списка.

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

    Вы также можете выставить для элементов
    атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:

    Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу

      . Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».

    HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров

    Это очень просто. Неупорядоченные списки также создаются при помощи тегов и , — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».

    HTML-практикум ч.4: вложенный многоуровневый древовидный список

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

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

    Проблема только одна — не запутаться в коде. Решается она либо внимательностью, либо созданием отступов для себя: чтобы в HTML было твердо и четко все разложено по полочкам — где что находится.

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

    ul style = «display: block; list-style-type: none;» >

    li > a href = «#00» > span >00 / span > / a > / li >

    li > a href = «#01» > span >01 / span > / a > / li >

    li > a href = «#02» > span >02 / span > / a > / li >

    li > a href = «#03» > span >03 / span > / a >

    ul >
    li > a href = «#03.1» > span > 03.1 / span > / a >
    ul >
    li > a href = «#03.1.1» > span >03.1.1 / span > / a >
    ul style = «list-style-type: disc;» >
    li > a href = «#03.1.1.1» > span >03.1.1.1 / span > / a > / li >
    li > a href = «#03.1.1.2» > span >03.1.1.2 / span > / a > / li >
    li > a href = «#03.1.1.3» > span >03.1.1.3 / span > / a > / li >
    / ul >
    / li >

    li > a href = «#03.1.2» > span >03.1.2 / span > / a >
    ol >
    li > a href = «#03.1.2.1» > span >03.1.2.1 / span > / a > / li >
    li > a href = «#03.1.2.2» > span >03.1.2.2 / span > / a > / li >
    li > a href = «#03.1.2.3» > span >03.1.2.3 / span > / a > / li >
    / ol >
    / li >
    / ul >
    / li >
    / ul >
    / li >

    li > a href = «#04» > span >04 / span > / a > / li >

    li > a href = «#05» > span >05 / span > / a > / li >
    / ul >

    HTML-практикум ч.5: как сделать список определений

    Списки определений создаются при помощи тегов , и .

    • (dl — description list) — обозначает начало и конец списка определений;
    • (dl — description term) — обозначает начало и конец одного термина;
    • (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.

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

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

    Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».

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

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

    Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.

    HTML списки

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

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


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

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

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

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

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

    Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега

      .

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

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

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

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

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

    Рис. 14 Виды нумерованных списков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Тэг (HTML Description List Element) определяет список, тэг (HTML Definition Term Element) определяет его имя, а тег (HTML Description Element) описывает его значение.

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

    Как вы можете заметить значение списка описаний (элемент ) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:

    Рис. 16 Список описаний.


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

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

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

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

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

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

    Тег Chrome

    Firefox Opera Safari IExplorer Edge
    Нет 8.0 Нет Нет Нет Нет

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

    Для тех у кого браузер не отображает результат:

    и .»>
    Использование глобального атрибута contextmenu , тегов и .

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы выполните практические задания.

    • Используя полученные знания составьте следующие HTML списки:

    Практическое задание № 6.

    Практическое задание № 7.

    Практическое задание № 8.

    Практическое задание № 9.

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

    Кажется, вы используете блокировщик рекламы 🙁

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

    Вложенные списки с автоматической нумерацией

    Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.

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


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

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

      HTML Урок 15 Списки

      Наиболее распространенные HTML списки — это упорядоченные списки и неупорядоченные списки:

      HTML Списки

      Упорядоченный список:

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

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

      • Элемент списка
      • Элемент списка
      • Элемент списка

      Примеры

      Неупорядоченный список
      Как создать неупорядоченный список в HTML документе.

      Упорядоченный список
      Как создать упорядоченный список в HTML документе.

      (Вы найдете больше примеров внизу этой страницы).

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

      Неупорядоченный список начинается тегом

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

      Эти пункты списка отмечаются маркерами bullit (как правило небольшие черные круги).

      • Кофе
      • Молоко

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

      HTML Упорядоченные Списки

      Упорядоченный список начинается с тега

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

      Пункты списка маркеруются числами.

      1. Кофе
      2. Молоко

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

      HTML Списки Определений

      Список определений — это список пунктов с описанием каждого пункта.

      Тег определяет список определений.

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

      Кофе
      — черный горячий напиток
      Молоко
      — белый холодный напиток

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

      Кофе — черный горячий напиток Молоко — белый холодный напиток

      Основные Замечания — Полезные Советы

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

      Примеры

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

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

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

      Вложенный список 2
      Демонстрирует более сложный вложенный список.

      Список определений
      Демонстрирует список определений.

      Мастер Йода рекомендует:  Ищем человека по IP адресу
      Добавить комментарий