HTML списки


Содержание
Илон Маск рекомендует:  Атрибут language в HTML

Списки

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

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

    Объединение фрагментов информации в единую структуру для придания удобочитаемого вида.

Описание сложных пошаговых процессов.

  • Расположение информации в стиле оглавления, пункты которого указывают на соответствующие разделы документа.
  • Заметим, что приведенные выше пункты как раз и организованы в виде списковой структуры.

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


      ,

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

    Одним из типов списков, реализованных в языке 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, показан ниже:

    HTML списки

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

    Элементы списка будут помечены цифрами:

    пример


    1. Coffee
    2. Tea
    3. Milk

    Упорядоченные HTML списки — The Type Атрибут

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

    Тип Описание
    type=»1″ Элементы списка будут пронумерованы цифрами (default) по (default)
    type=»A» Элементы списка будут пронумерованы заглавными буквами
    type=»a» Элементы списка будут пронумерованы строчными буквами
    type=»I» Элементы списка будут пронумерованы заглавными римскими цифрами
    type=»i» Элементы списка будут пронумерованы строчными римскими цифрами

    Числа:

    1. Coffee
    2. Tea
    3. Milk

    Заглавные буквы:

    1. Coffee
    2. Tea
    3. Milk

    Строчные буквы:

    1. Coffee
    2. Tea
    3. Milk

    Прописные римские цифры:

    1. Coffee
    2. Tea
    3. Milk

    Строчные римские цифры:

    1. Coffee
    2. Tea
    3. Milk

    HTML Описание Списки

    HTML также поддерживает описание списков.


    Список описания список терминов, с описанием каждого термина.

    Тег определяет список Описания, тэг определяет термин (name) , а тег описывает каждый термин:

    пример

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

    Список может быть вложенными (lists inside lists) :

    пример

    • Coffee
    • Tea
      • Black tea
      • Green tea
    • Milk

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

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

    списки HTML могут быть оформлены по-разному с помощью CSS.

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

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

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

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

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

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

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

    Заключение

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

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

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

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

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

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

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

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

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

      в качестве дочерних элементов может содержать только теги
    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 существует 3 вида списков:

    Рассмотрим их подробнее.

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

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

    Создается список определений с помощью 3-х тегов:

    • dl — definition list — основной, или родительский тег;
    • dt — definition ternmin — вложенный тег;
    • dd — definition description — вложенный тег.

    Код списка выглядит так:

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

    Обратите внимание, что элемент dd имеет смещение от левого края окна браузера на 40px вправо. За счет этого определение визуально отличается от термина и привлекает к себе внимание.


    Список определений хорошо форматировать с помощью css. Т.к. вряд ли на сайте будет много вариантов таких списков, имеет смысл использовать просто селектор тега, не прибегая ни к использованию классов, ни id. Например, наш список можно отформатировать так:

    Смотрим, что получилось на втором примере:

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

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

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

      По умолчанию списки нумеруются арабскими, или десятичными цифрами: 1, 2, 3, 4 и т.д. Но это можно изменить как для всего списка (тег

        ), так и для отдельного элемента списка (тег
        ), добавив к ним атрибут type=»A», например:

      Атрибут type может иметь следующие значения:

      • type=»A» — прописные латинские цифры;
      • type=»a» — строчные латинские цифры;
      • type=»I» — прописные римские цифры;
      • type=»i» — строчные римские цифры;
      • type=»1″ — арабские цифры (значение по умолчанию, можно не указывать).

      Попробуем добавить к элементам
      атрибут type с разными значениями:

      Вот как будет выглядеть:

      Не особо красиво, не так ли?

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

      Атрибут reversed позволяет «перевернуть» нумерацию списка:

      Для упорядоченного списка можно также добавить атрибут start=»число». Под числом подразумевается номер начального элемента списка, с которого нужно начать нумерацию. Может быть использован, например, в описании действий в инструкции или уроке, когда это описание нужно разорвать иллюстрацией (одной или несколькими).

      HTML Списки

      Пример список HTML

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

      • Страница
      • Страница
      • Страница
      • Страница

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

      1. Первая страница
      2. Вторая страница
      3. Третья страница
      4. Четвертая страница

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

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

      Элементы списка по умолчанию, будут помечены диском (маленькие черные кружками):

      Пример

      • Кофе
      • Чай
      • Молоко

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

      Свойство CSS list-style-type используется для определения стиля элемента списка маркер:

      Значение Описание
      disc Задает элемент списка маркер как диск (по умолчанию)
      circle Задает элемент списка маркер как круг
      square Задает элемент списка маркер как квадрат
      none Элементы списка не будут отмечены

      Пример — Диск


      • Кофе
      • Чай
      • Молоко

      Пример — Круг

      • Кофе
      • Чай
      • Молоко

      Пример — Квадрат

      • Кофе
      • Чай
      • Молоко

      Пример — Ничего

      • Кофе
      • Чай
      • Молоко

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

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

      Элементы списка будут обозначены номера по умолчанию:

      Пример

      1. Кофе
      2. Чай
      3. Молоко

      Упорядоченный список HTML — Атрибут type

      Атрибут type в теге

        , определяет тип элемента списка маркер:

      Создание списков в HTML

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

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

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

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

      По умолчанию в качестве маркера списка используется чёрный кружок (disk). Добавив в тег атрибут type и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle) или чёрный квадрат (square).


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

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

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

      Так как с нумерованными списками не всегда всё так просто, для тега создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):

      1. type. Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).

      2. start. Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение — номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.

      3. reversed. Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.

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

      Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов — отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.

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

      Не такой известный тип списка, как рассмотренные выше. Состоит из терминов и их определений. Создаётся с помощью тегов:

      — контейнер, содержащий список.

      Область применения списков определений — глоссарии, справочники, тесты, словари и другие ёмкие перечисления вида «Термин — объяснение».

      Вот пример списка определений:

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

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

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

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

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

      Таблицы и списки в HTML

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

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

      Создание списков: нумерованные списки в html

      Этот вид списков создается в контейнере ol. Его функцией является перечисление элементов с помощью цифр. Как правило, нумерованные списки используются для навигации по тексту статьи или перечисления каких-либо элементов внутри неё.

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

      Списки в 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 списки

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

      Элементы списка будут помечены цифрами:

      пример

      1. Coffee
      2. Tea
      3. Milk

      Упорядоченные HTML списки — The Type Атрибут

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

      Тип Описание
      type=»1″ Элементы списка будут пронумерованы цифрами (default) по (default)
      type=»A» Элементы списка будут пронумерованы заглавными буквами
      type=»a» Элементы списка будут пронумерованы строчными буквами
      type=»I» Элементы списка будут пронумерованы заглавными римскими цифрами
      type=»i» Элементы списка будут пронумерованы строчными римскими цифрами

      Числа:

      1. Coffee
      2. Tea
      3. Milk

      Заглавные буквы:

      1. Coffee
      2. Tea
      3. Milk

      Строчные буквы:

      1. Coffee
      2. Tea
      3. Milk

      Прописные римские цифры:

      1. Coffee
      2. Tea
      3. Milk

      Строчные римские цифры:

      1. Coffee
      2. Tea
      3. Milk

      HTML Описание Списки

      HTML также поддерживает описание списков.

      Список описания список терминов, с описанием каждого термина.

      Тег определяет список Описания, тэг определяет термин (name) , а тег описывает каждый термин:

      пример

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

      Список может быть вложенными (lists inside lists) :

      пример

      • Coffee
      • Tea
        • Black tea
        • Green tea
      • Milk

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

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

      списки HTML могут быть оформлены по-разному с помощью CSS.

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

  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL