Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Теги списков в html: Списки в HTML. Все о HTML списках

On

Теги списков в html: Списки в HTML. Все о HTML списках

By alexxlab

Содержание

HTML-списки

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

  • маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
  • нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
  • список определений — <dl> — состоит из пар термин <dt> — <dd> определение.

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

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

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

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью элемента <ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

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

ul {
   padding-left: 40px;
   margin-top: 1em;
   margin-bottom: 1em;
}

Каждый элемент списка создаётся с помощью элемента <li> (от англ. List Item).

Для элемента <ul> доступны ‎глобальные атрибуты.

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>
  • Microsoft
  • Google
  • Apple
  • IBM

Фигура. 1. Маркированный список

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

Нумерованный список создаётся с помощью элемента <ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {
   padding-left: 40px;
   margin-top: 1em;
   margin-bottom: 1em;
}

Для элемента <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для элемента <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты элемента <ol>
АтрибутОписание, принимаемое значение
reversedАтрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
startАтрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
typeАтрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>
  1. Microsoft
  2. Google
  3. Apple
  4. IBM

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

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

Списки определений создаются с помощью элемента <dl>. Для добавления термина применяется элемент <dt>, а для вставки определения — элемент <dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {
   margin-top: 1em;
   margin-bottom: 1em;
}

Для элементов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>
Режиссер:
Петр Точилин
В ролях:
Андрей Гайдулян
Алексей Гаврилов
Виталий Гогунский
Мария Кожевникова

Фигура. 3. Список определений

4. Как создать вложенный список

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

<ul>
 <li>Пункт 1.</li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>
  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.
    • Подпункт 2.3.
  • Пункт 3.

Фигура. 4. Вложенный список

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

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

<ol>
   <li>пункт</li>
   <li>пункт
      <ol>
         <li>пункт</li>
         <li>пункт</li>
         <li>пункт
            <ol>
               <li>пункт</li>
               <li>пункт</li>
               <li>пункт</li>
            </ol>
         </li>
         <li>пункт</li>
      </ol>
   </li>
   <li>пункт</li>
   <li>пункт</li>
</ol>

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

  • counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
  • counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
  • content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
ol {
   /* убираем стандартную нумерацию */
   list-style: none;
   /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */
   counter-reset: li;
}
li:before {
   /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
   counter-increment: li;
   /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
   content: counters(li, ".") ". ";
}
  1. пункт
  2. пункт
    1. пункт
    2. пункт
    3. пункт
      1. пункт
      2. пункт
      3. пункт
    4. пункт
  3. пункт
  4. пункт

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

— HTML | MDN

HTML-элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (<ol>), неупорядоченном списке (<ul>), или меню (<menu>). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.

Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.

Категории контентаНет.
Разрешённое содержимоеПотоковый контент
Пропуск теговЗакрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент <li> или если в родительском элементе нет больше содержимого.
Разрешённые родителиЭлементы <ul>, <ol>, или <menu>. Хотя и не соответствует использованию, устаревший <dir> (en-US) тоже может быть родительским элементом.
Разрешённые ARIA-ролиmenuitem, menuitemcheckbox, menuitemradio, option, presentation, radio, separator, tab, treeitem
DOM-интерфейсHTMLLIElement (en-US)

Этот элемент включает глобальные атрибуты.

value
Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента <ol>. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут value не имеет значения для неупорядоченных списков (<ul>) или для меню (<menu>).

Примечание: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.

Примечание: Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.

type
Этот символьный атрибут указывает на тип нумерации:

Строчные буквы — это которые не заглавные.

  • a: строчные буквы
  • A: заглавные буквы
  • i: строчные римские цифры
  • I: заглавные римские цифры
  • 1: цифры

Этот атрибут переопределяет тип унаследованный от родительского элемента <ol> или любого другого.

Примечание к использованию: Этот атрибут был убран: используйте CSS свойство list-style-type (en-US) взамен.

Для более подробных примеров смотрите страницы <ol> и <ul>.

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

<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

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

<ol type="I">
    <li value="3">Третий элемент</li>
    <li>Четвёртый элемент</li>
    <li>Пятый элемент</li>
</ol>

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

<ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ul>

BCD tables only load in the browser

  • Остальные списковые HTML элементы: <ul>, <li>, <menu> и устаревший <dir> (en-US);
  • CSS свойства, которые были бы полезны для стилизации <li> элементов:
    • свойство list-style (en-US), для выбора стиля маркера/порядкового номера,
    • CSS счётчики, для обработки сложных вложенных списков,
    • свойство margin, для контроля отступа между элементами списка.

Списки (ul, ol, li) в HTML

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

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

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

<ol>
<li>Мышь</li>
<li>Кот</li>
<li>Сыр</li>
</ol>

На странице браузера результат будет показан так:

  1. Мышь

  2. Кот

  3. Сыр

— цифры нумерации подставляются автоматически. Стилистику нумерации можно поменять с помощью атрибута <ol type=»…»> . Атрибут type может принимать следующие значения:

  • «A» — латинские заглавные буквы


  • «a» — латинские строчные буквы


  • «I» — римские цифры (заглавные)


  • «i» — римские цифры (строчные)


  • «1» — арабские цифры. Используется по умолчанию

Чтобы начать список не с единицы, а с другого числа, необходимо использовать атрибут «start». К примеру, если нужно начать список с «5», то открывающий список тег будет выглядеть так: <ol start=»5″> .


Чтобы инвертировать последовательность чисел (сделать числа по убыванию), напишите внутри тега слово «reversed», чтобы получилось так: <ol reversed>

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

Маркированный список — это список, в котором каждый пункт отмечен не цифрой, а маркером. К примеру, точкой или стрелкой.

<ul>
<li>Мышь</li>
<li>Кот</li>
<li>Сыр</li>
</ul>

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

Стиль маркеров перед элементами списка можно поменять с помощью атрибута <ul type=»…»> . Где атрибут type может принимать следующие значения:

  • «disc» — чёрная точка

  • «circle» — кружок с пустотой внутри

  • «square» — чёрный квадрат

Создание списков в HTML | bookhtml.ru

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

Допустим, нам необходимо создать список из пяти пунктов. Можно создать такой список примитивным методом, применив тег <br> — тег переноса строки. Название списка возьмем в абзац — тег <p>.

Пример:

<p>Название списка</p>

1. Первый пункт списка <br>

2. Второй пункт списка <br>

3. Третий пункт списка <br>

4. Четвертый пункт списка <br>

5. Пятый пункт списка <br>

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

Для создания нумерованного списка (пункты списка отсортированы по номерам) применяется тег <ol>. Весь список помещаем между открывающим тегом <ol> и закрывающим тегом </ol>, а каждый пункт списка ограничиваем тегами <li> и </li>.

Пример:

<p>Название списка</p>

<ol>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Для создания ненумерованного списка (без нумерации пунктов списка) вместо тега <ol> применяем тег <ul> и каждый элемент списка выделить тегом <li>.

Пример:

<p>Название списка</p>

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

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

Теперь давайте поговорим о некоторых атрибутах, используемых при создании списков и которые будут необходимы и нам. Вначале рассмотрим атрибуты списка <ol>. При просмотре в браузере мы видим, что нумерация идет арабскими цифрами. Если мы хотим что-бы нумерация была римскими цифрами к тегу <ol> добавляем атрибут type со значением «I» (большая буква I).

Пример:

<ol type=»I»>

Если хотим маленькие римские цифры — ставим значение «i» (маленькую букву i).

Для буквенного обозначения пунктов списка — ставим значение «A» или «a» (большую или маленькую букву А).

Пример:

<ol type=»A»>

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

Пример:

<p>Название списка</p>

<ol type=»I» start=»3″>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

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

У ненумерованного списка тоже есть атрибут type отвечающий за форму метки у каждого пункта списка. Без атрибута ненумерованный список имеет метки каждого элемента списка — черный кружок. Если мы хотим иметь метку — черный квадрат, к атрибуту type пишем значение «skuare». Метка — белый кружок — это значение «circle».

