Тег ol html: Тег | htmlbook.ru

Leave a Comment / Html / By /

Тег — упорядоченный список

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

Описание

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

Для создания нумерованного списка в HTML используется тег <ol> (ol сокращение от англ. ordered list — упорядоченный список), который информирует браузер, что все его содержимое, вплоть до закрывающего тега </ol>, представляет собой нумерованный список. Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Элементы для нумерованных списков определяются с помощью тега <li>, каждый такой элемент, помимо текстового содержимого, может включать в себя практически любые HTML-элементы (списки, изображения, заголовки, абзацы и др. ). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Атрибуты

reversed:
Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута: 

<ol reversed>
<ol reversed="reversed">
<ol reversed="">

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

start:
Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке. Пример »
type:
Определяет вид маркера, который будет использоваться для элементов списка:
  • 1 — десятичные числа (1, 2, 3, 4 …).
  • A — латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D …).
  • a
    — латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d …).
  • I — римские цифры в верхнем регистре (I, II, III, IV …).
  • i — римские цифры в нижнем регистре (i, ii, iii, iv …).
Пример »

Тег <ol> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Пример


<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

Результат данного примера в окне браузера:

Тег ol

HTML5CSS. ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

2 различных упорядоченных списков:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start=»50″>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

Тег <ol> определяет упорядоченный список. Упорядоченный список может быть числовым или алфавитным.

Используйте тег <li> для определения элементов списка.

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

Элемент
<ol>ДаДаДаДаДа

Советы и примечания

Совет: Для неупорядоченного списка используйте тег<ul>

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

Различия между HTML 4,01 и HTML5

Атрибуты «start» и»type» были Устаревшие в HTML 4,01, но поддерживаются в HTML5.

«reversed» атрибут является новым в HTML5.

Атрибут «compact» не поддерживается в HTML5.

Атрибуты

= Новый в HTML5.

АтрибутЗначениеОписание
compactcompactНе поддерживается в HTML5.
Указывает, что список должен отображать меньше, чем обычный
reversedreversedУказывает, что порядок списков должен быть по убыванию (9,8,7…)
startnumberЗадает начальное значение упорядоченного списка
type1
A
a
I
i		Указывает тип маркера для использования в списке

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

Тег <ol> также поддерживает Глобальные атрибуты в HTML.

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

Тег <ol> также поддерживает Атрибуты событий в HTML.

Похожие страницы

HTML Учебник: HTML Lists

HTML DOM reference: Ol Object

CSS Учебник: Styling Lists

Параметры CSS по умолчанию

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

Пример

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Тег HTML ol

❮ Назад Полный справочник HTML Далее ❯


Пример

Два разных упорядоченных списка (первый список начинается с 1, а второй начинается с 50):

<ол>

  • Кофе

  • Чай

  • Молоко


    1. Кофе

    2. Чай

    3. Молоко

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

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

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

    Тег

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

      Тег

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

      Совет: Используйте CSS для оформления списков.

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

        .

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

        Элемент
        <ол> Да Да Да Да Да

        Атрибуты

        Атрибут Значение Описание
        реверс наоборот Указывает, что порядок списка должен быть обратным (9,8,7…)
        начало номер Задает начальное значение упорядоченного списка
        тип 1
        А


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

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

        Тег

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

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

          9Тег 0029

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

            Дополнительные примеры

            Пример

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


            1. Кофе

            2. Чай

            3. Молоко


            1. Кофе

            2. Чай

            3. Молоко

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

            Пример

            Показать все различные типы списков, доступные с помощью CSS:

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

            Пример

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


               
            1. Кофе

            2. Чай

              3.  
            3. Молоко


               
            1. Кофе

              2.  
            2. Чай

            3. Молоко

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

            Пример

            Вложите неупорядоченный список в упорядоченный список:


               
            1. Кофе

              2.  
            2. Чай
                 

              • Черный чай

                •      
              • Зеленый чай


               

              3.  
            3. Молоко

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

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

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

            Справочник по HTML DOM: Ol Object

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

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

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

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

              Пример

              ol {
                display: block;
                тип-стиля-списка: десятичный;
                Верхнее поле: 1em;
               нижнее поле: 1em;
                левое поле: 0;
               правое поле: 0;
                padding-left: 40px;
              }

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

              ❮ Предыдущая Полный справочник HTML Следующий ❯


              ВЫБОР ЦВЕТА

              Лучшие учебники
              Учебник HTML
              Учебник CSS
              Учебник по JavaScript
              How To Tutorial
              Учебник по SQL
              Учебник по Python
              Учебник по W3. CSS
              Учебник по Bootstrap
              Учебник по PHP
              Учебник по Java
              Учебник по C++
              Учебник по jQuery


              5 Top References HTML Reference
              CSS Reference
              JavaScript Reference
              SQL Reference
              Python Reference
              W3.CSS Reference
              Bootstrap Reference
              PHP Reference
              HTML Colors
              Java Reference
              Angular Reference
              Справочник по jQuery

              Основные примеры
              Примеры HTML
              Примеры CSS
              Примеры JavaScript
              Примеры инструкций
              Примеры SQL
              Примеры Python
              Примеры W3.CSS
              Примеры Bootstrap
              Примеры PHP
              Примеры Java
              Примеры XML
              Примеры jQuery

              9002 FORUM | О

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

              Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

              Copyright 1999-2023 Refsnes Data. Все права защищены.
              W3Schools работает на основе W3.CSS.

              Атрибут HTML ol type

              ❮ Тег HTML

                Пример

                Упорядоченный список с римскими цифрами в верхнем регистре:


                1. Кофе

                2. Чай

                3. Молоко

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

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

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

                Атрибут типа указывает тип маркера, который следует использовать в списке (буквы или цифры).

                Совет: Свойство CSS list-style-type предлагает больше типов, чем атрибут типа (см. пример ниже).

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

                Атрибут
                тип Да Да Да Да Да

                Синтаксис

                  Значения атрибутов

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

                  Дополнительные примеры

                  Пример

                  Показать все различные типы списков, доступные с помощью CSS:

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

                  ❮ Тег HTML


                    ВЫБОР ЦВЕТА

                    Лучшие учебники
                    Учебник по HTML
                    Учебник по CSS
                    Учебник по JavaScript
                    Учебник How To
                    Учебник по SQL
                    Учебник по Python
                    Учебник по W3.CSS
                    Учебник по Bootstrap
                    Учебник по PHP
                    Учебник по Java
                    Учебник по C++
                    Учебник по jQuery

                    Основные ссылки
                    HTML Reference
                    CSS Reference
                    JavaScript Reference
                    SQL Reference
                    Python Reference
                    W3.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *