Упорядоченный список начинается с тега: Упорядоченный список — Разметка текста — HTML Academy

Leave a Comment / Разное / By /

Содержание

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

❮ Назад Далее ❯

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

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

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

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

Пример

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

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

HTML Нумерованный список — атрибут type

Атрибут type, тега <ol>, определяет тип маркера элемента списка:

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

Числа:

<ol type=»1″>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

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

Верхний регистр:

<ol type=»A»>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

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

Нижний регистр:

<ol type=»a»>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

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

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

<ol type=»I»>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

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

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

<ol type=»i»>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

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

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

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

Пример

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

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

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

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

Пример

<ol>
  <li>Кофе</li>
  <li>Чай
    <ol>
      <li>Черный чай</li>
      <li>Зеленый чай</li>
    </ol>
  </li>
  <li>Молоко</li>
</ol>

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

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

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

  • Используйте HTML элемент <ol> для определения упорядоченного списка
  • Используйте HTML атрибут type для определения типа нумерации
  • Используйте HTML элемент <li> для определения элемента списка
  • Списки могут быть вложенными
  • Элементы списка могут содержать другие элементы HTML

HTML Теги списка

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

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

❮ Назад Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть

ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

Списки в HTML — Как создать сайт

В языке HTML, существует 3 типа списков:

  • Упорядоченный список (тег ol)
  • Неупорядоченный список (тег ul)
  • Список определений

В этом уроке, мы рассмотрим с вами два вида списков: упорядоченный и неупорядоченный.

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

Упорядоченный список в HTML — это такой список где каждый элемент имеет свой порядковый номер (1, 2, 3, 4 и т.д.). Упорядоченный список в HTML, начинается и заканчивается тегами ol, каждый элемент списка обрамляется тегами li. Рассмотрим пример упорядоченного списка:

<ol>
  <li>Открыть программу</li>
  <li>Нажать кнопку</li>
  <li>Выбрать из списка</li>
  <li>Ввести данные</li>
  <li>Закрыть программу</li>
</ol>

Результат:

  1. Открыть программу
  2. Нажать кнопку
  3. Выбрать из списка
  4. Ввести данные
  5. Закрыть программу

Тегами упорядоченного списка удобно обрамлять различные пошаговые инструкции

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

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

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

Неупорядоченный список в HTML — это список, где перед каждым элементом ставится маркер (черный кружок). Неупорядоченный список в HTML, начинается и заканчивается тегами ul, каждый элемент списка обрамляется тегами li. Рассмотрим пример неупорядоченного списка:

<ul>
 <li>Лето</li>
 <li>Осень</li>
 <li>Зима</li>
 <li>Весна</li>
</ul>

Результат:

  • Лето
  • Осень
  • Зима
  • Весна

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

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

  • Category: HTML
  • Tag: html, списки html, тег ol, тег ul, учебник html

Дата публикации поста: 8 февраля 2016

Дата обновления поста: 8 февраля 2016

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

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

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

Как следует из самого названия, все элементы списка по умолчанию отмечены цифрами в Нумерованном списке. Он широко известен как упорядоченный список HTML и, следовательно, начинается с тега

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

     

    TYPE
    DESCRIPTION     		VALUES USES
    Type “1” Numeric Number 1, 2, 3 Default type. Элементы списка нумеруются цифрами.
    Тип «I» Заглавная римская цифра I, II, III Элементы списка нумеруются прописными римскими цифрами.
    Тип «i» Малый римский номер i, ii, iii Элементы списка нумеруются строчными римскими цифрами.
    Тип «A» Заглавные буквы A, B, C Элементы списка нумеруются прописными буквами.
    Тип «a» Строчный алфавит a, b, c Элементы списка нумеруются строчными буквами.

     
    Пример: введите «1» 

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     
<ол>
  
  2. Имя
    3. 
  
  3. Возраст
    4. 
  
  4. Адрес
    5.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Имя 
      2. 
   
    2.  Возраст 
      3. 
   
    3.  Адрес 
      4.

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

    Пример: Тип «I» 

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     

      
  
    1. Имя
      2. 
  
    2. Возраст
      3. 
  
    3. Адрес
      4.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Имя 
      2. 
   
    2.  Возраст 
      3. 
   
    3.  Адрес 
      4.

    Объяснение:
    В приведенном выше примере мы создали упорядоченный или нумерованный список типа «I» в HTML, содержащий три элемента.

    Пример: Введите «i» 

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     

      
  
    1. Имя
      2. 
  
    2. Возраст
      3. 
  
    3. Адрес
      4.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Имя 
      2. 
   
    2.  Возраст 
      3. 
   
    3.  Адрес 
      4.

    Объяснение:
    В приведенном выше примере мы создали упорядоченный или нумерованный список типа «i» в HTML, содержащий три элемента.

    Пример: Тип «A» 

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     
<ол тип="А">
  
  5. Имя
    6. 
  
  6. Возраст
    7. 
  
  7. Адрес
    8.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Наименование 
      2. 
   
    2.  Возраст 
      3. 
   
    3.  Адрес 
      4.

    Объяснение:
    В приведенном выше примере мы создали упорядоченный или нумерованный список типа «А» в HTML, содержащий три элемента.

    Пример: Введите «a» 

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     
<ол тип="а">
  
  8. Имя
    9. 
  
  9. Возраст
    10. 
  
  10. Адрес
    11.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Имя 
      2. 
   
    2.  Возраст 
      3. 
   
    3.  Адрес 
      4.

    Объяснение:
    В приведенном выше примере мы создали упорядоченный или нумерованный список типа «a» в HTML, содержащий три элемента.

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

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     

      
  
    1. Имя
      2. 
  
    2. Возраст
      3. 
  
    3. Адрес
      4.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Имя 
      2. 
   
    2.  Возраст 
      3. 
   
    3.  Адрес 
      4.

    Объяснение:
    В приведенном выше примере мы создали упорядоченный или нумерованный список типа «a» в HTML, содержащий три элемента. Здесь нумерация пунктов списка начиналась с 10-й буквы в алфавитном порядке – «j».

    Упорядоченный список HTML или Нумерованный список с использованием атрибута REVERSED:
    Атрибут Reversed — это логический атрибут HTML-тега ol, который недавно добавлен в версию HTML5. Как следует из названия, этот атрибут используется для обратной нумерации элементов списка.
    Пример: 

     

<тело>
 
    Упорядоченный список или нумерованный список в формате HTML
     
<ол наоборот>
  
  11. Имя
    12. 
  
  12. Возраст
    13. 
  
  13. Адрес
    14.

    Вывод: 

      
     Упорядоченный список HTML или нумерованный список 
     
 
       
    1.  Имя 
      2. 
   
    2.  9 лет0114
   
    3.  Адрес 
      4.

    Объяснение:
    В приведенном выше примере мы создали упорядоченный или нумерованный список типа по умолчанию в HTML, содержащий три элемента, но порядок нумерации элементов списка изменен на обратный с помощью атрибута «обратный».

    Пожалуйста, поделитесь

    [Глава 8] 8.2 Заказные списки

    Глава 8
    Форматированные списки

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

    Тег

      Типичный браузер форматирует содержимое упорядоченного списка так же, как неупорядоченный список, за исключением того, что элементы пронумерованы, а не пуленепробиваемый. Нумерация начинается с единицы и увеличивается на единицу для каждый последующий элемент упорядоченного списка, помеченный <ли>. [раздел под названием «Тег

    1. »]

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

       
      Маринованные кумкваты
       
Вот простой способ приготовить вкусную порцию маринованных кватов:
<ол>
  
    2. Промойте 50 фунтов свежих кумкватов.
  
    3. Доведите до кипения восемь галлонов белого уксуса.
  
    4. Постепенно добавляйте кумкват, поддерживая кипение уксуса.
  
    5. Варить в течение часа или пока кумкват не станет мягким.
  
    6. Разложите по герметичным банкам и наслаждайтесь!

    Это визуализируется Netscape, как показано на рис. 8.2.

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

    Начальный атрибут

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

      позволяет изменить это начальное значение. К начните нумерацию списка с 5, например:

      <старт=5>
  
    1.  Это пункт номер 5.
  
    2.  Это номер шесть!
  
    3. И так далее. ..
    Атрибут типа

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

      для изменения самого стиля нумерации. С тег
        , атрибут type может иметь значение «А» для нумерации прописными буквами, «а» для нумерации с строчные буквы, «I» для заглавных римских цифр, «i» для строчных Римские цифры или «1» для обычных арабских цифр. (Видеть Таблица 8.1).

        Таблица 8.1: Значения типа HTML 3.2 для нумерации упорядоченных списков
        Тип Значение Сгенерированный стиль Образец последовательности
        А Заглавные буквы А, Б, С, Г
        и Строчные буквы а, б, в, г
        я Заглавные римские цифры I, II, III, IV
        и Строчные римские цифры я, ii, iii, iv
        1 арабские цифры 1, 2, 3, 4

        Расширения атрибутов start и type работают в тандеме. Начало атрибут устанавливает начальное значение целочисленного счетчика элемента в начало упорядоченного списка. Атрибут type устанавливает фактический стиль нумерации. Например, следующий упорядоченный список начинается нумерация элементов на 8, но поскольку стиль нумерации установлен на i, первая цифра — строчная римская цифра «viii». Последующий элементы нумеруются в том же стиле, каждое значение увеличивается на 1, как показано в этом примере:

          
  
        1.  Это римское число 8.
  
        2.  Цифры увеличиваются на 1.
  
        3. И так далее...

        Результаты показаны на рис. 8.3.

        Рисунок 8.3: Атрибуты start и type работают совместно

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

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

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

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

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