Пример:

<p>Название списка</p>

<ul type=»skuare»>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

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

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

Пример:

<p>Название списка</p>

<ol type=»I»>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>


<ul type=»skuare»>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>


<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Не забывайте проверять результаты работы в браузере.

Следующий урок — создание ссылок


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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Маркированный список</title>
</head>
<body>
   <ul>
      <li>Камень</li>
      <li>Ножницы</li>
      <li>Бумага</li>
   </ul>
</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Нумерованный список</title>
</head>
<body>
   <ol>
      <li>Камень</li>
      <li>Ножницы</li>
      <li>Бумага</li>
   </ol>
</body>
</html>

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

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

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

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

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

<li value=”45”>Сорок пятый элемент после тридцать восьмого</li>

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

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

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

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

<dt> — тег термина.

<dd> — тег определения

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Список определений</title>
</head>
<body>
   <dl>
      <dt>Дескриптор</dt>
       <dd>Основная единица языка разметки, известная всем как "Тег".</dd>
      <dt>Атрибут</dt>
       <dd>Свойство тега, дающее ему дополнительные возможности оформления текста.</dd>
      <dt>Метка</dt>
       <dd>Одиночный тег, который не нужно закрывать.</dd>
   </dl>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Многоуровневый список</title>
</head>
<body>
<strong>Языки программирования делятся на:</strong>
<ul>
  <li>Структурные</li>
    <ol>
      <li>Pascal</li>
      <li>Oberon</li>
      <li>C</li>
        <ol>
          <li>Go</li>
          <li>Limbo</li>
        </ol>
      <li>Lua</li>
    </ol>
  <li>Объектно-ориентированные</li>
    <ol>
      <li>C++</li>
      <li>Java</li>
    </ol>
  <li>Функциональные</li>
    <ol>
      <li>Lisp</li>
      <li>Python</li>
    </ol>
</ul>
</body>
</html>

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

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

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена маркированным спискам HTML. Маркированный или как еще говорят, неупорядоченный список HTML формируется тегами <ul>, <li>.

Маркированный список. Формирование маркированного HTML списка. Теги <ul>, <li>.

Содержание статьи:

Как говорилось ранее, маркированный список формируются двумя тегами <ul>, <li>. Маркированные списки — это одна из разновидностей HTML списков.

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

Тег <ul> предназначен для формирования маркированных списков. По умолчанию, маркер стоящий слева от элементов списка имеет вид закрашенного круга, но это легко исправить атрибутами тегов <ul> и <li>, приоритет имею атрибуты тега <li>, это справедливо и для нумерованных списков.

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

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

Теги <ul>, <li> являются парными HTML тегами, то есть для их корректной работы необходим закрывающий тег, но, у тега <li> можно закрывающий тег не ставить, хотя, это считается дурным тоном.

<ul>

<li>Первый</li>

<li>Второй</li>

</ul>



<ul>

 

<li>Первый</li>

 

<li>Второй</li>

 

</ul>

Атрибуты тегов маркированного списка 

Тег <ul>, так же, как и любой другой тег из группы HTML списков, имеет атрибуты событий и универсальные HTML атрибуты. Для тега <ul> доступен только один  уникальный HTML атрибут:

Type – Атрибут type позволяет изменить вид маркера неупорядоченного списка.

Обратите внимание, если значения атрибута type у тега <ul> и расположенного внутри него тега <li> будут разными, то к конкретному элементу списка будет применено значения, которое присвоено тегу <li>, эта особенность справедлива и для нумерованных списков <ol>.

Тег <li> имеет все универсальные HTML атрибуты, атрибуты событий и два уникальных атрибута:

Value – атрибут value изменяет значение нумерации для упорядоченных списков

Type – атрибут type изменяет вид маркера, как в списке директорий, так и в маркированном списке и списке меню.

Другие HTML списки 

Помимо списка определений. Есть еще четыре HTML списка:

Тег <ol> формирует нумерованный список. Тег <dir> формирует список директорий. Тег <dl> формирует список определений. Контейнер <dt> служит для хранения и отображения термина списка определений. В контейнер <dd> помещается определение термина списка определений. Тег <menu> создает список меню.

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример использования тега OL</title>
</head>
<body>
<ul>
<li>Первый
<ul type=»square»>
<li>1.1</li>
<li type=»circle»>1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>
</li>
<li>Второй
<ul type=»circle»>
<li>2.1</li>
<li type=»disc»>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Третий
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>

</ul>
</body>
</html>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Пример использования тега OL</title>

</head>

<body>

<ul>

<li>Первый

<ul type=»square»>

<li>1.1</li>

<li type=»circle»>1.2</li>

<li>1.3</li>

<li>1.4</li>

</ul>

</li>

<li>Второй

<ul type=»circle»>

<li>2.1</li>

<li type=»disc»>2.2</li>

<li>2.3</li>

</ul>

</li>

<li>Третий

<ul>

<li>3.1</li>

<li>3.2</li>

<li>3.3</li>

</ul>

</li>

 

</ul>

</body>

</html>

Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

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

Списки HTML — Веб учебники

На сайте нет рекламы

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

Пример

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

  • Пункт
  • Пункт
  • Пункт
  • Пункт

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

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

Попробуйте сами »

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

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

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

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

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

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

HTML Описанный список

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

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

Тег <dl> определяет список описаний,
тег <dt> определяет термин (имя),
и тег <dd> описывает каждый термин:

Пример

<dl>
 
<dt>Кофе</dt>
 
<dd>- черный горячий напиток</dd>
 
<dt>Молоко</dt>
 
<dd>- белый холодный напиток</dd>
</dl>

Попробуйте сами »

HTML Теги списка

ТегиОписание
<ul>Определяет неупорядоченный список
<ol>Определяет упорядоченный список
<li>Определяет элемент списка
<dl>Определяет описание списка
<dt>Определяет термин в описание списка
<dd>Описывает термин в описание списка

упорядоченных списков HTML

Тег HTML

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

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

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

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

    1. .

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

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

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

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

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

        Номеров:

        1. Кофе

        2. Чай

        3. Молоко

        Попробуй сам »

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

        1. Кофе

        2. Чай

        3. Молоко

        Попробуй сам »

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

        1. Кофе

        2. Чай

        3. Молоко

        Попробуй сам »

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

        1. Кофе

        2. Чай

        3. Молоко

        Попробуй сам »

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

        1. Кофе

        2. Чай

        3. Молоко

        Попробуй сам »

        Подсчет контрольного списка

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

        Пример

        1. Кофе

        2. Чай

        3. Молоко

        Попробуй сам »

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

        Списки могут быть вложенными (список внутри списка):

        Пример

        1. Кофе

        2. Чай

          1. Черный чай

          2. Зеленый чай

        3. Молоко

        Попробуй сам »

        Примечание: Элемент списка (

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

        Краткое содержание главы

        • Используйте элемент HTML
            для определения упорядоченного списка
          1. Используйте атрибут HTML type для определения типа нумерации
          2. Используйте элемент HTML
          3. для определения элемента списка
          4. Списки могут быть вложенными
          5. Элементы списка могут содержать другие элементы HTML

        Теги списка HTML

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

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

            Тег HTML

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

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

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

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

              • тег.

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

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

                Свойство CSS list-style-type используется для определения стиля
                маркер элемента списка. Может иметь одно из следующих значений:

                Значение Описание
                диск Устанавливает маркер элемента списка в виде маркера (по умолчанию)
                круг Устанавливает маркер элемента списка в круг
                квадрат Устанавливает маркер элемента списка в квадрат
                нет Пункты списка не будут помечены

                Пример — Диск

                • Кофе

                • Чай

                • Молоко

                Попробуй сам »

                Пример — Окружность

                • Кофе

                • Чай

                • Молоко

                Попробуй сам »

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

                • Кофе

                • Чай

                • Молоко

                Попробуй сам »

                Пример — Нет

                • Кофе

                • Чай

                • Молоко

                Попробуй сам »

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

                Списки могут быть вложенными (список внутри списка):

                Пример

                • Кофе

                • Чай

                  • Черный чай

                  • Зеленый чай

                • Молоко

                Попробуй сам »

                Примечание: Элемент списка (

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

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

                Списки

                HTML можно стилизовать по-разному с помощью CSS.

                Один из популярных способов — задать стиль для списка по горизонтали, чтобы создать меню навигации:

                Пример

                ul {
                тип списка: нет;
                маржа: 0;
                отступ: 0;
                переполнение: скрыто;
                цвет фона: # 333333;
                }

                li {
                поплавок: левый;
                }

                li a {
                дисплей: блок;
                цвет: белый;
                выравнивание текста: по центру;
                отступ: 16 пикселей;
                текст-оформление: нет;
                }

                li a: hover {
                background-color: # 111111;
                }



                Попробуй сам »

                Краткое содержание главы

                • Используйте элемент HTML
                    для определения неупорядоченного списка
                  • Используйте свойство CSS list-style-type для определения маркера элемента списка
                  • Используйте элемент HTML
                  • для определения элемента списка
                  • Списки могут быть вложенными
                  • Элементы списка могут содержать другие элементы HTML
                  • Используйте свойство CSS float: left для отображения списка по горизонтали

                  Теги списка HTML

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

                      HTML тег li

                      Пример

                      Один упорядоченный (

                        ) и один неупорядоченный (

                          ) список HTML:

                          Кофе

                          Чай

                          Молоко

                          • Кофе

                          • Чай

                          • Молоко

                          Попробуй сам »

                          Дополнительные примеры «Попробуйте сами» ниже.

                          Определение и использование

                          Тег

                        • определяет элемент списка.

                          Тег

                        • используется внутри упорядоченных списков (
                            ), неупорядоченных списков (

                              ) и в
                              списки меню (

                              ).

                              В

                                и

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

                                В

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

                                  Совет: Используйте CSS для стилизации списков.

                                  Поддержка браузера

                                  Элемент
                                		1.  Есть Есть Есть Есть Есть

                                  Атрибуты

                                  Атрибут Значение Описание
                                  значение номер Только для списков

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

                                  Глобальные атрибуты

                                  Тег

                                2. также поддерживает глобальные атрибуты в HTML.

                                  Атрибуты событий

                                  Тег

                                3. также поддерживает атрибуты событий в HTML.

                                  Другие примеры

                                  Пример

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

                                  1. Кофе

                                  2. Чай

                                  3. Молоко

                                  4. Вода

                                  5. Сок

                                  6. Пиво

                                  Попробуй сам »

                                  Пример

                                  Установить различные типы стилей списков (с помощью CSS):

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

                                  • Кофе

                                  • Чай

                                  • Молоко

                                  Попробуй сам »

                                  Пример

                                  Создать список внутри списка (вложенный список):

                                  • Кофе

                                  • Чай

                                    • Черный чай

                                    • Зеленый чай

                                  • Молоко

                                  Попробуй сам »

                                  Пример

                                  Создать более сложный вложенный список:

                                  • Кофе

                                  • Чай

                                    • Черный чай

                                    • Зеленый чай

                                      • Китай

                                      • Африка

                                  • Молоко

                                  Попробуй сам »

                                  Связанные страницы

                                  Учебное пособие по HTML: списки HTML

                                  Ссылка на HTML DOM: Li Object

                                  Учебное пособие по CSS: списки стилей

                                  Настройки CSS по умолчанию

                                  Большинство браузеров отображают элемент

                                4. со следующими значениями по умолчанию:

                                  li {
                                  дисплей: элемент списка;
                                  }

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

                                  HTML-элемент

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

                                    Категории содержимого Flow content, и если дочерние элементы элемента

                                      включают хотя бы один элемент

                                    • , ощутимое содержимое.
                                    Разрешенное содержание Ноль или более элементов

                                  • ,